Ein Webdesigner-Handbuch zu CSS-Methoden

Seite 1 von 2: Ein Leitfaden zu CSS-Methoden SPRINGEN ZU:


Eine CSS-Methodik besteht aus einer Reihe von Richtlinien zum Schreiben von modularem, wiederverwendbarem und skalierbarem Code. Obwohl CSS eine einfach zu schreibende Sprache ist, ohne eine vereinbarte Konvention, wird der Code fast so schnell chaotisch wie er geschrieben wird. Da jede CSS-Deklaration in einer eigenen Zeile definiert wird, werden Dateien schnell riesig, was sie zu einem Albtraum macht.

CSS-Methoden: Quick Links

Objektorientiertes CSS (OOCSS)
Atomic CSS (ACSS)
Blockelement-Modifikator (BEM)
Skalierbare und modulare Architektur für CSS (SMACSS)

Um dieses und andere Probleme bei der CSS-Implementierung zu lösen (weitere Erläuterungen finden Sie unter Warum brauchen wir CSS-Methoden? ) haben Gruppen von Programmierern auf der ganzen Welt unterschiedliche CSS-Methoden oder Standardpraktiken entwickelt. Jedes hat seinen eigenen Fokus, Vor- und Nachteile.



Es handelt sich nicht um Frameworks oder Bibliotheken, sondern um Regeln zum Schreiben von CSS-Code, die Entwickler dazu ermutigen, sich an Konventionen zu halten, die das Schreiben und Verwalten von Code vereinfachen und Stunden Entwicklungszeit sparen. Diese Methoden schließen sich nicht gegenseitig aus und können auf eine Weise zusammen verwendet werden, die für Entwickler am besten geeignet ist.

In diesem Artikel werden wir uns mit den Vor- und Nachteilen einiger der beliebtesten CSS-Methoden befassen: objektorientiertes CSS, Atomic CSS (bezogen auf atomares Design ), BEM und SMACSS. Verwenden Sie das nebenstehende Boxout, um zu einer bestimmten Methode zu springen. Alternativ hüpfen Sie zu Seite 2 um zu sehen, wie sie in einer benutzerdefinierten Methodik miteinander kombiniert werden können.

OOCSS

Objektorientiertes CSS

  • In einer Nussschale: Teilen Sie das Layout in Objekte und abstrahieren Sie deren CSS in Module

Bei OOCSS werden Objekte auf einer Seite identifiziert und ihre strukturellen und visuellen CSS-Stile in zwei Deklarationsblöcke unterteilt. Diese Blöcke können dann von verschiedenen Elementen wiederverwendet werden, und Änderungen müssen nur an einer Stelle vorgenommen werden, was zu einer besseren Konsistenz führt.

Deklarationsblöcke werden mithilfe von Einzelklassen-Selektoren auf Elemente angewendet, um Spezifitätsprobleme zu vermeiden. Diese Technik trennt auch den Inhalt vom Container, sodass Objekte überall gleich aussehen. Klassen entkoppeln auch Markups von CSS. Verwenden von .Titel statt h2 für Überschrift

ermöglicht es, geändert zu werden

ohne das CSS zu ändern.

Um HTML und CSS weiter zu trennen, sollten Klassennamen keine Eigenschaftswerte enthalten. Eine Klasse 'blau' würde eine Umbenennung in HTML und CSS erfordern, wenn sich die Farbe ändert.

Mit OOCSS können CSS und Markup einer Schaltfläche wie folgt definiert werden:

.button { padding: 10px 16px; } .primary-skin { color: blue; } .secondary-skin { color: green; } primary skin button secondary skin button primary skin div

OOCSS führt viele nützliche Konzepte ein, aber das Fehlen von Regeln führt zu unterschiedlichen Interpretationen, die zu Inkonsistenzen führen können. Es wurde jedoch als Inspiration für strengere Methoden verwendet.

ACSS

Atomic CSS

  • In einer Nussschale: Erstellen Sie für jede sich wiederholende CSS-Deklaration eine Klassenauswahl

ACSS ermutigt Entwickler, für jede wiederverwendbare Deklaration Einzweck-Klassenselektoren zu definieren. Im Gegensatz zu OOCSS, das CSS-Eigenschaftswerte in Klassennamen abschreckt, begrüßt ACSS dies. Die Verwendung von ACSS-Stilen kann wie folgt definiert und auf Elemente angewendet werden:

.mb-sm { margin-bottom: 16px; } .mb-lg { margin-bottom: 32px; } .color-blue { color: #1e90ff; }

Blue text

Es gibt programmatische Ansätze für ACSS, die automatisch CSS basierend auf Klassen oder Attributen generieren, die Benutzer dem HTML hinzufügen. Zerstäuber ist ein solches Tool, mit dem der vorherige HTML-Code wie folgt neu definiert werden kann:

Blue text

Dies würde beim Erstellen automatisch das folgende CSS generieren:

.Mb(16px) { margin-bottom: 16px; } .Mb(32px) { margin-bottom: 32px; } .C(#1e90ff) { color: #1e90ff; }

Der Hauptvorteil von ACSS besteht darin, dass konsistenter Code einfach beibehalten werden kann und keine Klassen für Komponenten erfunden werden müssen, für die eine einzige CSS-Regel erforderlich ist.

ACSS, das alleine verwendet wird, kann jedoch zu einer unüberschaubaren Anzahl von Klassen und aufgeblähten HTML-Dateien führen. Es ist daher üblich, nur ACSS-Prinzipien zu verwenden, um Hilfsklassen zu erstellen, die konsistente, wiederverwendbare Deklarationsblöcke definieren.

GUT

Blockelement-Modifikator

  • In einer Nussschale: Verwenden Sie eine Standardbenennungskonvention für Klassen

BEM ermutigt Entwickler, Layouts in Blöcke und verschachtelte Elemente zu unterteilen. Abweichungen vom durchschnittlichen Erscheinungsbild eines Blocks oder Elements sollten ebenfalls mithilfe von Modifikatoren identifiziert und angewendet werden.

CSS-Deklarationen werden unter Verwendung eines einzelnen Klassennamens des Formats angewendet Blockname für Blöcke und Blockname__Elementname für Elemente mit zwei Unterstrichen dazwischen. Modifikatornamen werden an Klassen angehängt, denen beispielsweise zur besseren Übersicht ein Unterstrich oder zwei Bindestriche vorangestellt sind blockname__elementname_modifername oder Blockname__Elementname - Modifikatorname . Ein Objekt ist ein Block, wenn es ohne Vorfahren existieren kann, andernfalls ist es ein Element.

Blöcke können verschachtelte Blöcke und Elemente haben, Elemente jedoch nicht. Modifikatoren müssen neben Block- und Elementklassen verwendet werden, nicht stattdessen.

BEM kann auf eine Liste angewendet werden, wobei Listenblock - Inline und list-block__item - aktiv Listen werden horizontal angezeigt und Elemente hervorgehoben:

  • Item 1
  • Item 2
  • Item 1
  • Item 2

BEM ist eine hochwirksame Namenskonvention, die vorhersehbares Verhalten von CSS erstellt, das einfach zu verwalten, zu warten und zu skalieren ist. BEM hat jedoch Nachteile, einschließlich der Schwierigkeit, Klassennamen für tief verschachtelte Objekte zu erfinden, der lächerlich langen Klassennamen und des aufgeblähten HTML-Codes, die manchmal auftreten können, sowie der mangelnden Konsistenz, die durch die Unfähigkeit verursacht wird, CSS zwischen Objekten zu teilen.

SMACSS

Skalierbare und modulare Architektur für CSS

  • In einer Nussschale: Teilen Sie CSS-Code für eine bessere Leistung und Organisation auf mehrere Dateien auf

SMACSS unterteilt CSS in fünf Kategorien - Basis, Layout, Modul, Status und Thema -, die üblicherweise in separate Dateien aufgeteilt werden. Basisstile überschreiben die Standardstile und werden hauptsächlich mithilfe von Elementselektoren angewendet:

h1 { font-size: 20px; } a { text-decoration: none; }

Layoutstile gelten für Hauptobjekte wie Überschriften und Seitenleisten. Sie werden mithilfe von IDs oder Klassen mit generischen Hilfsdeklarationen angewendet, denen optional ein Präfix vorangestellt ist l- ::

#header { height: 50px; } .l-right { float: right; }

Modulstile sind für kleinere, wiederverwendbare Objekte wie Schaltflächen und Listen vorgesehen, die üblicherweise eine eigene Datei haben. Sie werden mithilfe von Klassen angewendet, wobei verschachtelten Elementklassen häufig die Vorgängerklasse vorangestellt wird:

.list { … } .list--icon { … } .list--text { … }

Statusstile gelten für veränderbare Status, z. B. ausgeblendet oder deaktiviert. Sie werden üblicherweise mit vorangestellten Klassennamen angewendet is- oder hat- und an andere Selektoren gekettet:

.button { … } .button.is-disabled { … }

Themenstile werden optional zum Ändern des visuellen Schemas verwendet. SMACSS bietet gut organisierten CSS-Code, der logisch auf mehrere Dateien aufgeteilt ist. Durch die Verwendung von SMACSS werden jedoch Spezifitätsfallen eingeführt, indem IDs zugelassen werden und die Statusverkettung für einige Statusdeklarationen und einige Layoutdeklarationen verwendet werden.

Nächste Seite: Erfahren Sie, wie Sie verschiedene Methoden kombinieren, um Ihre eigenen zu erstellen

  • 1
  • zwei

Aktuelle Seite: Ein Leitfaden zu CSS-Methoden

Nächste Seite CSS-Methoden kombinieren