Verständnis von CSS-Schreibmethoden

In diesem Beitrag werden wir sehen, was CSS-Schreibmethoden sind, einige bekannte Methoden und wie sie uns bei der Optimierung unseres CSS-Codes nützlich sein können. Beginnen wir mit der einfachsten Frage, um den Ball ins Rollen zu bringen. Was ist eine Methodik?

Eine Methodik ist ein System von Methoden . Denken Sie an eine Methode als eine Art und Weise, etwas systematisch zu tun, in einer bestimmten voreingestellten Weise, Dinge zu tun, um das gewünschte Ergebnis zu erzielen.

Um bessere Ergebnisse zu erzielen, verbessern wir unsere Methoden, indem wir sie besser planen, die Reihenfolge ändern, Schritte vereinfachen - was immer schneller und effizienter ist .

CSS-Methodik

Lassen Sie uns nun über die CSS-Methodik sprechen. Genau wie bei so ziemlich allem im Leben, haben wir auch eine Methode, CSS zu schreiben: Einige schreiben zuerst CSS zurück, einige Platzlayoutstile dauern, manche beginnen mit zwei bis drei Klassen zum Formatieren eines Elements, manche schreiben alle CSS-Codes hinein eine einzelne Datei.

Unsere bevorzugten Methoden wurden entweder im Laufe der Zeit selbst entwickelt oder durch andere beeinflusst oder sind an unserem Arbeitsplatz oder aufgrund all der oben genannten Faktoren erforderlich. Aber im Laufe der Zeit haben CSS-Veteranen Methoden zum Schreiben von CSS formuliert, die flexibler, definierter, wiederverwendbar, verständlich und überschaubar sind .

Wir werden diese formulierten Methoden betrachten, die Folgendes beinhalten werden:

1. OOCSS (objektorientiertes CSS)
2. BEM (Block, Element, Modifikator)
3. ACSS (Atomic CSS)
4. SMACSS (Skalierbare und modulare Architektur für CSS)

Hinweis : Keines der unten aufgeführten Konzepte sollte mit einem Framework, einer Bibliothek oder einem Tool verwechselt werden, das denselben Namen und dasselbe Konzept wie diese Methoden hat. In diesem Beitrag geht es nur um die Methoden zum Schreiben von CSS.

1. OOCSS

Die Schlüsselkonzepte von OOCSS (Object Oriented CSS), die 2008 von Nicole Sullivan entwickelt wurden, umfassen die Identifizierung von CSS- Objekten, die Trennung von Struktur und visuellen Stilen sowie die Vermeidung ortsbezogener Stile.

In OOCSS ist der erste Schritt, den Nicole vorschlägt , Objekte in CSS zu identifizieren .

"Grundsätzlich ist ein CSS-" Objekt "ein sich wiederholendes visuelles Muster, das in ein unabhängiges Snippet von HTML, CSS und möglicherweise JavaScript abstrahiert werden kann. Dieses Objekt kann dann in einer Site wiederverwendet werden. - Nicole Sullivan, Github (OOCSS) "

Nehmen Sie zum Beispiel diese Struktur von dieser Seite. Hier ist etwas, das ein sich wiederholendes visuelles Muster ist und sein eigenes unabhängiges HTML und / oder CSS hat:

Wir haben hier zwei Arten von Objekten, eine größere Vorschau von Titeln, die wir post-preview-primary und eine Sidebar mit Titeln, die wir post-preview-secondary .

Wir müssen Struktur und Haut trennen (dh Stile, die das Aussehen der Objekte erzeugen). Die beiden Arten von Objekten haben unterschiedliche Strukturen, eine ist in einer größeren Box, obwohl sie ähnlich aussieht, mit Bildern auf der linken Seite und Titeln auf der rechten Seite.

Lassen Sie uns den Bildern beider Objekte eine Klasse post-preview-image und fügen Sie den Code hinzu, der das Bild links platziert. Dies hält uns davon ab, den Code zu wiederholen, wo das Bild in Objekte in CSS eingefügt werden soll. Wenn es andere ähnliche Objekte gibt, verwenden wir das post-preview-image für sie.

Die Hauttrennung kann auch für einfachere Stile wie Rahmen oder Hintergründe erfolgen . Wenn Sie mehrere Objekte mit dem gleichen blauen Rahmen haben, wird durch das Erstellen einer separaten Klasse für den blauen Rahmen und das Hinzufügen von Objekten zu Objekten die Häufigkeit reduziert, mit der die blauen Rahmen in CSS codiert werden müssen .

Nicole schlägt außerdem vor, Stile nicht basierend auf dem Ort hinzuzufügen, zum Beispiel, anstatt alle Links innerhalb eines bestimmten zu markierenden DIVs zu markieren, geben Sie diesen Links eine Highlighter-Klasse mit den entsprechenden CSS-Stilen. Auf diese Weise können Sie die Highlighter-Klasse wiederverwenden, wenn Sie einen Link in einem anderen Teil der Seite markieren müssen.

Vorteile von OOCSS : Wiederverwendbare visuelle Styling-Codes, flexible Codes für Standorte, Reduzierung von tief verschachtelten Selektoren.

Nachteile von OOCSS : Ohne eine angemessene Menge sich wiederholender visueller Muster scheinen trennende Strukturen und visuelle Stilcodes unnötig zu sein.

2. BEM

Die Schlüsselkonzepte für BEM (Block, Element, Modifier) ​​wurden von Entwicklern bei Yandex im Jahr 2009 entwickelt und umfassen die Identifizierung von Blöcken, Elementen und Modifikatoren sowie deren entsprechende Benennung.

Ein "Block" ist im Wesentlichen das gleiche wie ein "Objekt" (aus dem obigen Beispiel), ein "Element" bezieht sich auf die Komponenten des Blocks (Bild, Titel, Vorschautext in den obigen preview-post- Objekten). Ein "Modifikator" kann verwendet werden, wenn sich der Zustand eines Blocks oder Elements ändert. Wenn Sie beispielsweise eine aktive Klasse zu einem Menüelement hinzufügen, um sie hervorzuheben, fungiert die aktive Klasse als Ihr Modifikator.

Sobald Sie die Komponenten identifiziert haben, benennen Sie sie entsprechend. Beispielsweise:

• Ein Menüblock enthält das Klassenmenü
• Seine Elemente haben das menu__item (Block und Element sind durch doppelten Unterstrich getrennt)
• Der Modifikator für den deaktivierten Status des Menüs kann die Klasse menu_disabled (Modifikator durch einen einzelnen Unterstrich begrenzt)
• Der Modifikator für den deaktivierten Status eines menu__item_disabled kann menu__item_disabled .

Für Modifikatoren können wir auch das Format key_value für die Benennung verwenden. Um beispielsweise menu__item_status_obsolete zu unterscheiden, die mit veralteten Artikeln verknüpft sind, können wir ihnen das Klassenmenü__item_status_obsolete menu__item_status_obsolete, und zum menu__item_status_obsolete, die auf ausstehende Dokumente verweisen, kann der menu__item_status_pending .

Die Benennung kann geändert werden, was für Sie funktioniert. Die Idee besteht darin, in der Lage zu sein , Blöcke, Elemente und Modifikatoren aus den Klassennamen zu identifizieren . Sehen Sie sich einige der auf der BEM-Site aufgeführten Benennungssysteme an.

Auf der BEM-Website wird außerdem aufgeführt, wie die Trennung von Blöcken, Elementen und Modifizierern auch in das CSS-Dateisystem eingefügt werden kann . Die Blöcke wie "buttons" und "inputs" können ihre eigenen Ordner haben, die die Dateien (.css, .js) enthalten, die mit diesen Blöcken verknüpft sind, was die Arbeit erleichtert, wenn wir diese Blöcke in andere Projekte importieren wollen.

Vorteile von BEM: Einfach zu verwendende Klassennamen und weniger tiefe CSS-Selektoren.

Nachteile von BEM: Um die Namen vernünftig zu halten, rät BEM, dass wir die Elementverschachtelung flach halten.

3. ACSS

Bekannt geworden durch Yahoo, irgendwo gegen Ende des ersten In der Dekade des 21. Jahrhunderts bestehen die Schlüsselkonzepte von ACSS darin, Klassen für die atomarste Ebene des Stils zu erstellen, dh für ein Eigenschaftswertpaar, und diese dann nach Bedarf in HTML zu verwenden.

Es ist schwer zu bestimmen, wann ACSS (Atomic CSS) zum ersten Mal entwickelt wurde, da das Konzept schon seit einiger Zeit verwendet wird. Entwickler verwenden seit langem Klassen wie .clearfix{overflow: hidden} . Die Idee in ACSS ist es , eine Klasse für so ziemlich jedes wiederverwendbare nicht-inhaltsbezogene Eigenschaft-Wert-Paar zu haben, das wir auf unserer Site benötigen, und diese Klassen bei Bedarf zu den HTML-Elementen hinzuzufügen.

Im Folgenden finden Sie ein Beispiel für auf ACSS basierende Klassen und deren Verwendung in HTML.

 .mr-8 {Rand rechts: 8px;} .fl-r {Gleitkomma: rechts;} 

Wie Sie sehen, wird die Anzahl der Klassen mit dieser Methode hoch und die HTML wird von all diesen Klassen überfüllt sein. Diese Methode ist nicht 100% effektiv, kann aber bei Bedarf nützlich gemacht werden. Yahoo benutzt das immerhin.

Vorteile von ACSS: HTML formatieren, ohne HTML zu verlassen.

Nachteile von ACSS: Zu viele Klassen, nicht sehr ordentlich und Sie könnten es hassen.

4. SMACSS

Entwickelt im Jahr 2011 von Jonathan Snook SMACSS (Scalable and Modular Architecture für CSS) arbeitet mit der Identifizierung der 5 verschiedenen Arten von Stilregeln. Basierend auf diesen werden Klassennamen und Ablagesysteme erstellt.

"SMACSS ist eine Möglichkeit, Ihren Designprozess zu untersuchen und diese starren Frameworks in einen flexiblen Denkprozess zu integrieren. - Jonathan Snook "

SMACSS identifiziert 5 Arten von Stilregeln, nämlich Basis, Layout, Modul, Zustand und Thema .

• Basisstile sind die Standardstile, die auf die grundlegenden HTML-Tags gerichtet sind

  , .

• Layoutstile sind Stile, die zum Definieren des Seitenlayouts verwendet werden, z. B. die Codierung, bei der die Kopf-, Fußzeilen- und Seitenmenüs verwendet werden.
• Modulstile sind spezifisch für ein Modul wie Galerie oder Diashow.
• Statusstile dienen zum Hervorheben von Elementen mit veränderbaren Zuständen wie "Versteckt" oder "Deaktiviert".
• Theme wird verwendet, um das visuelle Schema der Seite zu ändern.

Die verschiedenen Stilregeln können mit einem Präfix im Klassennamen identifiziert werden, zum Beispiel l-Header (für Layout) oder t-Header (für Design). Wir können diese verschiedenen Regeltypen auch organisieren, indem Sie sie in separaten Dateien und Ordnern ablegen.

Vorteile von SMACSS: Besserer organisierter Code.

Nachteile von SMACSS : Keine, die ich mir vorstellen kann.

Es gibt ein kostenloses Online-Buch, das Sie über SMACSS lesen können, oder Sie können seine eBook-Version kaufen, um mehr zu erfahren.

Fazit

Die obigen CSS-Methoden bieten Ihnen ein System zur Verwaltung und Optimierung Ihrer CSS-Codes . Sie können miteinander kombiniert werden, wie OOCSS-SMACSS oder OOCSS-BEM oder BEM-SAMCSS, um Ihre Anforderungen zu erfüllen.

Es gibt auch Frameworks und Bibliotheken, wenn Sie ein automatisiertes System für die Ausführung von CSS-Methoden wie:

• OOCSS-Rahmen
• BEM-Werkzeuge
• Organischer CSS-Rahmen (folgt dem atomaren Konzept).