Webdesign – Cascading Stylesheets
Klassen verbinden

Klassentreffen ___

Style-Definitionen auszulagern ist eine prima Sache. Doch im Lauf der Zeit schwillt so manche CSS-Datei bedrohlich an. Das ist kein Wunder, solange für neue Designelemente und Varianten immer wieder Klassen definiert werden. Ein gut organisiertes Klassentreffen spart Platz. Angenommen Sie verwenden gern Tabellen, dann codieren Sie so:

.tabelle {
border : 1px solid red;
background-color : yellow;
padding-left : 6px;
padding-right : 10px;
margin-left : 4px;
font-family : verdana;
height : 150px;
width : 150px;}

Ein paar Seiten später brauchen Sie dasselbe mit blauem Rahmen. Die Folge ist ein weiterer, weitgehend indentischer Eintrag in die Style-Datei. Das lässt sich verhindern, wenn man Styles modular aufbaut. Etwa so:

.tabelle {
background-color : yellow;

Redaktion Internet Professionell

padding-left : 6px;
padding-right : 10px;
margin-left : 4px;
font-family : verdana;
height : 150px;
width : 400px;}

rahmenrot { border : 1px solid red;}
rahmenblau { border : 1px solid red;}

Unglücklicherweise können aber zwei Klassen nicht gleichzeitig zum Einsatz kommen. Stattdessen gibt uns CSS 2 eine andere Methode an die Hand:

Damit lassen sich nicht nur Kilobytes bei der Dateigröße sparen, sondern auch eine Menge Arbeit. Möglicherweise lohnt es sich auch, bereits vorhandene CSSDateien einmal unter diesem Gesichtspunkt zu prüfen.