5 Tipps für effizienteres CSS-Coding
Als Web Entwickler sucht man immer nach Wegen, seinen Arbeitsablauf zu optimieren. Das bedeutet nicht einfach den Code schneller einzutippen: Effizienteres Coden bedeutet mit vergleichsweise wenig Aufwand mehr zu erreichen.
Hier ein paar Tipps und Tools, damit du deine Produktivität steigerst und zu einem besseren Front End Entwickler werden kannst.
1. Nutze einen passenden Editor
Viele Front End Entwickler, die weniger mit Kompiliersprachen (z.B. Java, C, etc.) zu tun haben, nutzen vollgepackte IDEs wie Aptana oder Eclipse; diese finden durchaus ihren Einsatz, aber bei Skriptsprachen bzw. HTML und CSS verlangsamen sie letztlich den Workflow und sind eher kontraproduktiv.
Der Grund, warum viele Entwickler noch immer auf diese Monster-Editoren setzen, liegt zumeist darin, dass sie sich kaum Alternativen ansehen und / oder schlankere Code-Editoren nicht ernst nehmen. Ein Vorurteil, das ich hier wiederlegen möchte, denn der richtige Editor kann den Workflow merkbar beschleunigen!
Die drei Top-Editoren für Front End Entwickler sind:
Alle drei haben ihre Stärken und Schwächen, aber der Geheimtipp unter den dreien ist definitiv SublimeText. Der Multiplattform-Support hebt dieses Tool aus der Masse hervor und macht ihn auch für Entwickler interessant, die ihre Seele nicht bereits ausschließlich Apple verschrieben haben.
2. Verwende einen CSS-Preprocessor
CSS-Preprocessors erweitern das bereits altbekannte CSS um ein paar nützliche Features, wie z.B. Variablen und Funktionen.
Man schreibt wesentlich effizienteren Code in der jeweiligen Preprocessor-Sprache, die dann durch ein passendes Tool in normales CSS umgewandelt wird. Einer der bekanntesten CSS-Preprozessoren ist LESS.
Du verstehst den Sinn solcher Tools noch nicht? An einem Beispiel ist es schnell gezeigt:
CSS:
.foo {
font-family: Arial;
font-size: 14px;
line-height: 18px;
color: #000;
}
.foo #nav {
font-family: Arial;
font-size: 12px;
line-height: 16px;
color: #000;
}
LESS:
/* Deklaration */
@black: #000; /* Variable */
/* Funktion */
.arial(@fontSize: 12px, @lineHeight: 16px) {
font-family: Arial;
font-size: @fontSize;
line-height: @lineHeight;
}
/* Unser CSS-Code von oben, diesmal mit LESS */
.foo {
/* Wir übergeben der Funktion unsere Werte */
.arial(14px, 18px);
color: @black;
#nav {
/* Hier benötigen wir keine Werte,
da die default-Angaben passen */
.arial();
color: @black;
}
}
Die Umwandlung kann dann z.B. mit der Less-App durchgeführt werden.
Richtig eingesetzt, geben CSS-Preprocessors besonders großen Projekten einen Geschwindigkeitsboost!
3. CSS Shorthands
Ein kurzer, aber doch hilfreicher Tipp: Verwende, wenn möglich die Shorthand-Schreibweise.
Anstatt es folgendermaßen zu schreiben:
foo {
margin-top: 5px;
margin-left: 6px;
margin-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
machen wir es doch lieber so:
.foo {
margin: 5px 10px 0 6px;
padding: 10px 0;
}
/* Mit anderen CSS Eigenschaften */
.foo {
font: normal normal 500 12px/14px Arial, Sans-Serif;
background: #fff url(‘foo.gif’) no-repeat center top;
border-radius: 10px 5px 4px 20px;
}
4. Wiederhole dich nicht
Oder auf Englisch: ”Don’t repeat yourself”.
Das soll heißen, dass man CSS-Eigenschaften zusammenfassen sollte, um sich somit Arbeit und folglich Zeit zu sparen.
Beispiel:
#foo1 {
color: #00FF00;
font-family: Arial;
line-height: 18px;
font-size: 14px;
}
#foo2 {
color: #FF00FF;
font-family: Arial;
line-height: 18px;
font-size: 14px;
}
Wenn man nun die DRY Regel beachtet und alle Selektoren mit den gleichen Eigenschaften zusammenfasst, sieht das Ganze so aus:
#foo1,
#foo2 {
font-family: Arial;
line-height: 18px;
font-size: 14px;
}
#foo1 {
color: #00FF00;
}
#foo2 {
color: #00FF00;
}
5. Verwende ein CSS-Framework
CSS-Frameworks sind so eine Sache: Manche Entwickler kommen gar nicht mehr ohne sie aus und andere haben noch nie eines verwendet.
Es ist so, dass CSS-Frameworks natürlich eine Daseinsberechtigung haben. Sie können die Arbeit in bestimmten Fällen erheblich erleichtern. Man sollte jedoch schon genug Erfahrung haben um zu wissen, wann man dieses Tool benötigt.
Die am häufigsten verwendeten Frameworks sind:
