Die Grundlagen objektorientierter CSS (OOCSS)

Die Frontend-Entwicklung geht schnell voran mit vielen neuen Techniken, die jedes Jahr hinzugefügt werden. Es kann ein Kampf für Entwickler sein, mit allem Schritt zu halten. Zwischen Sass und PostCSS ist es leicht, sich im Meer der Entwicklungswerkzeuge zu verlieren.

Eine neuere Technik ist Object-Oriented CSS, kurz OOCSS genannt. Dies ist kein Werkzeug, sondern eine CSS-Schreibmethodik, die darauf abzielt , CSS modular und objektbasiert zu machen .

In diesem Beitrag möchte ich Ihnen die grundlegenden Grundlagen von OOCSS vorstellen und erläutern, wie diese Ideen auf Web-Frontends angewendet werden können . Diese Technik ist vielleicht nicht für jeden Entwickler geeignet, aber es lohnt sich, neue Konzepte zu verstehen, um zu entscheiden, ob Ihr Workflow davon profitieren könnte.

Was macht CSS objektorientiert?

Objektorientierte Programmierung (OOP) ist ein Programmierparadigma, das sich darauf konzentriert , wiederverwendbare Objekte zu erstellen und Beziehungen zwischen ihnen herzustellen, im Gegensatz zur prozeduralen Programmierung, die den Code in Prozeduren (Routinen, Subroutinen oder Funktionen) organisiert.

OOP ist in den letzten Jahren sowohl in JavaScript- als auch in Backend-Sprachen weit verbreitet, aber die Organisation von CSS nach seinen Prinzipien ist immer noch ein neues Konzept.

Das "Objekt" in OOCSS bezieht sich auf ein HTML-Element oder irgendetwas, das damit verbunden ist (wie CSS-Klassen oder JavaScript-Methoden). Beispielsweise könnten Sie ein Sidebar-Widget-Objekt haben, das für verschiedene Zwecke repliziert werden könnte (Newsletter-Anmeldung, Anzeigenblöcke, aktuelle Posts usw.). CSS kann diese Objekte in Massen anvisieren, was die Skalierung zum Kinderspiel macht.

Bei der Zusammenfassung von OOCSS 'GitHub-Eintrag kann ein CSS-Objekt aus vier Dingen bestehen:

1. HTML-Knoten des DOM
2. CSS-Deklarationen über den Stil dieser Knoten
3. Komponenten wie Hintergrundbilder
4. JavaScript-Verhalten, Listener oder Methoden, die einem Objekt zugeordnet sind

Im Allgemeinen ist CSS objektorientiert, wenn es Klassen berücksichtigt , die wiederverwendbar und auf mehrere Seitenelemente ausgerichtet werden können .

Viele Entwickler würden sagen, OOCSS ist leichter mit anderen zu teilen und nach Monaten (oder Jahren) inaktiver Entwicklung einfacher zu erlernen. Dies ist vergleichbar mit anderen modularen Methoden wie SMACSS, die strengere Regeln für die Kategorisierung von Objekten in CSS haben.

Auf der OOCSS-FAQ-Seite finden Sie eine Reihe von Informationen, wenn Sie mehr erfahren möchten. Und die Erfinderin Nicole Sullivan spricht oft über OOCSS und wie es mit der modernen Webentwicklung zusammenhängt.

Separate Struktur von Stil

Ein großer Teil von OOCSS besteht darin, Code zu schreiben, der die Seitenstruktur (Breite, Höhe, Ränder, Füllung) vom Erscheinungsbild (Schriften, Farben, Animationen) trennt. Dadurch kann benutzerdefiniertes Enthäuten auf mehrere Seitenelemente angewendet werden, ohne die Struktur zu beeinträchtigen .

Dies ist auch hilfreich beim Entwerfen von Komponenten, die mit Leichtigkeit im Layout verschoben werden können. Beispielsweise sollte ein Widget "Letzte Posts" in der Seitenleiste in die Fußzeile oder über den Inhalt verschoben werden, während ähnliche Stile beibehalten werden.

Hier ist ein Beispiel für OOCSS für ein Widget "Letzte Posts", das in diesem Fall unser CSS-Objekt ist:

 / * Struktur * / .Side-Widget {Breite: 100%; Auffüllen: 10px 5px; } / * Skinning * / .recent-posts {Schriftfamilie: Helvetica, Arial, Sans-Serif; Farbe: # 2b2b2b; Schriftgröße: 1.45em; } 

Beachten Sie, dass das Layout mit der .side-widget Klasse verwaltet wird, die auch auf mehrere Sidebar-Elemente angewendet werden kann, während die Darstellung mit der Klasse .recent-posts verwaltet wird, die auch zum .recent-posts anderer Widgets verwendet werden kann. Wenn z. B. das Widget .recent-posts in die Fußzeile verschoben wurde, wird möglicherweise nicht dieselbe Positionierung verwendet, es könnte jedoch dasselbe Aussehen und Verhalten aufweisen.

Sehen Sie sich auch dieses Sidebar-Beispiel von CodePen an. Es verwendet eine eindeutige Trennung von Klassen für Gleitkommazahlen und Textausrichtung, so dass für die Replikation kein zusätzlicher CSS-Code erforderlich ist .

Trennen Sie den Container vom Inhalt

Die Trennung von Inhalt von seinem Containerelement ist ein weiteres wichtiges Prinzip von OOCSS.

Vereinfacht gesagt, bedeutet dies nur, dass Sie die Verwendung von Kinderselektoren vermeiden sollten, wann immer dies möglich ist. Wenn Sie eindeutige Seitenelemente wie Ankerverknüpfungen, Header, Blockquotes oder ungeordnete Listen anpassen, sollten Sie ihnen eindeutige Klassen und keine nachgeordneten Selektoren zuweisen.

Hier ist ein einfaches Beispiel:

 / * OOCSS * / .Seitenleiste {/ * Seitenleiste Inhalt * /} h2.Seitenleiste-Titel {/ * spezielle h2 Elementstile * /} / * Nicht-OOCSS * / .Seitenleiste {/ * gleicher Seitenleisteninhalt * /} .Seitenleiste h2 {/ * fügt mehr Spezifität hinzu als nötig * /} 

Obwohl es nicht schrecklich ist, das zweite Codeformat zu verwenden, wird dringend empfohlen, dem ersten Format zu folgen, wenn Sie sauberes OOCSS schreiben wollen.

Entwicklungsrichtlinien

Es ist schwierig, genaue Spezifikationen zu formulieren, da Entwickler ständig über den Zweck von OOCSS diskutieren. Aber hier sind einige Vorschläge, die Ihnen helfen können, saubereren OOCSS-Code zu schreiben :

• Arbeiten Sie mit Klassen anstelle von IDs für das Styling.
• Versuchen Sie, auf Multi-Level-Nachkommen Klassenspezifität zu verzichten, wenn sie nicht benötigt werden.
• Definieren Sie eindeutige Stile mit wiederholbaren Klassen (z. B. Floats, Clearfix, eindeutige Font-Stacks).
• Erweitern Sie Elemente mit gezielten Klassen und nicht mit übergeordneten Klassen.
• Organisieren Sie Ihr Stylesheet in Abschnitte, denken Sie darüber nach, ein Inhaltsverzeichnis hinzuzufügen.

Beachten Sie, dass Entwickler weiterhin IDs für das JavaScript-Targeting verwenden sollten, sie sind jedoch nicht für CSS erforderlich, da sie zu spezifisch sind . Wenn ein Objekt eine ID für den CSS-Stil verwendet, kann es niemals repliziert werden, da IDs eindeutige Bezeichner sind. Wenn Sie nur Klassen für das Styling verwenden, wird die Vererbung wesentlich einfacher prognostiziert .

Darüber hinaus können Klassen für zusätzliche Funktionen miteinander verkettet werden. An ein einzelnes Element können 10+ Klassen angehängt sein. Obwohl mehr als 10 Klassen für ein Element nicht von mir persönlich empfohlen werden, können Entwickler eine Bibliothek wiederverwendbarer Stile für unbegrenzte Seitenelemente erstellen.

Klassennamen in OOCSS sind etwas umstritten und nicht in Stein gemeißelt. Viele Entwickler ziehen es vor, Klassen kurz und auf den Punkt zu halten.

Camel Case ist auch beliebt, zum Beispiel .errorBox anstelle von .error-box . Wenn Sie die Klassenbenennung in OOCSS 'Dokumentation betrachten, werden Sie feststellen, dass camel case die "offizielle" Empfehlung ist. Es ist nichts falsch mit Bindestrichen, aber in der Regel ist es am besten, den OOCSS-Richtlinien zu folgen.

OOCSS + Sass

Die meisten Webentwickler lieben Sass und haben die Frontend-Community schnell überholt. Wenn du Sass noch nicht ausprobiert hast, lohnt es sich, es zu versuchen. Sie können Code mit Variablen, Funktionen, Verschachtelungs- und Kompilierungsmethoden wie mathematischen Funktionen schreiben.

In kompetenten Händen könnten Sass und OOCSS im Himmel ein Match werden. Sie finden eine exzellente Zusammenfassung darüber auf dem Blog The Sass Way.

Mit der Anweisung Sass @extend können Sie beispielsweise die Eigenschaften einer Klasse auf eine andere Klasse anwenden. Die Eigenschaften werden nicht dupliziert, stattdessen werden die beiden Klassen mit einem Komma-Selektor kombiniert. Auf diese Weise können Sie CSS-Eigenschaften an einem Ort aktualisieren.

Wenn Sie ständig Stylesheets schreiben, spart das stundenlanges Tippen und hilft, den OOCSS-Prozess zu automatisieren .

Denken Sie auch daran, dass die Codepflege ein wichtiger Bestandteil von OOCSS ist . Durch die Verwendung von Sass wird Ihr Job einfacher, wenn Variablen, Mixins und erweiterte Lining-Tools in den Workflow eingebunden werden.

Ein Schlüsselattribut des großen OOCSS-Codes ist die Fähigkeit, sie mit jedem zu teilen, sogar sich selbst zu einem späteren Zeitpunkt, und in der Lage zu sein, es mit Leichtigkeit aufzunehmen.

Leistungsaspekte

OOCSS soll reibungslos und ohne große Verwirrung funktionieren. Die Entwickler versuchen ihr Bestes, sich nicht bei jeder Gelegenheit zu wiederholen, das ist die Voraussetzung für die Entwicklung von DRY. Im Laufe der Zeit kann die OOCSS-Technik zu Hunderten von CSS-Klassen mit einzelnen Eigenschaften führen, die in einem gegebenen Dokument Dutzende Male angewendet werden.

Da OOCSS immer noch ein neues Thema ist, ist es schwierig, über das Thema Bloat zu diskutieren. Viele CSS-Dateien sind aufgebläht mit wenig Struktur, während OOCSS starre Struktur und (idealerweise) weniger Aufblähung bietet. Die größte Leistungsbeeinträchtigung liegt im HTML, wo einige Elemente eine Handvoll verschiedener Klassen für die Layoutstruktur und das Design sammeln können.

Auf Seiten wie Stack Overflow und CSS-Tricks finden Sie interessante Diskussionen zu diesem Thema.

Ich empfehle, ein Beispielprojekt zu erstellen und zu sehen, wie es läuft. Wenn Sie sich in OOCSS verlieben, kann dies die Codierung von Websites grundlegend verändern. Alternativ, wenn Sie es hassen, lernen Sie immer noch eine neue Technik und denken kritisch darüber nach, wie es funktioniert. Es ist Win-Win, egal was passiert.

Beschäftigt Schreiben OOCSS

Der beste Weg, etwas in der Webentwicklung zu lernen, ist zu üben. Wenn Sie bereits die Grundlagen von CSS verstehen, sind Sie auf dem besten Weg!

Da OOCSS keine Vorverarbeitung erfordert, können Sie es mit einer Online-IDE wie CodePen versuchen. Einfache Projekte sind der beste Einstieg und verbessern Ihr Wissen von dort.

Werfen Sie einen Blick auf diese Ressourcen, um Ihre Forschung auf dem sich entwickelnden Gebiet der OOCSS voranzutreiben.

• OOCSS Offizielle Website
• Objektorientiertes CSS: Was, wie und warum
• OOCSS + Sass = Der beste Weg zu CSS
• Eine Einführung in objektorientiertes CSS