Objektorientiertes CSS fürs Team mit RichCSS

RichCSS – objektorientiertes CSS-Framework
Kommentare

Wer schon einmal im Team an einer Applikation gearbeitet hat, weiß, dass einem die gemeinsame Nutzung einer Codestruktur schnell mal aufs Gemüt schlagen kann. Denn nicht jedes Teammitglied folgt derselben Logik wie man selbst – und so wird gerade gemeinsam genutztes CSS schnell unübersichtlich. Das CSS-Framework RichCSS möchte dem Abhilfe schaffen und bietet Entwicklerteams sauberes und wiederverwendbares DRY-CSS.

Beinahe alles entwickelt sich im Web in puncto Geschwindigkeit, Organisation und Community-Mitarbeit weiter – außer CSS. Auch wenn Frameworks wie SASS oder LESS die Situation verbessern, bleibt das größte Problem mit CSS dennoch bestehen: Wie schreibe ich Code so, dass nicht nur ich ihn verstehe, sondern auch andere? Denn eine Codebasis wird schnell ziemlich groß und unübersichtlich. Meist ergibt CSS doch nur für den Programmierer Sinn, der es geschrieben hat – alle anderen versuchen vielmehr, das Puzzle Stück für Stück zu lösen. Ein interessanter Lösungsansatz ist objektorientiertes CSS und im Besonderen das CSS-Framework RichCSS.

RichCSS – das kann das Framework

RichCSS ist für CSS das, was Rails für Ruby ist: Ein Framework, dass das Erstellen von Websites schneller macht. In diesem Fall bedeutet das: „Implementing design into code faster in a sustainable way that will allow anyone else to take over your CSS code easily.“ So lassen sich auch CSS-Klassen intuitiver wiederverwenden. Ein spezieller „Architectural Style“ ermöglicht Usern den Zugriff auf wiederverwendbares CSS, Versionierung sowie die Einbindung von CSS-Plugins und deren leichte Nutzung. RichCSS will Regeln und Strukturen für CSS schaffen, die jeder versteht und anwenden kann.

RichCSS, Quelle: http://www.richcss.com/

RichCSS, Quelle: http://www.richcss.com/

RichCSS fällt unter das Label „objektorientiertes CSS“ (OOCSS), das auf zwei Säulen fußt: der Trennung von Struktur und Skin sowie von Containern und Inhalt. Allerdings unterscheidet sich das Framework von diesem Ansatz in einigen Punkten: So wird die Trennung auf die Organisation von Ordnern und Dateien ausgeweitet und bleibt nicht aufs Grid-System beschränkt. Außerdem ist die Definition eines Objekts in RichCSS eine völlig andere, denn hier ist tatsächlich alles ein Objekt. Diese Idee basiert auf der Philosophie von Ruby on Rails, worunter folgende drei Merkmale fallen:

  1. Everything is an object
  2. Convention over configuration
  3. Stay DRY (Don’t Repeat Yourself)

Wichtig ist auch noch, dass RichCSS in allen Browsern läuft und zwar SASS nutzt, aber von diesem völlig unabhängig laufen kann.

RichCSS is improving the organization and structure of your stylesheet, not recreating the wheel. – Richardson Dackam

Wie funktioniert RichCSS?

Das CSS-Framework liefert ein Set an Konventionen, anhand derer sich Ordner und CSS-Dateien organisieren lassen. Die Ordner lassen sich dabei in Box (main, positioning, blocks), Elements (buttons, colors, fonts, images etc.) und Parts (import) unterteilen. In RichCSS ist jeder Inhalt eine Box, die sich in die oben genannten Bestandteile einteilen lassen. Die Main-Datei beinhaltet das Kern-Setup der gesamten Website, Blocks sind Element-Container und die Positioning-Datei enthält alle möglichen Positionen, an denen man eine Klasse hinzufügen kann.

Jede Design-Option eines Elements wird im Elements-Ordner abgelegt. Jedes Element wird wiederum einer bestimmten Kategorie zugeordnet, die sich Guides nennen. In RichCSS gibt es sieben Guides: The Buttons Guide, The Colors Guide, The Fonts Guide, The Image Guide, The Inputs Guide, The Lists Guide und The Feature Guide.

Bei Parts handelt es sich um Plugins oder Packages, die von anderen Quellen aus importiert und in den Parts-Ordner eingefügt werden. Versioning ist in Form einer Ordner-Hierarchie angelegt. Auf diese Weise lässt sich das CSS leicht nachvollziehen und kann via route.css aktualisiert werden. Darüber hinaus ist auch das Erstellen von responsiven Websites und Media Queries mit RichCSS einfacher, weil organisierter.

Einen tieferen Einblick in das CSS-Framework gibt Entwickler Richardson Dackam in einem ausführlichen Blogpost. Weitere Informationen können der Dokumentation entnommen werden.

Name RichCSS
Hersteller Richardson Dackam
Projektwebsite http://www.richcss.com/
GitHub https://github.com/RichCSS
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -