Grundlagen von objektorientiertem CSS (OOCSS)

Die Entwicklung des Frontends ist schnell und viele neue Techniken werden jedes Jahr hinzugefügt. Für Entwickler kann es schwierig sein, mit allem Schritt zu halten. Zwischen Sass und PostCSS kann man sich leicht im Meer der Entwicklungswerkzeuge verlieren.

Eine neuere Technik ist das objektorientierte CSS, kurz OOCSS genannt. Dies ist kein Werkzeug, sondern eine CSS-Schreibmethode, die darauf abzielt CSS modular und objektbasiert machen.

In diesem Beitrag möchte ich das vorstellen Kernfundamente von OOCSS, und wie diese Ideen auf die Frontend-Webarbeit angewendet werden können. Diese Technik mag nicht bei jedem Entwickler ankommen, aber es lohnt sich, neue Konzepte zu verstehen, um zu entscheiden, ob Ihr Workflow davon profitieren kann.

Was macht CSS objektorientiert??

Objektorientierte Programmierung (OOP) ist ein Programmierparadigma, auf das der Fokus liegt wiederverwendbare Objekte erstellen und Beziehungen aufbauen zwischen ihnen, im Gegensatz zur prozeduralen Programmierung, die den Code in Prozeduren (Routinen, Subroutinen oder Funktionen) einordnet.

OOP ist in beiden Ländern weit verbreitet JavaScript und Backend-Sprachen In den letzten Jahren war es jedoch immer noch ein neues Konzept, CSS nach seinen Prinzipien zu organisieren.

Das “Objekt” in OOCSS bezieht sich auf eine HTML-Element oder alles, was damit verbunden ist (wie CSS-Klassen oder JavaScript-Methoden). Möglicherweise verfügen Sie über ein Widget für die Seitenleiste, das für verschiedene Zwecke (Newsletter-Anmeldung, Anzeigenblöcke, aktuelle Beiträge usw.) repliziert werden kann. CSS kann Ziele diese Objekte in Massen Das macht die Skalierung zu einem Kinderspiel.

Wenn Sie den GitHub-Eintrag von OOCSS zusammenfassen, kann ein CSS-Objekt aus vier Elementen bestehen:

1. HTML-Knoten des DOM
2. CSS-Deklarationen zum Stil dieser Knoten
3. Komponenten wie Hintergrundbilder
4. JavaScript-Verhalten, Listener oder mit einem Objekt verknüpfte Methoden

Im Allgemeinen ist CSS objektorientiert, wenn es in Betracht zieht wiederverwendbare Klassen und anzielbar auf mehrere Seitenelemente.

Viele Entwickler würden sagen, dass OOCSS nach Monaten (oder Jahren) inaktiver Entwicklung einfacher mit anderen geteilt werden kann und leichter abrufbar ist. Dies ist vergleichbar mit anderen modularen Methoden wie SMACSS, die strengere Regeln für die Kategorisierung von Objekten in CSS enthalten.

Die OOCSS-FAQ-Seite enthält eine Reihe von Informationen, wenn Sie mehr darüber erfahren möchten. Und die Schöpferin Nicole Sullivan spricht oft über OOCSS und wie es mit der modernen Webentwicklung zusammenhängt.

Struktur von Stil trennen

Ein großer Teil von OOCSS ist das Schreiben von Code, der die Seitenstruktur (Breite, Höhe, Ränder, Auffüllung) vom Erscheinungsbild (Schriftarten, Farben, Animationen) trennt. Dies erlaubt benutzerdefinierte Hautbildung auf mehrere Seitenelemente angewendet werden ohne die Struktur zu beeinflussen.

Dies ist auch nützlich für das Entwerfen von Komponenten im Layout verschoben mit Leichtigkeit. Zum Beispiel a “kürzliche Posts” Das Widget in der Seitenleiste sollte unter Beibehaltung ähnlicher Stile in die Fußzeile oder über den Inhalt verschoben werden.

Hier ist ein Beispiel für OOCSS für a “kürzliche Posts” Widget, das in diesem Fall unser CSS-Objekt ist:

 / * Struktur * / .side-widget width: 100%; Polsterung: 10px 5px;  / * Skinning * / .recent-posts Schriftfamilie: Helvetica, Arial, serifenlos; Farbe: # 2b2b2b; Schriftgröße: 1.45em;  

Beachte das Layout wird mit dem verwaltet .Seiten-Widget Klasse, die auch auf mehrere Seitenleistenelemente angewendet werden kann Aussehen wird mit dem verwaltet .kürzliche Posts Klasse, die auch zum Skin anderer Widgets verwendet werden kann. Zum Beispiel, wenn die .kürzliche Posts Das Widget wurde in die Fußzeile verschoben, es könnte nicht dieselbe Position einnehmen, es könnte jedoch dasselbe Aussehen und Verhalten haben.

Schauen Sie sich auch dieses Beispiel in der Seitenleiste von CodePen an. Es verwendet eine eindeutige Trennung der Klassen für Floats und Textausrichtung Für die Replikation wird kein zusätzlicher CSS-Code benötigt.

Container vom Inhalt trennen

Inhalt von seinem Containerelement trennen ist ein weiteres wichtiges Prinzip von OOCSS.

Vereinfacht ausgedrückt bedeutet dies nur, dass Sie möglichst keine untergeordneten Selektoren verwenden sollten. Wenn Sie eindeutige Seitenelemente wie Ankerlinks, Header, Blockquotes oder ungeordnete Listen anpassen, sollten Sie ihnen eindeutige Klassen und keine Nachkommenselektoren zuweisen.

Hier ist ein einfaches Beispiel:

 / * OOCSS * / .sidebar / * Seitenleisteninhalt * / h2.sidebar-title / * Spezielle H2-Elementstile * / / * Nicht-OOCSS * / .sidebar / * dieselben Seitenleisteninhalte * / .sidebar h2 / * fügt mehr Genauigkeit hinzu als erforderlich * / 

Die Verwendung des zweiten Code-Formats ist zwar nicht schrecklich, es wird jedoch dringend empfohlen, das erste Format zu verwenden, wenn Sie ein sauberes OOCSS schreiben möchten.

Entwicklungsrichtlinien

Es ist schwierig, genaue Spezifikationen festzulegen, da die Entwickler ständig über den Zweck von OOCSS diskutieren. Aber hier sind Einige Vorschläge, die Ihnen beim Schreiben von sauberem OOCSS-Code helfen können:

• Arbeiten mit Klassen statt IDs zum Styling.
• Versuchen zu sich von der mehrstufigen Klasse der abgeleiteten Klassen abhalten wenn nicht benötigt.
• Definieren Einzigartige Stile mit wiederholbaren Klassen (zB Floats, Clearfix, eindeutige Fontstacks).
• Elemente erweitern mit gezielten Klassen anstatt übergeordnete Klassen.
• Organisieren Sie Ihr Stylesheet in Abschnitte, Erwägen Sie das Hinzufügen eines Inhaltsverzeichnisses.

Beachten Sie, dass Entwickler weiterhin IDs für JavaScript-Targeting verwenden sollten, diese werden jedoch aus CSS-Gründen nicht benötigt Sie sind zu spezifisch. Wenn ein Objekt eine ID für das CSS-Styling verwendet, kann es niemals repliziert werden, da IDs eindeutige Bezeichner sind. Wenn Sie nur Klassen für das Styling verwenden, dann Vererbung wird viel einfacher vorherzusagen.

Darüber hinaus können Klassen für zusätzliche Funktionen miteinander verkettet werden. Ein einzelnes Element kann über 10 Klassen verfügen. Obwohl über 10 Klassen auf einem Element nicht persönlich von mir empfohlen werden, können Entwickler eine Bibliothek mit wiederverwendbaren Stilen für unbegrenzte Seitenelemente zusammenstellen.

Klassennamen innerhalb von OOCSS sind etwas umstritten und nicht in Stein gemeißelt. Viele Entwickler ziehen es vor, den Unterricht kurz und knapp zu halten.

Beliebt ist beispielsweise auch die Kamelhülle .errorBox anstatt .Fehlerfeld. Wenn Sie sich die Benennung von Klassen in der Dokumentation von OOCSS ansehen, werden Sie feststellen, dass dies der Fall ist “offiziell” Empfehlung. Mit Bindestrichen ist nichts verkehrt, aber in der Regel sollten die OOCSS-Richtlinien befolgt werden.

OOCSS + Sass

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

In kompetenten Händen könnten Sass und OOCSS ein im Himmel gemachtes Spiel sein. Eine ausführliche Beschreibung dazu finden Sie im The Sass Way Blog.

Zum Beispiel mit dem Sass @erweitern Direktive können Sie die Eigenschaften einer Klasse auf eine andere Klasse anwenden. Die Eigenschaften werden nicht dupliziert, sondern die beiden Klassen werden mit einem Komma-Selektor kombiniert. Auf diese Weise können Sie die CSS-Eigenschaften an einem Ort aktualisieren.

Wenn Sie ständig Stylesheets schreiben, würde dies sparen Stunden des Schreibens und Hilfe Automatisieren Sie den OOCSS-Prozess.

Erinnere dich auch daran Die Codewartung ist ein großer Teil von OOCSS. Mit Sass wird die Arbeit mit Variablen, Mixins und erweiterten Linting-Tools, die in den Workflow eingebunden sind, einfacher.

Ein Schlüsselattribut von großem OOCSS-Code ist der Fähigkeit, es mit jedermann zu teilen, selbst zu einem späteren Zeitpunkt, und können es leicht abholen.

Überlegungen zur Leistung

OOCSS soll reibungslos und ohne viel Verwirrung funktionieren. Entwickler versuchen ihr Bestes nicht sich immer wieder zu wiederholen, das ist die Prämisse der Entwicklung von DRY. Im Laufe der Zeit kann die OOCSS-Technik zu Hunderten von CSS-Klassen mit einzelnen Eigenschaften führen, die in einem bestimmten Dokument Dutzende Male angewendet werden.

Da es sich bei OOCSS noch um ein neues Thema handelt, ist es schwierig, über das Thema Aufblasen zu streiten. Viele CSS-Dateien werden mit wenig Struktur aufgebläht, wohingegen OOCSS eine starre Struktur und (im Idealfall) weniger Aufblasen bietet. Das größte Leistungsproblem besteht im HTML-Bereich, in dem einige Elemente eine Handvoll verschiedener Klassen für die Layoutstruktur und das Layout ansammeln können.

Interessante Diskussionen zu diesem Thema finden Sie auf Sites wie Stack Overflow und CSS-Tricks.

Meine Empfehlung ist, zu versuchen, ein Beispielprojekt zu erstellen und zu sehen, wie es läuft. Wenn Sie sich in OOCSS verlieben, ändert sich möglicherweise die Art und Weise, wie Sie Websites codieren. Wenn Sie es dagegen hassen, lernen Sie immer noch eine neue Technik und denken kritisch darüber nach, wie sie funktioniert. Es ist Win-Win, egal was.

Beschäftigen Sie das Schreiben von OOCSS

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

Da OOCSS keine Vorverarbeitung erfordert, können Sie es mit einer Online-IDE wie CodePen versuchen. Einfache Projekte eignen sich am besten für den Einstieg und die Verbesserung Ihres Wissens von dort aus.

Sehen Sie sich diese Ressourcen an, um Ihre Forschung auf dem sich entwickelnden Gebiet von OOCSS zu fördern.

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