Effizienter CSS-Code
-
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; 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;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