Methoden zur Organisation von CSS

Entwickler Ben Frain bemerkte einmal, dass es einfach ist, CSS-Code zu schreiben, aber schwierig, ihn zu skalieren und zu unterstützen. Dieser Artikel beschreibt die verfügbaren Lösungsansätze für dieses Problem.

OOCSS

OOCSS steht für Object-Oriented CSS. Dieser Ansatz hat zwei HauptIdeen

• Trennung von Struktur und Design
• Trennung von Container und Inhalt

Durch die Verwendung dieser Struktur erhält der Entwickler allgemeine Klassen, die an verschiedenen Stellen verwendet werden können.

An dieser Stelle gibt es zwei Nachrichten (wie üblich, gute und schlechte)

• Gut: Reduzierung der Code-Menge durch Wiederverwendung (DRY-Prinzip).
• Schlecht: Komplizierte Wartung. Wenn Sie den Stil eines bestimmten Elements ändern, müssen Sie höchstwahrscheinlich nicht nur CSS ändern (da die meisten Klassen gemeinsam genutzt werden), sondern auch Klassen zum Markup hinzufügen.

Darüber hinaus bietet der OOCSS-Ansatz selbst keine spezifischen Regeln, sondern abstrakte Empfehlungen, sodass die Umsetzung dieser Methode in der Produktion variiert.

Wie es sich herausstellt, haben die Ideen in OOCSS andere dazu inspiriert, ihre eigenen, konkreteren Methoden zur Code-Strukturierung zu entwickeln.

SMACSS

SMACSS steht für Scalable and Modular Architecture for CSS. Das Hauptziel des Ansatzes ist die Reduzierung der Code-Menge und die Vereinfachung der Code-Wartung.

Jonathan Snook teilt Stile in 5 Teile auf

1. Basisregeln. Dies sind die Stile der wichtigsten Website-Elemente – body, input, button, ul, ol usw. In diesem Abschnitt verwenden wir hauptsächlich HTML-Tags und Attributselektoren, in Ausnahmefällen – Klassen (z. B. wenn Sie JavaScript-Stil-Auswahlen haben);
2. Layout-Regeln. Hier sind die Stile globaler Elemente, die Größe des Headers, Footers, der Seitenleiste usw. Jonathan schlägt vor, hier IDs in Selektoren zu verwenden, da diese Elemente nicht mehr als einmal auf der Seite vorkommen. Der Autor des Artikels hält dies jedoch für schlechte Praxis (immer wenn eine ID in den Stilen auftaucht, ist irgendwo auf der Welt eine Katze traurig).
3. Modul-Regeln. Blöcke, die mehrmals auf einer Seite verwendet werden können. Für Modulklassen wird nicht empfohlen, ID- und Tag-Selektoren zu verwenden (zur Wiederverwendbarkeit und Kontextunabhängigkeit bzw.).
4. Zustandsregeln. In diesem Abschnitt werden die verschiedenen Zustände der Module und der Basis der Website festgelegt. Dies ist der einzige Abschnitt, in dem die Verwendung des Schlüsselworts „!Important“ zulässig ist.
5. Themenregeln. Design-Stile, die Sie möglicherweise ersetzen müssen.

Es wird auch empfohlen, einen Namespace für Klassen einzuführen, die zu einer bestimmten Gruppe gehören, sowie einen separaten Namespace für Klassen zu verwenden, die in JavaScript verwendet werden.

Dieser Ansatz erleichtert das Schreiben und Pflegen von Code und hat eine große Anzahl von Entwicklern angezogen.

Atomic CSS

Bei Atomic CSS wird für jede wiederverwendbare Eigenschaft eine separate Klasse erstellt. Zum Beispiel nimmt margin-top: 1px; die Erstellung einer Klasse mt-1 oder width: 200px; die Klasse w-200 an.

Dieser Stil ermöglicht die Minimierung der CSS-Code-Menge durch Wiederverwendung von Deklarationen, und es ist auch relativ einfach, Änderungen an Modulen vorzunehmen, zum Beispiel bei einer Änderung einer technischen Aufgabe.

Dieser Ansatz hat jedoch erhebliche Nachteile

• Klassennamen sind beschreibende Eigenschaftsnamen, die nicht die semantische Natur des Elements beschreiben, was die Entwicklung manchmal erschweren kann.
• Anzeigeeinstellungen sind direkt im HTML.

Aufgrund dieser Mängel stieß der Ansatz auf erhebliche Kritik. Dennoch kann der Ansatz für große Projekte effektiv sein.

Außerdem wird Atomic CSS in verschiedenen Frameworks verwendet, um korrigierende Elementstile zu definieren, und in einigen Schichten anderer Methodologien.

MCSS

MCSS ist Multilayer CSS. Diese Art des Code-Schreibens schlägt vor, Stile in mehrere Teile zu unterteilen, die als Schichten bezeichnet werden.

• Nullschicht oder Fundament. Der Code, der für das Zurücksetzen von Browser-Stilen verantwortlich ist (z. B. reset.css oder normalize.css);
• Die Basisschicht umfasst Stile von wiederverwendbaren Elementen auf der Website: Buttons, Eingabefelder für Text, Hinweise usw.
• Die Projektschicht umfasst separate Module und den „Kontext“ – Modifikationen von Elementen je nach Client-Browser, dem Gerät, auf dem die Website/Anwendung betrachtet wird, Benutzerrollen usw.
• Die kosmetische Schicht ist im OOCSS-Stil geschrieben und nimmt geringfügige Änderungen am Aussehen von Elementen vor. Es wird empfohlen, nur Stile beizubehalten, die das Aussehen beeinflussen und das Layout der Website nicht brechen können (z. B. Farben und nicht kritische Einrückungen).

Die Hierarchie der Interaktion zwischen den Schichten ist sehr wichtig

• Die Basisschicht definiert neutrale Stile und beeinflusst andere Schichten nicht.
• Elemente der Basisschicht können nur die Klassen ihrer Schicht beeinflussen.
• Elemente der Projektschicht können die Basis- und Projektschichten beeinflussen.
• Die kosmetische Schicht ist in Form von beschreibenden OOCSS-Klassen („atomare“ Klassen) konzipiert und beeinflusst keinen anderen CSS-Code, sondern wird selektiv im Markup angewendet.

AMCSS

AMCSS ist „Attribute Modules for CSS“.

Schauen wir uns ein Beispiel an

<div class="button button--large button--blue">Button</div>

Eine solche Klasse ist nicht einfach, also gruppieren wir diese Werte nach Attributen.

Hier ist, was passiert

<div button="large blue">Button</div>

Um Namenskollisionen zu vermeiden, ist es ratsam, Attribute zu benennen. Dann nimmt unser Button-Code folgende Form an

<div am-button="large blue">Button</div>

Wenn Sie den Validator zur Überprüfung des Codes verwenden und ihm das Attribut am-button nicht gefällt, können Sie dem Attributnamen ein data- voranstellen.

Der wenig bekannte Selektor „~=“ (IE7+) wird verwendet, der wie ein Klassenattribut funktioniert: Er wählt Elemente aus, deren Attributwerte die angegebenen Wörter enthalten, getrennt durch Leerzeichen. Der Selektor der Form [class~="link"][class~="button"] ist also ähnlich dem Selektor a.link.button. Sogar in Bezug auf die Spezifität, da die Selektorspezifitäten für die Klasse und das Attribut gleich sind!

Entsprechend der CSS-Code

.button {...}
.button--large {...}
.button--blue {...}

Wird umgewandelt in

[am-button] {...}
[am-button~="large"] {...}
[am-button~="blue"] {...}

Wenn Sie der Meinung sind, dass dieser Code zu ungewöhnlich ist, können Sie eine weniger radikale AMCSS-Form verwenden

<div am-button am-button-large am-button-blue></div>

FUN

FUN steht für Flat hierarchy of selectors (flache Hierarchie von Selektoren), Utility styles (Dienstprogramme-Stile), Name-spaced components (komponenten mit Namensräumen).

Hinter jedem Buchstaben des Namens steckt ein bestimmtes Prinzip

• F, flache Hierarchie von Selektoren: Es wird empfohlen, Klassen zum Auswählen von Elementen zu verwenden, die Kaskade unnötigerweise zu vermeiden und IDs nicht zu verwenden.
• U, Dienstprogramme-Stile: Es wird ermutigt, atomare Dienstprogramm-Stile zur Lösung typischer Markup-Aufgaben zu erstellen, z. B. w100 für width: 100%; oder fr für float: right;
• N, benannte Komponenten: Ben empfiehlt, Namensräume für die Angabe der Stile von spezifischen Modul-Elementen hinzuzufügen. Dieser Ansatz vermeidet Überlappungen in Klassennamen.

Einige Entwickler stellen fest, dass der nach diesen Prinzipien geschriebene Code recht bequem zu schreiben und zu warten ist. Der Autor hat gewissermaßen das Beste aus SMACSS übernommen und diese Technik einfach und prägnant dargestellt.

Dieser Ansatz stellt recht wenige Anforderungen an das Projekt und die Code-Struktur. Er legt nur die bevorzugte Form der Aufzeichnung von Selektoren und deren Verwendung im Markup fest. Aber in kleinen Projekten können diese Regeln durchaus ausreichen, um qualitativ hochwertigen Code zu erstellen.

Fazit

Wie Sie sehen, gibt es unter diesen Ansätzen keine ideale Lösung. Daher ist keine dieser Methoden eine absolute Regel – Sie können einen Ansatz von Grund auf neu nehmen, um etwas Eigenes zu schaffen, oder einen neuen Ansatz von Grund auf neu entwickeln.