CSS-Kurzanleitung: 10 bewährte Vorgehensweisen für Ihr Stylesheet
Als Webdesigner müssen Sie häufig CSS-Dateien erstellen oder ändern. Angesichts der Entwicklungen und Innovationen in dieser Sprache ist es jedoch oft schwierig, sich für die beste Schreibweise zu entscheiden.
In dieser Kurzanleitung gebe ich Ihnen Tipps, wie Sie Ihre CSS-Datei so gestalten können, dass sie die Qualität der von Ihnen entwickelten Website nicht beeinträchtigt.
1. CSS-Reset einfügen
Eine der größten Herausforderungen bei der Entwicklung einer Website ist die Kompatibilität zwischen verschiedenen Browsern.
Das CSS-Reset ist ein Stylesheet, das diese Inkompatibilitätsfehler erheblich reduziert, indem es einen allgemeinen, aber leicht anpassbaren Stil bereitstellt.
Normalize.css ist ein modernes und präzises Reset, das auf HTML 5 basiert.
Sie müssen das Stilformular für dieses Reset-CSS zum Abschnitt <head> hinzufügen, bevor Sie Ihre Stile definieren.
2. Elemente organisieren
Um mehr Komfort zu erzielen, müssen Sie die Elemente in Ihrem Stylesheet organisieren. Das bedeutet, dass die Reihenfolge logisch sein muss.
Sie beginnen mit den Elementen des <body>, gefolgt von den Elementen des <header>, des <nav> und des <footer>.
3. Halten Sie sich an die Schreibkonventionen für IDs und Klassen
Es ist wichtig, dass Sie Ihre IDs und Klassen korrekt benennen. Insbesondere müssen sie:
Nachhaltig sein
Klare Darstellung des betreffenden Elements
Sie sollten beispielsweise vermeiden, eine Klasse „title-red” zu nennen, da das Element an dem Tag, an dem sich die Farbe des Titels ändert, nicht mehr die Klasse repräsentiert, wenn sich der Klassenname ändert.
Seien Sie konsistent bei der Benennung Ihrer Elemente. Verwenden Sie beispielsweise dasselbe Zeichen, um zwei Wörter zu trennen: „ . secondary-nav” oder „ . secondaryNav”.
4. Gruppieren von IDs und Klassen einer Komponente
Wenn eine HTML-Komponente unterschiedliche IDs und Klassen hat, sollten Sie diese in Ihrer CSS-Datei gruppieren. So lassen sich Fehler leichter finden.
5. Verwenden Sie den hexadezimalen Farbcode
Um einem Element eine Farbe zuzuweisen, haben Sie zwei Möglichkeiten:
Entweder verwenden Sie den Farbnamen: color: green
Oder Sie verwenden den Hexadezimalcode: color: #008000
Ich empfehle jedoch die Verwendung des Hexadezimalcodes, da dieser 4 bis 5 Mal schneller geladen werden kann als der Farbnamen.
6. Verwendung von CSS-Präfixen aus Browsern
Jeder Browser hat viele Besonderheiten auf der Ebene der Stile.
Seit der Einführung von CSS3 müssen Sie Vendor-Präfixe in Ihre CSS-Tabelle einfügen, damit jeder Browser die von Ihnen implementierten Funktionen und Stile berücksichtigt. Andernfalls können Fehler auftreten.
Hier ist die Liste der wichtigsten Herstellerpräfixe:
Chrome : webkit
Safari: webkit
iOS: webkit
Firefox: moz
Opera: o
7. Informationen zum Stylesheet bereitstellen
Mit der Zeit werden Sie nicht mehr die einzige Person sein, die das CSS-Stylesheet verwendet, an dem Sie arbeiten.
Daher ist es wichtig, die folgenden Informationen anzugeben:
Der Autor
URL
Name des Themas, falls verfügbar
Eine Beschreibung
Schlüsselwörter
Wenn jemand anderes die Datei verwendet, kann er sich für weitere Informationen an den Ersteller wenden.
8. Kommentare und Anmerkungen einfügen
Zur besseren Organisation und leichteren Auffindbarkeit empfiehlt es sich, Kommentare und Anmerkungen in Ihr Stylesheet aufzunehmen.
Kommentare können beispielsweise verschiedene Teile voneinander abgrenzen, und Anmerkungen können Details zu einem bestimmten Stil liefern.
Im Falle eines Fehlers können Sie schnell zum entsprechenden Teil Ihrer Datei gelangen.
9. Komprimieren Sie die CSS-Datei
Ihre CSS-Datei kann aufgrund von Zeilenumbrüchen, Leerzeichen, redundanten Stilen usw. Auswirkungen auf die Ladegeschwindigkeit der Website haben.
Wenn Sie beispielsweise feststellen, dass die Ladezeit ungewöhnlich lang ist, komprimieren Sie Ihre CSS-Datei mit einem CSS-Komprimierungstool.
10. Überprüfen und Validieren des CSS-Codes
Um zu überprüfen, ob Ihr Stylesheet richtig strukturiert ist, können Sie den CSS-Validierungsdienst des W3C nutzen.
Mit diesem Tool können Sie auch mögliche Fehler erkennen und so viel Zeit sparen.