RSCSS - Verständliches CSS

In meinem Artikel, möchte ich kurz über RSCSS informieren und wie es hilft, Stylesheets (CSS) sinnvoll und verständlich zu strukturieren.


Start reading ↓ Tweet about →
Published on

RSCSS ist eine von Rico Sta. Cruz veröffentlichte Methodik, um in komplexen und großen CSS-Dateien den Überblick nicht zu verlieren. Es kann ergänzend zu ITCSS eingesetzt werden, welches ich in einem anderen Artikel vorgestellt habe. Aktuell setzt zum Beispiel das “Concise CSS Framework” diese RSCSS-Konvention ein und um.

RSCSS - Verständliches CSS

Komponenten.

Um unsere CSS-Datei sinnvoll zu strukturieren, denkt man in Komponenten bzw. Bestandteilen. In meinem Beispiel bedeutet das, dass “.teaser-card” ein Bestandteil meines kompletten Layouts ist. Als Klassenname für diese Komponente gibt RSCSS vor, mindestens ZWEI Wörter zu verwenden. Also “teaser-card” oder “frontpage-hero-section” etc. Diese Komponente sollten jeweils in einer eigenen Datei definiert werden. Mittels Preprozessorensprachen (SCSS, LESS, STYLUS etc.) lassen sich die einzelnen Komponentendateien einfach zusammenfassen.

Elemente.

Alle Komponenten enthalten wiederum einzelne Elemente wie z.Bsp. einen Button, ein Cover-Image oder Text.

RSCSS - Verständliches CSS

Bei Elementen wird die Klasse mit EINEM Wort benannt. In meinem Beispiel also “.button” oder “.header” etc. Benötigt man doch mal mehr als ein Wort um dem Kind einen Namen zu geben, sollten keine Striche zwischen beiden Wörtern verwendet werden. Also “.submitbutton” oder “.coverimage” etc.

Elemente sollten immer mit dem Kindselektor (child-selector) angesprochen werden. Typenselektoren (tag selectors) haben eine höhere Spezifität und somit eine kleine Auswirkung auf die Performance. Diese sollten also vermieden werden.

RSCSS - Verständliches CSS

Variationen.

Will man seine Komponenten oder Elemente variieren, nutzt man dazu einfach einen Strich. So erkennt man im HTML-Code schnell eine Variation und behält auch da den Überblick.

RSCSS - Verständliches CSS

Layouts.

RSCSS hält noch grundsätzliche Tipps zum Thema Layout bereit. Die definierten Komponenten (siehe Artikelanfang) sollten so konzipiert werden, dass sie in verschiedenen Kontexten eingesetzt werden können. Bei meinem “Card-Layout”-Beispiel also als “Artikel-Karte” oder “Nutzerprofil-Karte” etc.

Deshalb sollten keine Margins, Positionen, Floats oder die Höhe & Breite definiert werden. Ausgenommen davon wären z.Bsp. Logos oder Profilbilder etc.

Helper.

So genannten “Helper” sind in jeder strukturierten und gut umgesetzten Website ein Muss. RSCSS schlägt vor, diese Hilfsklassen mit einem Unterstrich zu beginnen, also “._remove-margin” oder “._center-text”. Das gute daran ist: Man wiederholt sich nicht ständig selbst (DRY) und kann diese Klassen immer wieder zweckmäßig im HTML-Code einsetzen. Hilfsklassen sollten generell sparsam eingesetzt werden, da meistens das “!important”-Statement gesetzt wird (sehr hohe Spezifität).

Meine Anmerkung zu Klassennamen.

Um CSS-Klassenselektoren noch unabhängig von RSCSS verständlicher (lesbar) zu machen, könnte man gesprochene Vergleichsoperatoren verwenden. Also nehmen wir an wir hätten eine “._add-border”-Hilfsklasse. Der Name ist auf den ersten Blick einleuchtend, aber im HTML Code wäre doch besser lesbar “._has-border”. Oder wenn man eine Klasse definieren würde um Elemente zu verstecken könnte man diese “._hide-me” nennen oder besser “._is-hidden”.

Fazit.

Mit RSCSS lassen sich problemlos mehrere tausend Zeilen Code strukturieren. “Don’t repeat yourself” lässt sich somit einfach umsetzen.

Die komplette RSCSS Dokumentation findet man unter http://rscss.io/


← Go back to previous page