Mit Hilfe von CSS Kurzschreibweisen (CSS Shorthand Properties) kannst du dein Stylesheet noch übersichtlicher gestalten und außerdem die Dateigröße deines Stylesheets weiter verringern. Daher habe ich eine kleine Übersicht der hilfreichsten Kurzschreibweisen für font-Eigenschaften, border, background & Co zusammen gestellt.

1. font

mit der Kurzschreibweise font kannst du die CSS-Eigenschaften font-style (Schriftstil, z.B. italic), font-variant (z.B. Kapitälchen, small-caps), font-weight (Schriftgwicht, z.B. bold), font-size (Schriftgröße), line-height (Zeilenabstand) und font-family (Schriftfamilie) für die Definition von Schriften zusammenfassen.

Die Reihenfolge der CSS-Eigenschaften in font ist also:
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

(Quelle: W3C, Punkt 15.8 Font Shorthand Property)

Beispiel:
[php]
font-style: italic;
font-variant:small-caps;
font-weight:bold;
font-size:1.4em;
line-height:1.5;
font-family:Georgia, serif;
[/php]

wird in der Kurzschreibweise:

[php]
font: italic small-caps bold 1.4em/1.5 Georgia, serif;
[/php]

CSS-Eigenschaften, welche den Standardwert (normal) behalten sollen, kannst du in der Reihenfolge einfach auslassen, z.B.:

[php]
font: bold 1.4em/1.5 Georgia, serif;
[/php]

2. margin und padding

Auch die CSS-Eigenschaften für margin und padding kannst du Platz- und speichersparend zusammenfassen. Anstatt einzelne Werte für margin-top, margin-right, margin-bottom oder margin-left (bzw. padding-…) anzugeben fasst du alle Werte mit in der einen CSS-Eigenschaft margin (bzw. padding) zusammen.

Beispiel:
[php]
margin-top: 30px;
margin-right: 10px;
margin-bottom: 40px;
margion-left: 20px;
[/php]

wird in der Kurzschreibweise zu:

[php]
margin: 30px 10px 40px 20px;
[/php]

Die Reihenfolge erfolgt immer im Uhrzeigersinn, angefangen wird beim margin-top Wert. Noch kürzer kannst du margin oder padding zusammenfassen, wenn z.B. mehrere Werte gleich sind.

[php]
margin: 30px 10px 30px 10px;
wird also zu:
margin: 30px 10px;
[/php]

Und gibst du nur den Wert von margin-right an, wird der gleiche Wert automatisch auch für margin-left übernommen und du kommst mit drei statt vier Werten aus:

[php]
margin: 20px 10px 30px 10px;
wird zu:
margin: 20px 10px 30px;
[/php]

3. background

Auch die CSS-Eigenschaften background-color (Hintergrundfarbe), background-image (Hintergrund-Bild), background-repeat (Art der Wiederholung des Hintergrundbildes), background-attachment (scrollt der Hintergrund mit oder bleibt er fix) und background-position (Anfangsposition des Hintergrundbildes) für die Definition von Hintergründen kannst du in einer viel praktischeren Kurzschreibweise background schreiben.

Die Reihenfolge der Werte ist:
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];

(Quelle: W3C, Punkt background)

Beispiel:
[php]
background-color:#066;
background-image: url("bg.png");
background-repeat:repeat;
background-attachment: fixed;
background-position:top left;
[/php]

wird in der Kurzschreibweise zu:

[php]
background:#066 url("bg.png") repeat fixed top left;
[/php]

Auch bei der Background-Eigenschaft kannst du nicht benötigte Werte weglassen, es wird dann automatisch der Standardwert genutzt.

4. list-style

Außerdem ist es noch sinnvoll, die CSS-Eigenschaften list-style-type (Art des Listenelements), list-style-position (Position des Listenelements) und list-style-image (Bild für Listenelement) in der einzelnen list-style Eigenschaft zusammen zu fassen.

Die Reihenfolge der list-style Eigenschaften lautet:
list-style: [list-style-type] [list-style-position] [list-style-image];

(Quelle: W3C, list-style property)

Beispiel:
[php]
list-style-type: square;
list-style-position: outside;
list-style-image: none;
[/php]

kann zusammen gefasst werden zu:

[php]
list-style: square outside;
[/php]

5. border

Platzsparend und übersichtlich ist auch die Kurzschreibweise für border (Rahmen). Hier kannst du die Eigenschaften border-width (Rahmenbreite), border-style (Stil des Rahmens, z.B. als Fläche, gestrichelt, gepunktet usw.) und border-color (Rahmenfarbe) vereinen.

Die Reihenfolge der CSS-Eigenschaften bei border:
border: [border-width] [border-style] [border-color];

Beispiel:
[php]
border-width: 5px;
border-style: solid;
border-color: #666;
[/php]

wird mit der CSS-Eigenschaft border zusammengefasst in:

[php]
border: 5px solid #666;
[/php]

6. outline

Auch die drei CSS-Eigenschaften für die die Gestaltung von Outlines (Konturen) outline-width (Kontur-Breite), outline-style (Art der Kontur) und outline-color (Farbe der Kontur) können, ähnlich wie bei der border-Eigenschaft, in einer kürzeren Schreibweise geschrieben werden. Der Unterschied von outline im Gegensatz zu border ist übrigens, dass die Breite der outline nicht zum Element dazu addiert wird, sondern die Kontur quasi über dem Element liegt.

Die Reihenfolge der outline-Eigenschaften lautet:
outline: [outline-width] [outline-style] [outline-color];

Beispiel:
[php]
outline-width:thick;
outline-style:dotted;
outline-color:#FF0;
[/php]

Die zusammen gefasste CSS-Eigenschaft lautet:

[php]
outline: thick dotted #FF0;
[/php]

7. transition

Auch die CSS3-Eigenschaften transition-property (definiert, welche Werte verändert werden, transition-duration (Zeitdauer der Veränderung), transition-timing-function (Kurve der Geschwindigkeit der Veränderung, z.B. linear, ease, ease-out etc.) und transition-delay (Verzögerung der Veränderung) lassen sich in der Kurzschreibweise transition zusammenfassen.

Die Reihenfolge der transition-Eigenschaften lautet zusammen geschrieben:
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

Beispiel:
[php]
transition-property: opacity;
transition-duration: 3s;
transition-timing-function: ease-in;
transition-delay: 1s;
[/php]

wird in der Abkürzung zu:

[php]
transition: opacity 2s ease 1s;
[/php]

Damit die transition-Eigenschaft in Webkit-Browsern (Chrome und Safari) und Firefox funktioniert, musst du allerdings noch die Eigenschaften -webkit-transition und -moz-transition hinzufügen:

Im oberen Beispiel lautet die vollständigen CSS-Eigenschaften für transition dann:

[php]
transition: opacity 2s ease 1s;
-moz-transition: opacity 2s ease 1s;
-webkit-transition: opacity 2s ease 1s;
[/php]
Weitere hilfreiche Tipps

Um deinen CSS-Code möglichst sauber, übersichtlich und klein zu halten kannst du außerdem das Online-Tool “Clean CSS” nutzen. In den Einstellungen kannst du genau festlegen, welche Werte du gekürzt, zusammen gefasst und sortieren möchtest. Da beim Komprimieren des Stylesheets auch schnell einmal etwas schief gehen kann, solltest du aber vorab immer eine Sicherheitskopie deines Stylesheets machen.

Möchtest du dir ein CheatSheet mit den wichtigsten Kurzschreibweisen für CSS ausdrucken, kannst du die CSS-Kurzschreibweisen CheatSheets bei Dr.Web nutzen.

Ich hoffe die Übersicht der CSS Shorthand Schreibweisen ist für dich hilfreich. Kennst du noch weitere Tipps für Kurzschreibweisen oder hilfreiche Tools zur Optimierung von CSS? Über dein Feedback und deine Tipps freue ich mich sehr!