CSS strukturieren mit ITCSS

ITCSS ist meiner Meinung nach der beste Ansatz um viel CSS Code vernünftig zu strukturieren und dabei nicht ständig die Spezifität im Auge zu behalten.


Start reading ↓ Tweet about →
Published on

Wer schon einmal mit dem Gedanken gespielt hat eine konzipierte Website ohne einem aufgeblähten CSS-Framework umzusetzen, kennt das Problem: CSS-Regeln, Selektoren und Elemente in Hülle und Fülle. Hier kommt die von Harry Roberts entwickelte Methodik namens ITCSS (Inverted Triangle CSS) ins Spiel. Im folgenden Artikel beschreibe ich die Methode und ihre Vorzüge. Neben einer ausführlichen Slideshow findet man inzwischen auch einige Blog-Artikel zum Thema ITCSS im Netz.

Welche Probleme löst ITCSS?

Spezifität in CSS ist ein sehr wichtiges Thema. Um sauberen und sich nicht wiederholenden CSS Code zu schreiben, muss man strukturiert vorgehen. Hat man diese Struktur nicht, passiert es schnell, dass z.B. zuvor definierte Styles doppelt oder dreifach unnötig überschrieben werden. Der “CSS Specifity Graph Generator” hilft dabei eigenen CSS Code zu analysieren. Spitzen in der Spezifität von Selektoren, Pseudoklassen etc. sollten vermieden werden oder eher am Ende des Stylesheets auftauchen.

Die ITCSS Architektur zwingt uns dabei diese Reihenfolge der Spezifität einzuhalten. Der Name “Inverted Triangle CSS” rührt daher, dass auf den oberen Ebenen Selektortypen mit geringer Spezifität zu finden sind und im unteren Teil, also zum Ende des Stylesheets die Selektortypen mit der höchsten Spezifität (welche so sparsam wie möglich eingesetzt werden sollten).

Um ITCSS sinnvoll anzuwenden benötigt man keine Tools. Es empfiehlt sich das Arbeiten mit SASS, LESS, Stylus etc.

Ich persönlich arbeite z.B. gern mit SASS oder Stylus in Verbindung mit Codekit.

Die Ebenen von ITCSS

  • Settings: Hier werden ausschließlich alle Präprozessor-Variablen definiert.

  • Tools: Die Tools sind der richtige Ort für Funktionen und/oder Mixins der gewählten Stylesheet-Sprache.

  • Generic: Drittanbieter CSS wie z.B. “normalize.css” etc.

  • Base: Hier werden alle einfachen Typ-Selektoren (p,img,h1-h6 etc.) definiert, aber keine Klassen oder ID’s.

  • Objects: Für Fans von objekt-orientiertem CSS bietet diese Ebene platz um z.B. Header, Footer, Sidebar oder andere Objekte zu definieren.

  • Components: Diese Ebene kann auch mit der Objects-Ebene kombiniert werden. Sie enthält spezifischere Styling-Anweisungen für die Objekte z.B. Die Hintergrundfarbe des Footers etc.

  • Trumps: Die letzte Ebene wird genutzt, um u.a. Styles zu überschrieben. Dabei sollte man aber sparsam vorgehen! Beispiele für Trumps wären Klassen für die Textausrichtung, !important (sollte ausschließlich in dieser Ebene eingesetzt werden), das Überschreiben von Farbwerten etc.

Die Struktur von ITCSS

Die Struktur von ITCSS

Entgegen Harry Roberts Empfehlung, alle Dateien auf einer Ebene zu organisieren (also in einem Ordner), finde ich eine Ordnerstruktur übersichtlicher.

Ausgangspunkt ist eine Hauptdatei z.B. “main.scss” in welcher die Ebenen in der durch ITCSS vorgegebenen Reihenfolge eingebunden werden. Diese Struktur lässt sich mit gängigen Workflow Tools schnell erzeugen und bietet die nötige Übersichtlichkeit bei großen Projekten.


← Go back to previous page