CSS Optimieren: Zusammenfassen, Kombinieren und Verschachteln

Zusammenfassen ist immer dann eine gute Idee, wenn gleiche Anweisungen auf verschiedene Elemente, Klassen oder IDs angewendet werden müssen.

Angenommen, Sie möchten Ihre Überschriften in Blau und in der Schriftart Verdana darstellen. Das liest sich dann so:

H1 {color : blue; font-family : verdana,arial,helevetica;}
H2
{color : blue; font-family : verdana,arial,helevetica;}
H3 {color : blue; font-family
: verdana,arial,helevetica;}

Es geht eleganter. Ein Komma hilft uns dabei:

H1,H2,H3 {color : blue; font-family : verdana,arial,helevetica;}

Was aber, wenn die Styledefinitionen zwar ähnlich, aber nicht identisch sind? Kein Problem, wir arbeiten mit Wiederholungen. Ausgangspunkt sind diesmal unterschiedliche Schriftgrößen, jedoch dieselbe Farbe und Schriftart:

H1
{font-size : 1.2.em; color : blue; font-family : verdana,arial,helevetica;}
H2
{font-size : 1.1.em; color : blue; font-family : verdana,arial,helevetica;}
H3
{font-size : 1.0.em; color : blue; font-family : verdana,arial,helevetica;}

Dies ließe sich dann wie folgt abkürzen:

H1 {font-size : 1.2.em;}
H2
{font-size : 1.1.em;}
H3 {font-size : 1.0.em;}
H1,H2,H3 {color : blue; font-family
: verdana,arial, helevetica;}

Das klappt auch prima, wenn es um die Formatierung von Hyperlinks geht. Alles ohne Unterstreichung zeigen? Bitte schön:

A:link,
A:visited,
A:hover,
A:active
{ text-decoration: none; }

Zahlreiche Anweisungen können Platz sparend zu einer einzigen zusammengefasst werden. Der Effekt bleibt derselbe, die Übersichtlichkeit jedoch wird mächtig erhöht.
Das wohl bekannteste Beispiel ist der Rahmen. Rahmenbreite, Rahmenfarbe, Rahmenart. Einzeln definiert, erhalten wir zum Beispiel dies:

border-width:
1px;
border-color: red;
border-style: dotted;

Zusammengefasst sieht es dann so aus:

border: 1px red dotted;

Aber das klappt auch mit Schriften. So kennt man es:

font-size: 12px;
line-height:
120%;
font-family: Verdana,Arial,Helvetica

Und so geht es auch:

font
: 12px/120% Verdana,Arial,Helvetica

Kommata und Schrägstrich sorgen dafür, dass der Browser nichts missversteht.
Ein weiteres Anwendungsgebiet ist das Hintergrundbild. So wird eine Grafik rechts unten platziert:

background-color:
yellow;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position:
bottom right;

Zusammengefasst erhalten wir dies:
background: yellow url(image.jpg) no-repeat bottom right;
Oder Abstände:

margin-top
: 9px;
margin-right : 8px;
margin-bottom : 7px;
margin-left : 6px;

Raffinierter geht es auf diese Weise

margin : 9px 8px 7px 6px;

Mit Padding ist das ebenso möglich.

Kunstvoll geht es nun zu. Angenommen man möchte innerhalb einer Menüleiste andere Formatierungen benutzen, als es auf der übrigen Seite der Fall ist. Andere Schriften, Textauszeichnungen, Farben, was auch immer. In der Folge müssen neue Klassen definiert werden.
Ein Beispiel für eine solche CSS Datei:

 P {
 font-family : Verdana, Arial; color : blue}

H3
{
 font-weight: normal; text-decoration: none;}

.menue {
border: 1px solid black;}

.menueschrift {
 font-family :
Arial; color : red;}

.menueueberschrift {
 font-weight:
bold; text-decoration: underline;}

Stattdessen verschachteln wir:

P
{
 font-family : Verdana, Arial; color : blue}

H3 {
font-weight: normal; text-decoration: none;}

.menue {
 border:
1px solid black;}

.menue P {
 font-family : Arial; color
: red;}

.menue H3
 {font-weight: bold; text-decoration:
underline;}

Wir definieren P und H3, sofern Sie innerhalb des Menüs vorkommen, kurzerhand um. Der Vorteil liegt hier nicht unbedingt innerhalb der CSS- sondern in der HTML-Datei. Man spart sich nämlich die Definition diverser Klassen.
Dies lässt sich weiter auf die Spitze treiben. So werden alle Fettschriften innerhalb eines Absatzes innerhalb des Menüs rot:

.menue P STRONG {color : red;}

Alle übrigen P- oder STRONG-Tags werden nicht beeinflusst. All das kann weit komplexer gedacht werden und bietet eine Menge Raum für zusätzliche Optimierung.