CSS-Architektur

2011-10-05

Note: This post is from my old blog and thus written in German and potentially obsolete.

Obwohl ich mich momentan die meiste Zeit mit JavaScript befasse, ist mir in letzter Zeit eines immer wieder klar geworden: (auch) CSS-Architektur ist wichtig. Zumindest wenn es nicht nur um relativ kleine, überschaubare Projekte geht.

Häufig musste ich aufgrund von “ortsabhängigen” (location dependent) Styles unnötig Selektoren für die selben Deklarationen hinzufügen, oder mich entscheiden ob ich !important oder erweiterte Selektoren nutzen möchte um bestimmte Deklarationen zu überschreiben (Stichwort: Specificity Wars). Der beste Weg um das CSS mit der Zeit immer weiter anwachsen zu lassen…

Es gab bereits 2005 Artikel zum Thema, die sich aber oft mit der Aufteilung von CSS auf mehrere Dateien, der Organisation des Codes innerhalb von Dateien u.ä. befassten, teilweise aber auch schon auf Dinge wie Redundanz eingingen.

Der erste mir bekannte Ansatz, der sich wirklich systematisch und tiefgreifend mit dem Thema CSS-Architektur auseinandergesetzt hat, ist OOCSS (Object Oriented CSS – der Name hat teilweise für Diskussionen gesorgt) von Nicole Sullivan. Durch zahlreiche Artikel dürfte er vielen Frontend-Entwicklern bereits bekannt sein. Dass es gar nicht so einfach ist, die alten Entwicklungsgewohnheiten abzulegen und sich auf OOCSS einzulassen, selbst wenn es nur testweise ist, beschreibt Ryan Lazuka sehr treffend in seinem Artikel “Brain vs. OOCSS”.

Jetzt hat Jonathan Snook von Yahoo seine Erfahrungen mit CSS in einem kompakten Online-Buch zusammengefasst: SMACSS (Scalable and Modular Architecture for CSS). Die Nähe zu OOCSS ist deutlich erkennbar, allerdings stellt Jonathan kein Framework zur Verfügung. Dafür ist der Ansatz aus meiner Sicht etwas greifbarer aufbereitet. Die Lektüre lohnt in jedem Fall.

Nachtrag: Hier noch zwei interessante Artikel, die verschiedene Ansätze bei der CSS-Entwicklung im Hinblick auf Performance bzw. Komplexität und Entwicklungskosten betrachten.