Es ist wirklich leicht, sich zu fragen, wie Ihr CSS so ein Durcheinander sein konnte.
Manchmal ist es das Ergebnis schlampiger Codierung von Anfang an, manchmal liegt es an mehreren Hacks und Änderungen im Laufe der Zeit.
Was auch immer die Ursache sein mag, es muss nicht so sein. Das Schreiben von sauberem, überschaubarem CSS ist einfach, wenn Sie auf dem richtigen Fuß beginnen und dafür sorgen, dass Ihr Code später einfacher zu warten und zu bearbeiten ist.
Hier sind 11 Tipps, um den Prozess zu beschleunigen und CSS zu schreiben, das schlanker und schneller ist und Ihnen weniger Kopfschmerzen bereitet.
1. Bleiben Sie organisiert
Wie alles andere lohnt es sich, organisiert zu bleiben. Verwenden Sie eine kohärente Struktur, anstatt IDs und Klassen willkürlich in der Reihenfolge einzufügen, in der sie Ihnen in den Sinn kommen.
Es hilft Ihnen, den kaskadierenden Teil von CSS im Auge zu behalten und richtet Ihr Stylesheet so ein, dass es die Vorteile der Stilvererbung nutzt.
Deklarieren Sie zuerst Ihre generischsten Artikel, dann die weniger generischen und so weiter. Dadurch kann Ihr CSS Attribute ordnungsgemäß erben und Sie können einen bestimmten Stil bei Bedarf viel einfacher überschreiben. Sie können Ihr CSS später schneller bearbeiten, da es einer leicht lesbaren, logischen Struktur folgt.
Verwenden Sie eine Struktur, die für Sie am besten geeignet ist, und berücksichtigen Sie dabei zukünftige Änderungen und andere Entwickler.
- Zurücksetzen und Überschreiben
- Links und Typ
- Hauptlayout
- Sekundäre Layoutstrukturen
- Formularelemente
- Verschiedenes
2. Titel, Datum und Unterschrift
Teilen Sie anderen mit, wer Ihr CSS geschrieben hat, wann es geschrieben wurde und an wen sie sich wenden können, wenn sie Fragen dazu haben. Dies ist besonders nützlich beim Entwerfen von Vorlagen oder Themes.
Moment mal… worum geht es da? Farbmuster? Im Laufe der Jahre habe ich festgestellt, dass das Hinzufügen einer einfachen Liste gängiger Farben, die ich in meinen Stylesheets verwende, bei der anfänglichen Entwicklung und bei späteren Änderungen äußerst hilfreich ist.
Dies erspart Ihnen das Öffnen von Photoshop, um eine Farbe aus dem Design auszuprobieren, oder das Nachschlagen von Farben auf der Website Gestaltungsrichtlinie (falls vorhanden). Wenn Sie den HTML-Code für dieses bestimmte Blau benötigen, scrollen Sie einfach nach oben und kopieren Sie ihn.
3. Behalten Sie eine Vorlagenbibliothek
Sobald Sie sich für eine Struktur entschieden haben, entfernen Sie alles, was nicht generisch ist, und speichern Sie die Datei als CSS-Vorlage zur späteren Verwendung.
Sie können mehrere Versionen für verschiedene Zwecke speichern: ein zweispaltiges Layout, ein Blog-Layout, gedruckt, für Mobilgeräte usw. Koda (der Editor für OSX) hat eine tolle Sache Clips Funktion, mit der Sie dies ganz einfach tun können. Viele andere Editoren verfügen über eine ähnliche Funktion, aber auch ein einfacher Stapel von Textdateien funktioniert gut.
Es ist verrückt, jedes einzelne Ihrer Stylesheets von Grund auf neu zu schreiben, insbesondere wenn Sie in jedem die gleichen Konventionen und Methoden verwenden.
4. Verwenden Sie nützliche Namenskonventionen
Sie werden oben bemerken, dass ich einige Spalten-IDs deklariert und sie col-alpha und col-beta genannt habe. Warum nennen Sie sie nicht einfach „col-left“ und „col-right“? Denken Sie immer an zukünftige Änderungen.
Nächstes Jahr müssen Sie möglicherweise Ihre Website neu gestalten und die linke Spalte nach rechts verschieben. Sie sollten das Element in Ihrem HTML-Code und die ID in Ihrem Stylesheet nicht umbenennen müssen, nur um seine Position zu ändern.
Sicher, Sie könnten die linke Spalte einfach nach rechts verschieben und die ID als #col-left beibehalten, aber wie verwirrend ist das? Wenn die ID links lautet, sollte man damit rechnen, dass sie immer links steht. Dies lässt Ihnen nicht viel Spielraum, um später Dinge zu verschieben.
Einer der Hauptvorteile von CSS ist die Möglichkeit, Stile vom Inhalt zu trennen. Sie können Ihre Website komplett neu gestalten, indem Sie einfach das CSS ändern, ohne jemals den HTML-Code zu berühren. Also Machen Sie Ihr CSS nicht durcheinander, indem Sie einschränkende Namen verwenden. Verwenden Sie vielseitigere Namenskonventionen und bleiben Sie konsistent.
Lassen Sie positions- oder stilspezifische Wörter aus Ihren Stilen und IDs weg. Eine Klasse von .link-blue wird Ihnen entweder mehr Arbeit machen oder Ihr Stylesheet wirklich unordentlich machen, wenn Ihr Kunde Sie später auffordert, diese blauen Links in Orange zu ändern.
Benennen Sie Ihre Elemente nach dem, was sie sind, und nicht nach ihrem Aussehen. Beispielsweise ist .comment-blue viel weniger vielseitig als .comment-beta und .post-largefont ist einschränkender als .post-title.
5. Bindestriche statt Unterstriche
Bei älteren Browsern kann es zu Problemen mit Unterstrichen in CSS kommen oder diese werden überhaupt nicht unterstützt. Gewöhnen Sie sich für eine bessere Abwärtskompatibilität an, stattdessen Bindestriche zu verwenden. Verwenden Sie #col-alpha anstelle von #col_alpha.
6. Wiederholen Sie sich nicht
Verwenden Sie Attribute nach Möglichkeit wieder, indem Sie Elemente gruppieren, anstatt die Stile erneut zu deklarieren. Wenn Ihre h1- und h2-Elemente beide die gleiche Schriftgröße, Farbe und Ränder verwenden, gruppieren Sie sie mit einem Komma.
Das:
Sie sollten nach Möglichkeit auch Verknüpfungen verwenden. Halten Sie immer Ausschau nach Möglichkeiten, Elemente zu gruppieren und Deklarationsverknüpfungen zu verwenden.
Das alles können Sie erreichen:
mit nur diesem:
Es ist sehr wichtig, dass Sie die Reihenfolge verstehen, in der CSS diese Tastenkombinationen interpretiert: oben, rechts, unten, links. Ein großer Kreis im Uhrzeigersinn, beginnend mittags.
Wenn Ihre oberen und unteren bzw. linken und rechten Attribute identisch sind, müssen Sie außerdem nur zwei verwenden:
Dadurch werden die oberen und unteren Ränder auf 1em und die linken und rechten Ränder auf 0 gesetzt.
7. Optimieren Sie für Lightweight Style Sheets
Mit den oben genannten Tipps können Sie die Größe Ihrer Stylesheets erheblich reduzieren. Kleinere Geräte werden schneller geladen und sind einfacher zu warten und zu aktualisieren.
Schneiden Sie aus, was Sie nicht benötigen, und fassen Sie es, wo immer möglich, durch Gruppieren zusammen. Seien Sie auch vorsichtig, wenn Sie vorgefertigte CSS-Frameworks verwenden. Sie erben wahrscheinlich große Mengen, die nicht verwendet werden.
Noch ein kurzer Tipp für schlankes CSS: Sie müssen keine Maßeinheit angeben, wenn Sie Null verwenden. Wenn ein Rand auf 0 eingestellt ist, müssen Sie nicht 0px oder 0em sagen. Null ist Null, unabhängig von der Maßeinheit, und CSS versteht dies.
8. Schreiben Sie Ihre Basis für Gecko und passen Sie sie dann für Webkit und IE an
Sparen Sie sich die Mühe bei der Fehlerbehebung und schreiben Sie zuerst CSS für Gecko-Browser (Firefox, Mozilla, Netscape, Flock, Camino). Wenn Ihr CSS mit Gecko ordnungsgemäß funktioniert, ist es viel wahrscheinlicher, dass es in Webkit (Safari, Chrome) und Internet Explorer problemlos funktioniert.
9. Validieren
Gebrauch machen von Der kostenlose CSS-Validator des W3C. Wenn Sie nicht weiterkommen und Ihr Layout nicht das tut, was Sie möchten, wird Ihnen der CSS-Validator eine große Hilfe sein, um auf Fehler hinzuweisen.
10. Sorgen Sie für ein aufgeräumtes Zuhause
Trennen Sie browserspezifisches CSS in ein eigenes individuelles Stylesheet und fügen Sie es nach Bedarf mit Javascript, serverseitigem Code oder ein bedingte Kommentare. Verwenden Sie diese Methode, um schmutzige CSS-Hacks in Ihren Haupt-Stylesheets zu vermeiden. Dadurch bleibt Ihr Basis-CSS sauber und überschaubar.
Exklusiv für WDD geschrieben von Jeff Couturier
Befolgen Sie diese Methoden beim Codieren Ihrer Websites? Welche anderen Techniken verwenden Sie, um besseren Code zu erstellen?
