do-web Blog und Informationsarchiv

Sauberer und schnellerer CSS-Code

Als Programmiererin bin ich natürlich über jede Möglichkeit froh, meine Arbeit zu beschleunigen. Bei der CSS-Programmierung kann ich dies durch Anwenden der Kurzformen schaffen. Die Kurzformen sparen aber nicht nur Zeit sondern auch Codezeilen. Auf einer kleinen Website machen diese paar Zeilen zwar nicht aus,  aber bei einer größeren Plattform ist jede (milli)Sekunde entscheidend. Zusätzlich sollte man als WebentwicklerIn eh darauf achten so wenig Traffic wie möglich zu verursachen.Von welchen Befehlen es Kurzformen gibt und wie man sie einsetzt, werde ich euch in diesem Artikel zeigen.

Ich freue mich auf eure Kommentare und Meinungen.

Der Background Selektor:

Es gibt 5 background Eigenschaften (properties) und alle seperat aufzuschreiben ist reine Zeitverschwendung, vor allem da es auch schneller und einfacher geht. Die 5 Eigenschaften bestehen aus der Farbe (color), Bild (image), Wiederholung (repeat), Position (position) und Befestigungsart (attachement). Einzelnt aufgeführ sehen die Eigenschaften folgendermaßen aus:

1
2
3
4
5
6
7

.beispiel{
    background-color: #3F64CE;
    background-image: url(bild.jpg);
    background-repeat: repeat-y;
    background-position: 10px 15px;
    background-attachment: fixed;
}

In der Kurzform wäre das ganzauf maximal 3 Zeilen anstatt auf 7 verteilt und würde so aussehen:

1
2
3

.beispiel{
    background: #3F64CE url(bild.jpg) repeat-y 10px 15px fixed;
}

Der Border Selektor:

Es gibt 3 border Eigenschaften, welche aus der Farbe (color), Breite (width) und Stil (style) bestehen. Einzelnt aufgeführ sehen die Eigenschaften folgendermaßen aus:

1
2
3
4
5

.beispiel{
    border-width: 1em;
    border-style: dashed;
    border-color: #F2F2F2;
}

In der Kurzform wäre das ganz wieder auf maximal 3 Zeilen anstatt auf 5 verteilt. Es ist meiner Meinung nach die einprägsamste Kurzform und würde so aussehen:

1
2
3

.beispiel{
    border: 1em dashed #F2F2F2;
}

Der Margin Selektor:

Es gibt 4 margin Eigenschaften, eins für jede Seite. Einzelnt aufgeführ sehen die Eigenschaften folgendermaßen aus:

1
2
3
4
5
6

.beispiel{
    margin-top: 2em;
    margin-right: 3em;
    margin-bottom:1em;
    margin-left: 4em
}

In der Kurzform wäre das ganz wieder auf maximal 3 Zeilen anstatt auf 5 verteilt. Dabei muss man lediglich die Reihenfolge beachten, doch dies ist nicht wirklich schwer, da sie sozusagen mit der Uhr geht. Man fängt oben auf der 1 an, geht dann nach rechts zur 3, weiter nach unten zur 6 und schließlich nach links zur 9. Das ganze würde so aussehen:

1
2
3

.beispiel{
    margin: 2em 3em 1 em 4em;
}

Der Padding Selektor:

Padding hat die gleichen 4 Eigenschaften wie margin und diese Verhalten sich in der Kurzform auch genauso wie bei der Kurzform von margin.

Die Color Eigenschaft:

Wenn der Farbcode sich auf gleichen Zeichen, wie zum Beispiel #333333 oder in 2-er Paaren gleichen Zeichen wie #11FF77 aufbaut kann man diese zu zum Beispiel #333 oder #1F7 verkürzen. In der langen Form sieht das folgendermaßen aus:

1
2
3
4
5

.beispiel{
    background-color: #000000;
    border-color: #FFFFFF;
    color: #336699;
}

In der Kurzform wären es dann zwar nur 9 Zeichen weniger, aber immerhin. Es würde dann so aussehen:

1
2
3
4
5

.beispiel{
    background-color: #000;
    border-color: #FFF;
    color: #369;
}