Variabeln NUR mit CSS

Nehmen wir mal an, wir haben ein riesengroßes CasCadingStylesheet und immer wieder taucht darin eine gleiche Eigenschaft auf, zum Beispiel ein Farbwert. Wenn wir diesen Farbwert jetzt ändern wollen müssen wir ihn jedesmal, wenn er im Sheet vorkommt mit der Hand austauschen.

Es wäre praktisch, wenn wir ihn als Variabel definieren könnten, die wir wie in PHP einmal definieren, und überall wo sie auftaucht wird dann ihr Wert übernommen. Zwar hat CSS selbst nicht die Möglichkeit Werte variabel abzuspeichern, aber es ermöglicht zumindest variabel darauf zuzugreifen.

Der Kniff den ich verwende: man kann ein HTML Objekt mehrere Klassen haben lassen.

Ich kann leider nicht total variabel sagen meineFarbe = #206080 und dann sowas machen ohne ein Skript zu verwenden:

.nav {
color: meineFarbe;
}

Aber das muss ich auch gar nicht, denn ich kann gewisse Eigenschaften einfach mit Zusatzklassen dazuladen:

.meinTextBlau {
color: #206080;
}

.navVws {
width: 220px;
height: 30px;
display: block;
background-image: url('../grafiken/nav_normal.png');
margin-bottom: 5px;
text-align: center;
line-height: 30px;
text-decoration: none;
}

Ein Link würde mir nun im regulären Browserblau angezeigt werden, ich will die Farbe separat haben, sodass ich sie einfach austauschen kann. Ich lade dazu einfach beide Klassen in ein HTML-Element:

<a class="meinBlau navVws" href="">Verweis</a>

Jedesmal, wenn ich jetzt mein blau verwenden will, lade ich einfach die .meinTextBlau dazu. Willich jetzt auch Rahmen immer in diesem blau haben, lade ich einfach auch eine Rahmenklasse dazu die zum Beispiel .meinRahmenBlau heißt:

.meinTextBlau {
color: #206080;
}

.meinRahmenBlau {
color: #206080;
}

.navVws {
width: 220px;
height: 30px;
display: block;
background-image: url('../grafiken/nav_normal.png');
margin-bottom: 5px;
text-align: center;
line-height: 30px;
text-decoration: none;
}

Und wer sich mit CSS ein bisschen auskennt, sieht jetzt bereits den praktischen Ansatz hinter diesem Tutorial: Ich kann die Klassen gleichzeitig deklarieren und so brauch ich den Farbwert wirklich nur einmal angeben. Zwei Klassen die gleichen Eigenschaften zuweisen, das tut man ganz einfach indem man sie mit Beistrichen getrennt nebeneinander hinschreibt:

.meinTextBlau, .meinRahmenBlau {
color: #206080;
}

.navVws {
width: 220px;
height: 30px;
display: block;
background-image: url('../grafiken/nav_normal.png');
margin-bottom: 5px;
text-align: center;
line-height: 30px;
text-decoration: none;
}

Ich muss jetzt nur den Farbwert verändern, und alle Elemente die die Klassen drin stehen haben nehmen ihn an.

<a class="meinTextBlau meinRahmenBlau navVws" href="">Verweis</a>

Was ein Mancher womöglich als Nachteil ansieht ist, dass jetzt überall im HTML-Text mehrere Klassen angegeben werden müssen. Ich persönlich hab da aber nichts dagegen, weil das das Layout nur umso stärker anpassbar macht.

Kommentare