Grundlegendes zu CSS-Schreibmethoden

In diesem Beitrag werden wir sehen Was sind CSS-Schreibmethoden?, 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. Stellen Sie sich eine Methode einfach als eine Möglichkeit vor, etwas systematisch zu tun, auf eine bestimmte Art und Weise, die Dinge zu tun, um das gewünschte Ergebnis zu erzielen.

Um bessere Ergebnisse zu erzielen, Wir verbessern unsere Methoden, indem wir sie besser planen, Reihenfolge ändern, Schritte vereinfachen - was auch immer funktioniert schneller und ist mehr effizient.

CSS-Methodik

Kommen wir nun zur CSS-Methodik. Genau wie bei fast allem im Leben haben wir auch eine Methode, um CSS zu schreiben: Einige schreiben zuerst CSS zurücksetzen, einige Layoutstile für Orte, einige beginnen mit zwei bis drei Klassen, um ein Element zu gestalten, einige schreiben alle CSS-Codes eine einzelne Datei.

Unsere bevorzugten Methoden wurden entweder im Laufe der Zeit von uns selbst etabliert oder von anderen beeinflusst oder sind an unserem Arbeitsplatz oder aufgrund dessen erforderlich. Im Laufe der Zeit haben sich jedoch CSS-Veteranen formuliert Methoden zum Schreiben von CSS das sind mehr flexibel, definiert, wiederverwendbar, verständlich und überschaubar.

Wir werden uns diese formulierten Methoden anschauen, die Folgendes beinhalten werden:

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

HinweisKeines der unten genannten Konzepte sollte mit einem Framework, einer Bibliothek oder einem Tool verwechselt werden, das möglicherweise denselben Namen und Konzept wie diese Methodologien hat. In diesem Beitrag geht es nur um die Methoden zum Schreiben von CSS.

1. OOCSS

Das 2008 von Nicole Sullivan entwickelte Kernkonzept von OOCSS (Object Oriented CSS) umfasst CSS Objekt Identifizierung, Trennung von Struktur und visuellen Stilen und Vermeiden von standortbasierten Stilen.

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

“Grundsätzlich ist ein CSS-Objekt ein sich wiederholendes visuelles Muster, das in ein unabhängiges Snippet aus 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 Site. Hier ist etwas, das ein sich wiederholendes visuelles Muster ist und über ein eigenes, unabhängiges HTML und / oder CSS verfügt:

Wir haben hier zwei Arten von Objekten, eine größere Vorschau der Titel, die wir nennen werden Post-Preview-Primär und eine Seitenleiste mit Titeln, die wir nennen werden Post-Preview-Sekundär.

Wir müssen Struktur und Haut getrennt (dh Stile, die das Erscheinungsbild der Objekte erzeugen). Die beiden Objekttypen haben unterschiedliche Strukturen. Eines befindet sich in einem größeren Feld, obwohl es ähnlich aussieht, mit Bildern links und Titeln rechts.

Geben Sie den Bildern beider Objekte eine Klasse Bild nach der Vorschau und fügen Sie den Code hinzu, der das Bild links platziert. Dies verhindert, dass wir den Code wiederholen müssen, an dem das Bild in CSS eingefügt werden soll. Wenn es andere ähnliche Objekte gibt, verwenden wir sie erneut Bild nach der Vorschau für Sie.

Hauttrennung kann auch für einfachere Stile durchgeführt werden Grenzen oder Hintergründe. Wenn Sie mehrere Objekte mit demselben blauen Rand haben, Erstellen einer separaten Klasse für den blauen Rand und es zu Objekten hinzufügen wird Reduzieren Sie die Anzahl, wie oft die blauen Ränder codiert werden müssen in CSS.

Nicole schlägt auch vor nicht Fügen Sie Stile nach Standort hinzu, Anstatt beispielsweise alle Links innerhalb eines bestimmten div hervorzuheben, geben Sie diesen Links ein Textmarker Klasse mit den entsprechenden CSS-Styles. Auf diese Weise können Sie die Highlighter-Klasse wiederverwenden, wenn Sie einen Link in einem anderen Teil der Seite markieren möchten.

Vorteile von OOCSS: Wiederverwendbare visuelle Styling-Codes, flexible Ortscodes, Reduzierung von tief verschachtelten Selektoren.

Cons von OOCSS: Ohne einiges an sich wiederholenden visuellen Mustern scheint das Trennen von Strukturcodes und visuellen Stilcodes unnötig zu sein.

2. BEM

Die Schlüsselkonzepte für BEM (Block, Element, Modifier) ​​wurden 2009 von Entwicklern bei Yandex entwickelt und umfassen Identifizieren Block, Element & Modifikator und benennen sie entsprechend.

EIN “Block” ist im Wesentlichen das gleiche wie ein “Objekt”(aus dem obigen Beispiel) “Element” bezieht sich auf die Komponenten des Blocks (Bild, Titel, Vorschautext oben) Vorschau-Post- Objekte). EIN “Modifikator” kann verwendet werden, wenn sich der Status eines Blocks oder Elements ändert, wenn Sie zum Beispiel eine aktive Klasse zu einem Menüelement hinzufügen, um sie hervorzuheben, fungiert die aktive Klasse als Modifizierer.

Wenn Sie die Komponenten identifiziert haben, benennen Sie sie entsprechend. Zum Beispiel:

• Ein Menüblock wird die Klasse haben Speisekarte
• Ihre Gegenstände werden die Klasse haben menu__item (Block und Element werden durch doppelte Unterstriche getrennt)
• Der Modifikator für den deaktivierten Status des Menüs kann die Klasse haben menu_disabled (Modifikator durch einen einzelnen Unterstrich getrennt)
• Modifikator für den deaktivierten Zustand eines Menüelements kann sein menu__item_disabled.

Für Modifikatoren können wir auch verwenden Schlüsselwert Format für die Benennung. Um beispielsweise Menüelemente zu identifizieren, die mit veralteten Artikeln verknüpft sind, können wir ihnen die Klasse zuweisen menu__item_status_obsolete, und zum Gestalten von Menüelementen, die auf ausstehende Dokumente zeigen, kann der Klassenname sein menu__item_status_pending.

Die Benennung kann geändert werden, was für Sie funktioniert. Die Idee ist, in der Lage zu sein Identifizieren Sie Blöcke, Elemente und Modifizierer aus den Klassennamen. Schauen Sie sich einige der auf der BEM-Site aufgeführten Namenssysteme an.

Die Website von BEM listet ebenfalls auf wie die Trennung von Block, Element und Modifizierer auch in das CSS-Dateisystem übernommen werden kann. Die Blöcke mögen “Tasten” und “Eingänge” kann eigene Ordner haben, die aus den Dateien (.css, .js) bestehen, die diesen Blöcken zugeordnet sind. Dies macht es einfacher, wenn wir diese Blöcke in andere Projekte importieren möchten.

Vorteile von BEM:Einfach zu verwendende Klassennamen und Reduzierung der tiefen CSS-Selektoren.

Nachteile von BEM:Um die Namen vernünftig zu halten, empfiehlt BEM, dass wir die Verschachtelung von Elementen mit flachen Elementen beibehalten.

3. ACSS

Bekannt geworden durch Yahoo, irgendwo gegen Ende des ersten Jahrzehnt der 21^st Die Schlüsselkonzepte von ACSS bestehen seit jeher darin, Klassen für die unterschiedlichste Stilebene, d. h. ein Eigenschaft-Wert-Paar, zu erstellen und sie bei Bedarf in HTML zu verwenden.

Es ist schwer zu bestimmen, wann ACSS (Atomic CSS) zum ersten Mal entwickelt wurde, seitdem das Konzept schon länger in Gebrauch ist. Entwickler haben Klassen wie verwendet .clearfix overflow: hidden Für eine lange Zeit. Die Idee in ACSS ist zu haben eine Klasse für so ziemlich jedes wiederverwendbare, nicht inhaltliche Eigenschaft-Wert-Paar Wir werden es auf unserer Website brauchen und diese Klassen den HTML-Elementen bei Bedarf hinzufügen.

Nachfolgend finden Sie ein Beispiel für Klassen, die auf ACSS basieren und wie sie in HTML verwendet werden.

 .mr-8 margin-right: 8px; .fl-r float: right; 
 

Wie Sie sehen, wird die Anzahl der Klassen mit dieser Methode hoch und der HTML-Code wird von all diesen Klassen überfüllt. Diese Methode ist nicht zu 100% effektiv, kann aber auf Wunsch nützlich sein. Yahoo benutzt das doch.

Vorteile von ACSS:HTML-Formatierung ohne HTML verlassen.

Nachteile von ACSS:Zu viele Kurse, nicht sehr ordentlich und du könntest es hassen.

4. SMACSS

SMACSS (Scalable and Modular Architecture für CSS) wurde 2011 von Jonathan Snook entwickelt, um die 5 verschiedenen Stilregeln zu identifizieren. Darauf basierend werden Klassennamen und Ablagesystem erstellt.

“SMACSS ist eine Möglichkeit, Ihren Entwurfsprozess zu untersuchen und diese starren Rahmen in einen flexiblen Denkprozess zu integrieren. - Jonathan Snook”

SMACSS identifiziert nämlich fünf Arten von Stilregeln 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 Layouts der Seite verwendet werden, z. B. die Kodierung für die Kopf-, Fuß- und Seitenmenüs.
• Modulstile sind spezifisch für ein Modul wie eine Galerie oder eine Diashow.
• Zustandsstile dienen zum Hervorheben von Elementen mit veränderbaren Zuständen wie ausgeblendet oder deaktiviert.
• Das Thema wird zum Ändern des visuellen Schemas der Seite verwendet.

Die verschiedenen Stilregeln können mit einem Präfix im Klassennamen identifiziert werden, z. B. l-Header (für Layout) oder T-Header (für Design). Wir können diese verschiedenen Arten von Regeln auch organisieren, indem wir sie in separaten Dateien und Ordnern ablegen.

Vorteile von SMACSS:Besser organisierter Code.

Nachteile von SMACSS: Ich kann mir keine vorstellen.

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

Fazit

Die oben genannten CSS-Methoden geben Ihnen ein System an Verwalten und optimieren Sie Ihre CSS-Codes. Sie können wie OOCSS-SMACSS oder OOCSS-BEM oder BEM-SAMCSS je nach Bedarf kombiniert werden.

Es gibt auch Frameworks und Bibliotheken, wenn Sie ein automatisiertes System für die Ausführung von CSS-Methoden wünschen, z.

• OOCSS-Framework
• BEM-Werkzeuge
• Organisches CSS-Framework (folgt atomarem Konzept).