CSS Garden

Tipps und Tricks über Stylesheets

 

 Effizienter CSS-Code

  1. Redundante Einheiten für Null-Werte

    Bei Null-Werten wird die Einheit - in diesem Fall Pixel - nicht gebraucht:

    padding:0px 0px 5px 0px;

    Die effizientere Schreibart lautet:

    padding:0 0 5px 0;

    Dasselbe gilt für andere "Styles" z. Bsp.:

    margin:0;

    Verschwende keine Bytes für Einheiten wie px, pt, em, etc, wenn der Wert 0 ist. Das einzige Argument um es doch zu tun kann sein, dass später einfach Werte eingefügt werden können. Null Pixels ist das gleich wie null Punkte.

    Line-height kann auch ohne Unit verwendet werden. Das folgende Statement ist also gültig:

    line-height:1;

  2. Vermeiden von doppelten Farbcodes

    Folgende Werte sollten umgeschrieben werden:

    color:#ffffff;
    background-color:#000000;
    border:1px solid #ee66aa;

    Effizienter sieht der Code folgendermassen aus:

    color:#fff;
    background-color:#000;
    border:1px solid #e6a;

    Bei folgendem Wert kann natürlich nichts abgekürzt werden:

    color:#fe69b2;

  3. Vermeiden von Wiederholungen

    Das folgende Beispiel kann in einer einzigen Linie geschrieben werden:

    border-top:1px solid #00f;
    border-right:1px solid #00f;
    border-bottom:1px solid #00f;
    border-left:1px solid #00f;

    So sieht der Code zusammengefasst aus:

    border:1px solid #00f;

Übersetzter Auszug aus einem englischen Artikel von Chess Hester: http://www.designdetector.com/link/to/ten-common-css-mistakes/

 

>Zurück

 

© 1997 - 2019