Wie baut man eine CSS-Datei sinnvoll auf? Nachdem man meistens sehr strukturiert angefangen hat, werden die Stylesheets im Laufe des Projektes immer unübersichtlicher – und schließlich kann sich die Datei nicht mehr retten vor tausenden von Spezialklassen, die irgendwo zwischen den Styles für Überschriften und Sidebar-Divs die letzte Übersichtlichkeit ausmerzen. Die Devise für gutes CSS sollte sein: unspezifisch und klassisch bleiben. Warum das so ist, erfahrt ihr hier.

Unspezifisch bleiben

Die Spezifität der CSS-Datei entscheidet über die Wertigkeit der verschiedenen Stylesheet-Angaben und priorisiert sie entsprechend. Folgende beispielhafte Liste ist quasi „anti-spezifisch“, also von der wichtigsten bis zur wenigsten wichtigen Stylesheet-Angabe, sortiert:

Wichtigkeit	Selektor(en)	Spezifität
höchste	style="foo: bar;"	1-0-0-0
mittel-hoch	#foo #bar { /* bar in foo */ }	0-2-0-0
mittel	#foo { /* foo */ }	0-1-0-0
wenig	.bar { /* bar */ }	0-0-1-0
kaum	p { /* baz */ }	0-0-0-1

Die rechte Spalte zeigt hierbei, wonach sortiert wird: Je mehr Selektoren eine Angabe hat, desto höher wird ihre Spezifität. Bei zwei Angaben, die die gleiche Spezifität aufweisen, überschreibt die später folgende die frühere.

Damit man nicht im Voraus später folgende Angaben überschreibt und dann umständlich mit !important hantieren muss, ist es sinnvoll, die CSS-Datei ebenfalls entsprechend der Spezifität zu sortieren.

Klassisch bleiben

Hardcore-CSS-ler predigen, dass IDs gar nichts mehr im Stylesheet zu suchen haben. Sie entsprechen wegen ihrer Einzigartigkeit nicht dem Sinn einer CSS-Datei und birgen hohe Risiken ob ihrer enormen Spezifität ;) - da ist natürlich etwas dran! Stattdessen wird dazu geraten, auch nur einmal vorkommende Seitenelemente über Klassen anzusteuern.

Und dabei braucht man nicht zimperlich sein: Ob hervorgehobener Absatz, aktiver Seitennavigations-Link oder rechts-gefloatete Box - Euch fallen sicher tausend nützlich Klassen ein. Achtet hierbau auf wiederverwertbare Klassen, die nicht nur in der aktuellen Situation gut funktionieren und wendet dann im HTML-Markup mehrere Klassen auf ein Objekt an - z.B. class="nav-link nav-link-active". Die CSS-Frameworks machen es vor. (Auch wenn ich hier noch teilweise hardere, da das HTML ungemein unübersichtlicher wird…)

Beispiel-Struktur für eine CSS-Datei

Kommen wir nach der ganzen Theorie zur Struktur. Sinnvoll ist in meinen Augen die folgende (großzügig geklaut von Harry Roberts; aber besser gut geklaut als schlecht selbst gemacht):

1. Textformatierungen: Links, Überschriften und Absätze (a, h1-h6, p)
2. Listen und Tabellen (ul, ol, dl, table)
3. Objekt-Wrapper (z.B. .accordion-Klassen)
4. Seitenelemente (.page-header, page-content, page-footer & Co)
5. Sonderklassen (z.B. .hidden oder .clear)

Bei größeren Projekten ist es sicher nicht verkehrt, für jeden Listenpunkt eine einzelne CSS-Datei anzulegen.

Links zum Thema

Hier noch ein paar Links zum Thema:

• In den CSS Guidelines von Harry Roberts findet ihr weitere hilfreiche Informationen zur Arbeit mit CSS
• W3C zu Spezifität
• Mit dem Specificity Calculator lässt sich leicht die Spezifität von Stylesheet-Angaben vergleichen