Wie man CSS umgestaltet - Ein Leitfaden

Das CSS-Refactoring muss ein wesentlicher Bestandteil des Frontend-Entwicklungsworkflows sein, wenn wir eine überschaubare und optimierte Codebasis haben wollen. Wenn wir CSS umgestalten, sind wir es Bereinigen und reorganisieren Sie unseren bestehenden Code ohne neue Funktionen hinzuzufügen oder Fehler zu beheben.

Umgestaltung hilft CSS-Explosion verhindern, Lesbarkeit und Wiederverwendbarkeit von Code verbessern, und macht CSS schlanker und schneller auszuführen.

Refactoring ist in der Regel nach einer Weile erforderlich, da selbst Projekte, die früher oder später mit einer übersichtlichen und organisierten Codebasis begonnen haben, an Klarheit verlieren. Konsistenz, überholte Regeln und doppelte Codeteile werden angezeigt. und wir beginnen auch, Stile zu überschreiben und verwenden immer mehr Hacks und Workarounds.

Der beste Weg, um unsere CSS-Code-Basis wartbar zu halten, ist, sich an die “frühzeitig Refaktor, häufig Refaktor” Faustregel. In diesem Beitrag werfen wir einen Blick auf einige Tipps, wie wir einen effektiven CSS-Refactoring-Prozess durchführen können.

1. Führen Sie eine Erstprüfung durch

Um ein besseres Bild davon zu bekommen, was wir umgestalten müssen, ist es das Beste Beginnen Sie mit einem umfassenden Audit, um zu sehen, was wir derzeit haben.

Es gibt viele großartige Online-Tools, die uns dabei unterstützen können. CSSDig ist eine leistungsstarke Chrome-Erweiterung, die das CSS einer Website analysiert und deren Schwachstellen aufzeigt, beispielsweise zu spezifische Selektoren oder sich wiederholende Eigenschaften.

Nicht verwendetes CSS untersucht nicht verwendete CSS-Regeln. Mit Flinting-Tools wie CSS Lint können Kompatibilität, Wartbarkeit und andere Probleme schnell gefunden werden.

Es ist auch wichtig, den Code während des ersten Audits manuell zu prüfen, da viele Probleme auf Architekturebene nur auf diese Weise erkannt werden können.

2. Erstellen Sie einen überschaubaren Plan

Das Umgestalten von Arbeitscode ist immer eine schwierige Aufgabe, aber wir können den Schmerz lindern, wenn wir einen Plan über das, was wir tun müssen, erstellen, den Umgestaltungsprozess in überschaubare Abschnitte aufteilen und einen realisierbaren Zeitplan aufstellen.

Beim CSS-Refactoring müssen wir immer einiges berücksichtigen: Einige Dinge, die wir umgestalten, z. Wenn Sie die Namen der Selektoren ändern, wird es notwendig, um den Code der relevanten HTML- und JavaScript-Dateien anzupassen auch.

Es ist daher eine gute Idee zu Verfolgen Sie diese zusätzlichen Änderungen, die wir durchführen müssen, und baue sie in unseren Zeitplan ein zusammen mit den primären, CSS-bezogenen Aufgaben.

3. Verfolgen Sie den Fortschritt

Bevor Sie mit dem Refactoring beginnen, ist dies ein wesentlicher Schritt Sichern Sie unsere ursprünglichen Dateien. Die Einführung eines Versionskontrollsystems wie Git oder Subversion in unseren Workflow kann den Refactoring-Prozess erheblich verbessern, da wir über eine Registrierung der sequenziellen Schritte verfügen, die wir unternommen haben wird in der Lage sein, zu einer vorherigen Stufe zurückzukehren, wenn wir die Dinge wiederholen möchten.

4. Halten Sie sich an einen Coding Style Guide

Ein kohärenter Kodierungsstil-Leitfaden kann die Lesbarkeit und Wartbarkeit des Codes erheblich verbessern. Bevor wir mit dem Umgestalten beginnen, ist dies unbedingt erforderlich Richten Sie einen CSS-Codierungsstil ein.

Die wichtigsten Dinge zu entscheiden sind:

• Regeln der Namensgebung
• Formatierungsregeln
• Deklarationsauftrag
• Einheiten und Werte, die wir verwenden möchten
• Regeln kommentieren

Wenn Sie keinen eigenen Codierstil-Leitfaden erstellen möchten, können wir auch andere verwenden, z. B. die von ThinkUp, die auf Github zu finden sind.

Es reicht jedoch nicht aus, nur einen Kodierungsstil-Leitfaden einzuführen, den wir auch benötigen Bleiben Sie dabei, wenn wir den Code umschreiben während des Refactorings und Erwarten Sie dasselbe von allen anderen wer arbeitet an unserem Projekt.

5. Richten Sie eine zusammenhängende Dateistruktur ein

Nachdem wir mit den Vorbereitungen fertig sind, müssen wir zunächst eine geeignete CSS-Dateistruktur einrichten, die auf die Kaskadierung von CSS aufmerksam macht.

Es hängt hauptsächlich vom Projekt ab, wie die Dateien am besten organisiert werden. Es gibt jedoch einige allgemeine Regeln, beispielsweise die Verwendung einer separaten normalize.css Datei für CSS-Reset-Stile, eine separate global.css für globale Stile, die im gesamten Projekt verwendet werden, und zum Speichern von Bibliotheken von Drittanbietern in einem separaten Ordner.

Wenn wir mit unserer CSS-Dateistruktur auf Nummer sicher gehen wollen, gibt es auch vorgefertigte Architekturen wie SMACSS oder ITCSS, die effektive Techniken anbieten wie man CSS-Dateien skalierbar organisiert.

6. Lösen Sie nicht verwendete und doppelte Regeln

Nach einer Weile beginnen in der Regel CSS-Dateien mit ungenutzten Regeln, die wir während des Refactorings identifizieren und bereinigen müssen. Es gibt viele Online-Tools, die es uns ermöglichen untersuchen Sie diese veralteten Regeln, und manchmal erlauben wir uns auch, sie schnell aufzugeben.

Das bekannteste Werkzeug für diesen Zweck ist wahrscheinlich UnCSS, ein Node.js-Modul, das es ermöglicht, ungenutzte CSS-Regeln schnell zu entfernen, und bietet uns außerdem ausgefeilte Konfigurationsoptionen, mit denen sich der Reinigungsprozess leicht anpassen lässt.

Es ist wichtig zu berücksichtigen, dass wir möchte nicht unbedingt nicht verwendete Regeln aus entfernen alles die CSS-Dateien, die wir haben, Zum Beispiel aus globalen, zurückgesetzten oder Stylesheets von Drittanbietern schließe sie aus während der Reinigung.

Doppelte Regeln führen neben veralteten Regeln auch zu überflüssigem Code-Aufblähen und Leistungsverlust. Wir können sie mit dem CSS-Modul "Purge Node.js" entfernen, aber wir können auch damit arbeiten CSS-Linters, um nach doppelten Regeln zu suchen in unseren CSS-Dateien.

7. Spezifität reduzieren

Die Spezifität eines CSS-Selektors wird aus der Anzahl und den Typen der darin enthaltenen inneren Selektoren berechnet. CSS-Spezifität wird als 4-stellige Zahl ausgedrückt, die am leichtesten zu verstehen ist, wenn wir diesen visuellen CSS-Spezifitätsrechner auschecken:

Die niedrigste Spezifität (0001) gehört zu Selektoren, die nur ein allgemeines HTML-Element betreffen, wie z

oder

. Je mehr innere Selektoren ein zusammengesetzter Selektor enthält, desto höher ist seine Spezifität.

Bestimmte Selektoren, wie z Ich würde oder Selektoren, die von Inline-Stilen stammen, haben höhere Prioritäten, da sie die Stile überschreiben, die zu allgemeineren Selektoren gehören. Zum Beispiel die Besonderheit der # id1 Wahlschalter ist 0100.

Beim Refactoring besteht das Ziel darin, die Spezifität von Selektoren so gering wie möglich zu halten (möglichst kurz zu halten) Selektoren mit höherer Spezifität reduzieren die Wiederverwendbarkeit von Selektoren erheblich, und führen zu einer aufgeblähten Codebasis.

Die drei Haupttypen von Selektoren mit hoher Spezifität sind:

1. Qualifizierte Selektoren, sowie p.class1 (Definieren der p Tag ist hier nicht erforderlich, da es unmöglich ist, dieselbe Klasse mit anderen HTML-Elementen zu verwenden.)
2. Tief verschachtelte Selektoren, sowie .class1 .class2 .class3 .class4…
3. IDs, sowie # id1

Online-Tools wie CSSDig, die in Schritt 1 erwähnt wurden, können verwendet werden, um diese Selektoren mit hoher Spezifität schnell zu finden. Es kann auch nützlich sein, in der Codierungsstil-Anleitung eine Regel für Dinge wie die maximale Schachtelungsebene oder eine Verwendungsgrenze festzulegen Ich würde Selektoren.

8. Unkraut entfernen !wichtig Regeln

CSS-Regeln, gefolgt von der !wichtig Anweisung überschreibt reguläre Stilregeln. Verwenden !wichtig Regeln früher oder später zu inkohärentem Code führen. Es ist kein Zufall, dass die meisten Fusselwerkzeuge sie als Fehler bezeichnen.

Wenn wir CSS schnell schreiben müssen, können wir uns aufgrund ihrer Einfachheit auf diese verlassen.

Das Hauptproblem mit !wichtig Erklärungen sind, dass wir, wenn wir sie in Zukunft außer Kraft setzen wollen, noch mehr setzen müssen !wichtig Deklarationen in Gebrauch, so dass es am besten ist, sie auszusortieren, wo es während des Refactoring-Prozesses möglich ist.

9. Reinigen Sie die magischen Zahlen und die hartcodierten Werte

Während unseres täglichen CSS-Workflows stoßen wir manchmal auf Probleme, die wir nicht lösen können, und beginnen mit der Verwendung von sogenannten magische Zahlen, Werte, die aus einigen Gründen funktionieren, aber wir verstehen nicht warum. Nehmen Sie zum Beispiel das folgende Beispiel:

 .Klasse1 Position: absolut; oben: 28px; links: 15,5%; 

Das Hauptproblem bei magischen Zahlen ist, dass sie es sind umständlich, und sie verkörpern das “Programmierung durch Permutation” Antipattern. Während des Refactoring-Prozesses müssen wir diese willkürlichen Regeln aus unserem Code entfernen und durch sinnvollere Lösungen ersetzen, wo immer dies möglich ist.

Die gleiche Faustregel gilt für hart codierte Werte auch. Das häufigste Vorkommen von hartcodierten Werten ist wahrscheinlich in Zeilenhöhenregeln zu finden:

 / * schlecht, wir müssen den untergeordneten Elementen von .class1 * feste Regeln für die Zeilenhöhe hinzufügen. * / .class1 font-size: 20px; Zeilenhöhe: 24px;  / * gut, die flexible Zeilenhöhenregel kann auch von untergeordneten Elementen sicher verwendet werden * / .class1 font-size: 20px; Zeilenhöhe: 1,2; 

Durch hartcodierte Werte wird unser Code weniger zukunftssicher und starrer. Daher müssen wir sie als Teil des Refactorings ausgraben und Ersetzen Sie sie durch flexible Werte.

10. Refactor-Einheiten und Werte

Um die Wartung und das Debugging in Zukunft einfacher zu gestalten und um Fehler zu vermeiden, die durch die Verwendung verschiedener Einheiten entstehen können, wie z em und px, gleichzeitig müssen wir Halten Sie sich an kohärente Regeln, wie wir relative und absolute Werte verwenden.

Wenn wir sie in der Vergangenheit uneinheitlich verwendet haben, müssen wir sie so konvertieren, dass sie ein prägnantes System bilden können

Wenn wir auf unserer Website zu viele ähnliche Farben verwenden, kann dies auch eine gute Idee sein das Farbschema rationalisieren indem wir die Anzahl der verwendeten Farben reduzieren. (Hier erfahren Sie, wie Sie auf praktische Weise das Farbschema einer Website auswählen können.)