Verbessern Sie Ihr CSS mit diesen 5 Prinzipien.

Das Schreiben von CSS ist ein ziemlich einfacher und unkomplizierter Prozess. Warum sind dann weitere Prinzipien und Best Practices erforderlich?

Mit zunehmendem Umfang des Projekts und der Anzahl der Personen, die daran arbeiten, treten immer deutlicher neue Schwierigkeiten auf, die in Zukunft ernsthafte Probleme verursachen können. Codeduplizierung, komplexe Ketten zur Neudefinition von Eigenschaften, Verwendung von! Wichtige, verbleibende und nicht verwendete CSS-Eigenschaften von Remote-HTML-Elementen usw. Ein solcher Code ist schwieriger zu lesen und zu reparieren.

Durch professionelles Schreiben von CSS wird der Code wartbarer, erweiterbarer, verständlicher und sauberer. Schauen wir uns 5 einfache und sehr effektive Prinzipien an, die Ihr CSS auf die nächste Stufe bringen.

---

Namensprinzip

"In der Informatik gibt es nur zwei komplexe Dinge: Cache-Ungültigmachung und Benennung" - Phil Carleton

Die richtige Benennung und Strukturierung Ihrer CSS-Selektoren ist der erste Schritt, um Ihr CSS lesbarer, strukturierter und sauberer zu machen. Durch das Definieren von Regeln und Einschränkungen in einer Namenskonvention wird Ihr Code standardisiert, zuverlässig und leicht verständlich.

Aus diesem Grund sind Konzepte wie BEM (Block-Element-Modifier) , SMACSS (skalierbare und modulare Architektur für CSS) und OOCSS (Object Oriented CSS) bei vielen Frontend-Entwicklern beliebt.

Prinzip der geringen Spezifität

Das Überschreiben von CSS-Eigenschaften ist sehr nützlich, aber in komplexeren Projekten können die Dinge ziemlich schnell außer Kontrolle geraten. Das Überschreiben von Ketten kann sehr lang und komplex werden, was Sie zur Verwendung zwingt !important für die Lösung von Spezifitätsproblemen, die beim Debuggen von Code oder beim Hinzufügen neuer Funktionen leicht verloren gehen können

 /*     */ .card {} /*     */ .card .title {} .blog-list .card img {} .blog-list .card.featured .title {} #js-blog-list .blog-list .card img {} 

Browser und Spezifität

Einer der Vorteile der Befolgung des Prinzips der geringen Spezifität ist die Leistung. Browser analysieren CSS von rechts nach links .

Schauen wir uns das folgende Beispiel an:

 .blog-list .card img {} 

Browser "lesen" den Selektor wie folgt:

1. Finden Sie alle <img> -Tags auf einer Seite
2. Wählen Sie aus diesen Elementen Elemente aus, die Nachkommen der Klasse .card sind
3. Wählen Sie aus diesen Elementen Elemente aus, die Nachkommen der Klasse .blog-list sind

Sie können sehen, wie sich Selektoren mit hoher Spezifität auf die Leistung auswirken, insbesondere wenn wir ein gemeinsames Element wie div , img , li usw. global auswählen müssen.

Mit der gleichen Spezifität

Mit CSS-Selektoren mit geringer Spezifität in Kombination mit der BEM-Methodik oder einem der anderen im vorherigen Abschnitt genannten Namensprinzipien können wir leistungsstarken, flexiblen und leicht verständlichen Code erstellen.

Warum CSS-Klassen verwenden? Wir möchten das gleiche Maß an Spezifität einhalten und dabei flexibel bleiben und mehrere Elemente auswählen können. Element- und ID-Selektoren bieten nicht die Flexibilität, die wir benötigen.

Lassen Sie uns das vorherige Beispiel mit BEM umschreiben und dabei an der geringen Spezifität festhalten.

 /*     */ .card {} /*      */ .card__title {} .blogList__image {} .blogList__title--featured {} .blogList__img--special {} 

Sie können sehen, wie diese Selektoren einfacher und übersichtlicher sind und bei Bedarf einfach neu definiert und erweitert werden können. Und indem wir ihre Spezifität niedrig halten (die einzige Klasse), garantieren wir optimale Leistung und Flexibilität.

Trockenprinzip

Das DRY-Prinzip (Wiederholen Sie sich nicht, rus. Nicht wiederholen) kann auch auf CSS angewendet werden. Das Duplizieren in CSS kann zu Aufblähen des Codes, unnötigen Überschreibungen, schlechter Unterstützung usw. führen. Dieses Problem kann mit der richtigen Codestruktur und Qualitätsdokumentation behoben werden.

Storybook ist ein großartiges kostenloses Tool, mit dem Sie einen Überblick über die verfügbaren Webinterface-Komponenten erstellen und Qualitätsdokumentationen schreiben können.

 /*    DRY */ .warningStatus { padding: 0.5rem; font-weight: bold; color: #eba834; } .errorStatus { padding: 0.5rem; font-weight: bold; color: #eb3d34; } .form-errorStatus { padding: 0.5rem 0 0 0; font-weight: bold; color: #eb3d34; } 

Lassen Sie uns den Code nach dem DRY-Prinzip umgestalten

 /*    DRY */ .status { padding: 0.5rem; font-weight: bold; } .status--warning { color: #eba834; } .status--error { color: #eb3d34; } .form__status { padding: 0.5rem 0 0 0; } 

Grundsatz der alleinigen Verantwortung

Mit dem Prinzip der alleinigen Verantwortung in CSS können Sie sicher sein, dass CSS-Klassen leicht erweiterbar und neu definiert werden können. Schauen wir uns das folgende Beispiel an

 .button { padding: 1rem 2rem; font-size: 2rem; border-radius: 0.2rem; background-color: #eb4934; color: #fff; font-weight: bold; } .button--secondary { border-radius: 0; font-size: 1rem; background-color: #888; } 

Es ist ersichtlich, dass Sie, wenn Sie die .button- Klasse mit dem sekundären Modifikator .button erweitern müssen, viele Überschreibungen durchführen müssen, obwohl wir nur die Hintergrundfarbe ändern möchten, wobei die Standardstile beibehalten werden.

Das Problem ist, dass unsere .button-Klasse mehrere Rollen hat:

• Definiert ein Blockmodell ( Auffüllen )
• Definiert Typografie ( Schriftgröße , Schriftgröße )
• Bestimmt das Erscheinungsbild ( Farbe , Hintergrundfarbe , Randradius )

Dies erschwert die Erweiterung der CSS-Klasse und ihre Integration mit anderen Klassen. In diesem Sinne wollen wir unser CSS mit BEM und OOCSS verbessern.

 /*   */ .button { padding: 1rem 2rem; font-weight: bold; color: #fff; } /*   */ .button--radialBorder { border-radius: 0.2rem; } .button--large { font-size: 2rem; } .button--primary { background-color: #eb4934; } .button--secondary { background-color: #888; } 

Wir haben die Stile unserer Schaltfläche in mehrere Klassen unterteilt, mit denen die Basisklasse erweitert werden kann. Bei Bedarf können wir Modifikatoren anwenden und neue hinzufügen, wenn sich das Design ändert oder neue Elemente hinzugefügt werden

Das Prinzip der Offenheit / Nähe

Software-Entitäten (Klassen, Module, Funktionen usw.) müssen zur Erweiterung geöffnet, für Änderungen jedoch geschlossen sein. “

In den vorherigen Beispielen haben wir bereits das Open / Closed-Prinzip verwendet. Alle neuen Funktionen und Optionen sollten durch Erweiterung hinzugefügt werden. Schauen wir uns dieses Beispiel an.

 .card { padding: 1rem; } .blog-list .card { padding: 0.5em 1rem; } 

Die .blog-list .card- Auswahl weist mehrere potenzielle Probleme auf:

• Einige Stile können nur angewendet werden, wenn das .card- Element ein untergeordnetes Element des .blog-list- Elements ist
• Stile werden für das .card- Element erzwungen, wenn es im .blog-list- Element platziert wird. Dies kann zu unerwarteten Ergebnissen und unnötigen Überschreibungen führen

Schreiben wir das vorherige Beispiel neu:

 .card { padding: 1rem; } .blogList__card { padding: 0.5em 1rem; } 

Wir beheben das Problem, wenn wir einen einzelnen Klassenselektor verwenden. Mit diesem Selektor können wir unerwartete Effekte vermeiden und keine bedingt verschachtelten Stile verwenden.

Abschließend

Wir haben uns Beispiele angesehen, wie die Anwendung dieser wenigen einfachen Prinzipien den Ansatz zum Schreiben von CSS erheblich verbessern kann:

• Standardisierte Benennung und Struktur, bessere Lesbarkeit mit BEM, OCSS usw.
• Verbesserte Leistung und Struktur mit Selektoren mit geringer Spezifität
• Reduziertes Aufblähen und verbesserte Codequalität nach dem DRY-Prinzip
• Flexibilität und Wartbarkeit nach dem Open / Closed-Prinzip

Vielen Dank, dass Sie sich die Zeit genommen haben, diesen Artikel zu lesen. Wenn Sie es nützlich finden, können Sie es teilen oder einen Kommentar hinterlassen.