Erkundung von SMACSS: Skalierbare und modulare Architektur für CSS

Veröffentlicht: 2022-03-11

Wenn wir an großen Projekten oder mit Gruppen von Entwicklern arbeiten, stellen wir oft fest, dass unser Code chaotisch, schwer zu lesen und schwer zu erweitern ist. Dies gilt insbesondere, wenn die Zeit vergeht und wir zurückkommen und es uns noch einmal ansehen – wir müssen versuchen, in der gleichen Denkweise zu sein, in der wir es geschrieben haben.

Viele Leute haben also CSS-Architekturen erstellt, um ihren Code so zu gestalten, dass CSS besser lesbar wird. SMACSS – dh Scalable and Modular Architecture for CSS – zielt darauf ab, genau das zu tun. Es handelt sich um eine bestimmte Reihe von CSS-Architekturrichtlinien von Jonathan Snook, die ich übernommen habe.

Nun, der architektonische Ansatz von SMACSS unterscheidet sich ein wenig von einem CSS-Framework wie Bootstrap oder Foundation. Stattdessen handelt es sich um eine Reihe von Regeln, eher wie eine Vorlage oder eine Anleitung. Lassen Sie uns also in einige CSS-Designmuster eintauchen, um herauszufinden, wie wir sie verwenden können, um unseren Code besser, sauberer, leichter lesbar und modularer zu machen.

Jede SMACSS-Projektstruktur verwendet fünf Kategorien:

Base
Layout
Module
Bundesland
Thema

Base

In SMACSS definieren Basisstile, wie ein Element überall auf der Seite aussehen soll. Sie sind die Standardwerte. Wenn Sie ein zurückgesetztes Stylesheet verwenden, stellt dies sicher, dass Ihre resultierenden Stile trotz der Unterschiede zwischen ihren internen, fest codierten Basis-CSS-Standardwerten in allen Browsern gleich sind.

In einem Basisstil sollten Sie nur bloße Elementselektoren oder solche mit Pseudoklassen, aber nicht mit Klassen- oder ID-Selektoren einschließen. (Sie sollten wirklich gute Gründe haben, Klasse oder ID darin zu platzieren, vielleicht nur, wenn Sie die Elemente eines Drittanbieter-Plugins stylen und das Standard-Styling für dieses bestimmte Element überschreiben müssen.)

Hier ist ein Beispiel dafür, wie eine Basisdateieinheit aussehen sollte:

 html { margin: 0; font-family: sans-serif; } a { color: #000; } button { color: #ababab; border: 1px solid #f2f2f2; }

Daher sollte es Standardgrößen, Ränder, Farben, Rahmen und alle anderen Standardwerte enthalten, die Sie auf Ihrer Website verwenden möchten. Ihre Typografie und Ihre Formularelemente sollten einheitliche Stile haben, die auf jeder Seite erscheinen und das Gefühl und Aussehen vermitteln, dass sie Teil desselben Designs und Themas sind.

SMACSS oder nicht, ich empfehle dringend, die Verwendung von !important so weit wie möglich zu vermeiden und keine tiefe Verschachtelung zu verwenden, aber ich werde später in diesem Beitrag mehr darüber sprechen. Auch wenn es Ihre Praxis ist, CSS zurückzusetzen, ist dies der Ort, an dem Sie es einfügen sollten. (Ich ziehe es vor, Sass zu verwenden, also füge ich es einfach oben in die Datei ein, anstatt es hineinkopieren oder separat vom <head> -Element jeder Seite darauf verweisen zu müssen.)

Siehe auch: Thematisierung mit Sass: Ein SCSS-Tutorial

Layout

Layoutstile unterteilen die Seite in Hauptabschnitte – nicht Abschnitte wie die Navigation oder vielleicht das Akkordeon zum Beispiel, sondern wirkliche Unterteilungen der obersten Ebene:

SMACSS-Layoutstile gelten für Hauptabschnitte wie Kopfzeile, Seitenleiste, Inhalt/Haupt- und Fußzeile.

Diese Layouts enthalten mehrere CSS-Module wie Boxen, Karten, ungeordnete Listen, Galerien und dergleichen, aber ich werde im nächsten Abschnitt mehr über Module sprechen. Betrachten wir eine Beispiel-Webseite, um zu sehen, was wir in Layouts aufteilen können:

Eine Beispiel-Webseite, die mit SMACSS in Kopf-, Haupt- und Fußzeilen-Layoutstilen organisiert werden kann

Hier haben wir Kopf-, Haupt- und Fußzeile. Diese Layouts haben Module wie Links und Logo in der Kopfzeile oben, Boxen und Artikel in der Hauptzeile und Links und Copyright für die Fußzeile. Normalerweise geben wir Layouts einen ID-Selektor, da sie sich auf der Seite nicht wiederholen und einzigartig sind.

Außerdem sollten Sie Regeln für Layoutstile den Buchstaben l voranstellen, um sie von Modulstilen zu unterscheiden. Normalerweise würden Sie hier layoutspezifische Dinge wie Rahmen, Ausrichtungen, Ränder usw. gestalten. Auch der Hintergrund dieses Teils der Seite könnte sinnvoll sein, auch wenn er nicht ganz so layoutspezifisch zu sein scheint.

Hier ist ein Beispiel, wie es aussehen sollte:

 #header { background: #fcfcfc; } #header .l-right { float: right; } #header .l-align-center { text-align: center; }

Sie können diese Helfer auch für Ausrichtungen hinzufügen, mit denen Sie Elemente einfach positionieren können, indem Sie einfach die entsprechende Klasse zu ihrem Kind hinzufügen oder ihren Text ausrichten.

Als weiteres Beispiel könnten Sie einige Standardränder für eine Layoutbox verwenden, z. B. .l-margin mit einem Rand von 20px . Dann fügen Sie einfach die l-margin Klasse hinzu, wo immer Sie einen Container, ein Element, eine Karte oder eine Box auffüllen möchten. Aber Sie wollen etwas Wiederverwendbares:

 .l-full-width { width: 100%; }

Nicht so etwas, das intern gekoppelt ist:

 .l-width-25 { width: 25px; }

Ich möchte mir einen Moment Zeit nehmen, um über Namenskonventionen in SMACSS zu sprechen. Wenn Sie noch nie vom Konzept des Namensraums in CSS gehört haben, fügt es im Grunde den Namen an den Anfang eines anderen Elements, um es von allem anderen zu unterscheiden. Aber warum brauchen wir das?

Ich weiß nicht, ob Sie jemals auf das folgende Problem gestoßen sind. Sie schreiben CSS und haben ein Label für etwas – Sie fügen beliebige Stile ein und nennen Ihre Klasse .label . Aber dann kommen Sie später zu einem anderen Element, und Sie möchten, dass es auch .label ist, aber es anders gestalten. Also haben zwei verschiedene Dinge denselben Namen – ein Namenskonflikt.

Namespace hilft Ihnen dabei, dieses Problem zu lösen. Letztendlich heißen sie auf einer Ebene gleich, haben aber einen anderen Namensraum – ein anderes Präfix – und können daher zwei verschiedene Stile darstellen:

 .box--label { color: blue; } .card--label { color: red; }

Modul

Wie ich bereits erwähnt habe, sind SMACSS-Module kleinere Code-Bits, die auf der Seite wiederverwendet werden können und Teil eines einzelnen Layouts sind. Dies sind Teile von CSS, die wir in einem separaten Ordner speichern möchten, da wir viele davon auf einer einzigen Seite haben werden. Und wenn ein Projekt wächst, können wir es mithilfe von Best Practices für die Ordnerstruktur aufteilen, z. B. nach Modulen/Seiten:

Eine beispielhafte Datei-/Ordnerhierarchie mit SMACSS und Sass

Im vorherigen Beispiel hatten wir also einen Artikel, der ein eigenständiges Modul sein kann. Wie soll hier CSS aufgebaut sein? Wir sollten eine Klasse .article haben, die untergeordnete Elemente title und text haben kann. Um es also im selben Modul behalten zu können, müssen wir den untergeordneten Elementen ein Präfix voranstellen:

 .article { background: #f32; } .article--title { font-size: 16px; } .article--text { font-size: 12px; }

Sie werden vielleicht bemerken, dass wir zwei Bindestriche nach dem Modulpräfix verwenden. Der Grund dafür ist, dass Modulnamen manchmal zwei Wörter oder eigene Präfixe wie big-article haben. Wir brauchen zwei Bindestriche, um zu sagen, welcher Teil davon das untergeordnete Element ist – vergleichen Sie zB big-article-title mit big-article--title und big-article--text .

Außerdem können Sie Module innerhalb von Modulen verschachteln, wenn ein bestimmtes Modul einen großen Teil der Seite einnimmt:

 <div class="box"> <div class="box--label">This is box label</div> <ul class="box--list list"> <li class="list--li">Box list element</li> </ul> </div>

Hier, in diesem einfachen Beispiel, können Sie sehen, dass box ein Modul und list ein weiteres Modul darin ist. list--li ist also ein untergeordnetes Element des list -Moduls und nicht des box Moduls. Eines der Schlüsselkonzepte hier ist, maximal zwei Selektoren pro CSS-Regel zu verwenden, aber in den meisten Szenarien nur einen Selektor mit Präfixen zu haben.

Auf diese Weise können wir vermeiden, Regeln zu duplizieren und zusätzliche Selektoren für untergeordnete Elemente mit denselben Namen zu haben, wodurch die Geschwindigkeit verbessert wird. Aber es hilft uns auch, die Verwendung der unerwünschten !important -Stilregeln zu vermeiden, die ein Zeichen für schlecht strukturierte CSS-Projekte sind.

Gut (beachten Sie den Einzelselektor):

 .red--box { background: #fafcfe; } .red-box--list { color: #000; }

Schlecht (beachten Sie die Wiederholung innerhalb von Selektoren und die überlappende Referenzmethode):

 .red .box { background: #fafcfe; } .red .box .list { color: #000; } .box ul { color: #fafafa; }

Bundesland

Was Zustand in SMACSS definiert, ist eine Möglichkeit zu beschreiben, wie unsere Module in verschiedenen dynamischen Situationen aussehen. Dieser Teil dient also wirklich der Interaktivität: Wir wollen ein unterschiedliches Verhalten, wenn ein Element als ausgeblendet, erweitert oder geändert betrachtet wird. Beispielsweise benötigt ein jQuery-Akkordeon Hilfe bei der Definition, wann Sie den Inhalt eines Elements sehen können oder nicht. Es hilft uns, den Stil eines Elements zu einem bestimmten Zeitpunkt zu definieren.

Zustände werden auf dasselbe Element wie das Layout angewendet, daher fügen wir eine zusätzliche Regel hinzu, die die vorherigen außer Kraft setzt, falls vorhanden. Der staatlichen Regel wird Vorrang eingeräumt, da sie die letzte in der Regelkette ist.

Wie bei Layoutstilen verwenden wir hier Präfixe. Das hilft uns, sie zu erkennen und ihnen Priorität einzuräumen. Hier verwenden wir das Präfix is , wie in is-hidden oder is-selected .

 <header> <ul class="nav"> <li class="nav--item is-selected">Contact</li> <li class="nav--item">About</li> </ul> </header>

 .nav--item.is-selected { color: #fff; }

Hier kann !important verwendet werden, da state oft als JavaScript-Modifikation und nicht zur Renderzeit verwendet wird. Beispielsweise haben Sie ein Element, das beim Laden der Seite ausgeblendet wird. Beim Klicken auf die Schaltfläche möchten Sie es anzeigen. Aber die Standardklasse sieht so aus:

 .box .element { display: none; }

Wenn Sie also nur dies hinzufügen:

 .is-shown { display: block; }

Es bleibt ausgeblendet, auch nachdem Sie die .is-shown Klasse über JavaScript zum Element hinzugefügt haben. Dies liegt daran, dass die erste Regel zwei Ebenen tief ist und diese außer Kraft setzt.

Sie können also stattdessen die Zustandsklasse wie folgt definieren:

 .is-shown { display: block !important; }

So unterscheiden wir Zustandsmodifikatoren von Layoutmodifikatoren, die nur beim anfänglichen Laden einer Seite gelten. Dies funktioniert jetzt unter Beibehaltung der Vorteile minimaler Selektoren.

Thema

Dies sollte am offensichtlichsten sein, da es verwendet wird, um die Regeln der Primärfarben, Formen, Ränder, Schatten und dergleichen zu enthalten. Meistens handelt es sich dabei um Elemente, die sich über eine ganze Website wiederholen. Wir wollen sie nicht jedes Mal neu definieren, wenn wir sie erstellen. Stattdessen wollen wir eine eindeutige Klasse definieren, die wir erst später zu einem Standardelement hinzufügen.

 .button-large { width: 60px; height: 60px; }

 <button class="button-large">Like</button>

Verwechseln Sie diese SMACSS-Designregeln nicht mit Basisregeln, da Basisregeln nur auf das Standard-Erscheinungsbild abzielen und in der Regel so etwas wie das Zurücksetzen auf Standard-Browsereinstellungen sind, während eine Designeinheit eher eine Art Styling ist, bei dem sie das endgültige Aussehen vorgibt. einzigartig für dieses spezifische Farbschema.

Themenregeln können auch nützlich sein, wenn eine Site mehr als einen einzigen Stil oder vielleicht ein paar Themen hat, die in unterschiedlichen Zuständen verwendet werden und daher während einiger Ereignisse auf einer Seite leicht geändert oder ausgetauscht werden können, z. B. mit einer Schaltfläche zum Wechseln des Themas. Zumindest behalten sie alle Themenstile an einem Ort, sodass Sie sie einfach ändern und gut organisiert halten können.

CSS-Organisationsmethoden

Ich habe einige der Schlüsselkonzepte dieser CSS-Architekturidee behandelt. Wenn Sie mehr über dieses Konzept erfahren möchten, können Sie die offizielle Website von SMACSS besuchen und sich eingehender damit befassen.

Ja, Sie können wahrscheinlich fortgeschrittenere Methoden wie OOCSS und BEM verwenden. Letzteres deckt nahezu den kompletten Frontend-Workflow und seine Technologien ab. BEM-Selektoren mögen für manche Leute großartig funktionieren, aber manche finden sie vielleicht zu lang und überwältigend und auch zu kompliziert in der Verwendung. Wenn Sie etwas Einfacheres brauchen, das leichter zu verstehen und in Ihren Arbeitsablauf zu integrieren ist – und auch etwas, das Grundregeln für Sie und Ihr Team definiert – ist SMACSS genau das Richtige für Sie.

Es wird für neue Teammitglieder einfach sein, nicht nur zu verstehen, was frühere Entwickler gemacht haben, sondern auch sofort mit der Arbeit daran zu beginnen, ohne Unterschiede im Programmierstil. SMACSS ist nur eine CSS-Architektur und sie hält, was sie verspricht – nicht mehr und nicht weniger.