Es ist immer gut, sich zu verbessern. Reinhold Weber zeigt, wie man CSS auf ein neues Level hebt. Leider nur auf Englisch, daher gibts heute noch schnell eine Übersetzung des Ganzen.
Eine ausführliche Version des Ganzen mit Beispielen gibts auch beim Smashing Magazine unter dem Titel “70 Expert Ideas for Better CSS Coding“.
Und los gehts:
Was man besser nicht macht
- Inline CSS (style-Attribut, Style-Deklaration im <head>)
- Absolute Schriftgrößen (px und pt)
- Einzelne Hochkommas um Bild-Dateipfade
- CSS Hacks
- Vererbte Werte wiederholt definieren
- Einem Element feste Werte für Breite/Höhe, Padding und Rahmen zuweisen
- !important und position:absoulte
- Klassen und IDs nach dem Erscheinungsbild benennen (”rechte Spalte”, “grüner Container unten”)
Guter Stil
- CSS Deklarationen in einer Zeile (Naja, Geschmackssache)
- Kommentieren (wie überall ;)
- Die CSS Datei in Bereiche einteilen (Header, Footer, Navi, Sidebar, Container)
- Verwende Einrückungen, wenn es der Übersichtlichkeit zuträglich ist
- Ist Dein Code einfach lesbar?
- Verwende ”sprechende” Benennungen
- Sortiere Deine Deklarationen alphabetisch
- Ein ; ist für die letzte Deklaration nicht zwingend erforderlich
- Wenn etwas den Wert Null (0) hat, ist eine Maßangabe (px/em/%/…) nicht notwendig
- Verwende Container, Eigenschaften und Selektoren so selten wie möglich
- Wenn Du Selektoren gruppierst, kannst Du mehrere Elemente auf einmal selektieren
- Oft ist eine handliche Kurzform-Notation möglich
- Benutze kurze Hex-Deklarationen für Farben (#FFF vs. #FFFFFF)
- Verwende Pseudoklassen für Links in der LoVe/HAte Reihenfolge (Link, Visited, Hover, Active)
- Definiere den Innen- und Aussenabstand oder Rand von Elementen in der TRouBLed Reihenfolge (Top, Right, Bottom, Left)
- Du kannst Kindselektoren verwenden ;)
- Implementiere CSS Definitionen für unterschiedliche Medien-Typen
- Benenne Klassen und IDs nach Funktion, nicht nach Erscheinungsbild
- Beschäftige Dich mit der Vererbung von Regeln, CSS hat da ein ganz ausgefeiltes System
- Benutze Attribut Selektoren um Elemente nach Vorhandensein oder Wert eines Attributes zu selektieren
- Bestimme die Kapitälchen-Schreibweise mit CSS, nicht mit echten Großbuchstaben
- Wirf mal einen Blick auf die Coding-Guidelines von großen Firmen
- Suche Inspiration bei den Gurus des CSS Design
- Schau Dir mal Blueprint, ein CSS Framework an
Machs Dir einfach
- Benutze ein CSS Cheat Sheet
- Teste Dein CSS in den meist verbreitesten Browsern während des Codens, nicht danach ;)
- Wenn Du nicht sicher bist - jage dein CSS durch eine Validator
- Teste eingebettet, gehe live mit einer importierten CSS Datei
- Versuch mal einen CSS-Kompressor, die Dinger können Wunder wirken
- Schnapp Dir die Webdeveloper Toolbar für den Firefox
- Sammle wertvolle CSS Klassen in einer Bibliothek
- Benutze ein Framework wie “Blueprint“
Wusstest Du eigentlich…
- …das man einem Element mehrere Klassen zuweisen kann?
- …das man Konstanten in einem CSS Dokument verwenden kann?
- …das man Farbwerte prima über die Suchen/Ersetzen Funktion Deines Texteditors austauschen kann?
- …das man CSS auch dynamisch mit PHP generieren kann?
- …das es spezielle Proprozessoren für CSS-Dateien gibt? Switch ist zur Zeit das Ausgereifteste.
- …das man RSS Feeds mit CSS stylen kann?
- …das man mit CSS Spam vorbeugen kann?
- …das es Ideen für CSS Design Patterns gibt?
