So optimieren Sie CSS mit Code Style Guides

Wenn Designer über Styleguides sprechen, meinen sie das normalerweise ein vereinbartes Handbuch auf der stimmiges aussehen und fühlen einer Website oder Anwendung, mit einem gut gestalteten Farbschema, Typografie und Benutzeroberfläche Das wird im gesamten Projekt verwendet.

Es gibt noch einen anderen Styleguide, den wir auch für die Webentwicklung verwenden können. Er ist genauso wichtig, wird aber viel seltener diskutiert: Styleguides für den Code selbst. Code Style Guides richten sich eher an Entwickler als an Designer. Ihr Hauptziel ist die Optimierung von CSS oder anderem Code.

Wenn Sie die richtigen Code-Style-Guides einsetzen, erhalten Sie eine besser organisierte, konsistente Codebasis, verbesserte Lesbarkeit des Codes und wartungsfreundlicherer Code. Es ist kein Zufall, dass große Tech-Unternehmen wie Google, AirBnB oder Dropbox sie gut nutzen.

In diesem Beitrag wird gezeigt, wie wir CSS mithilfe von CSS-Code-Style-Guides intelligent optimieren können.

Code-Style-Guides vs. Pattern-Bibliotheken

In unserer Branche besteht eine gewisse Unsicherheit darüber, was wir als Stilführer bezeichnen können. Eine Liste getrennt verwendet es beispielsweise synonym mit dem Begriff Musterbibliothek In diesem Artikel können wir diese Definition auch in anderen Beiträgen finden.

Auf der anderen Seite gibt es auch Veröffentlichungen wie CSS Tricks oder Brad Frosts Blog, die Codestilleitfäden von Musterbibliotheken unterscheiden. Dieser letztere Ansatz bringt uns wahrscheinlich einer gut optimierten Website näher Es erlaubt uns, Code und Design getrennt zu behandeln, also werden wir das in diesem post verwenden.

Sowohl Code-Style-Guides als auch Pattern-Bibliotheken enthalten eine Stilstrategie, jedoch eine andere. Musterbibliotheken wie Bootstrap, Zurb Foundation, BBCs Global Experience Language oder MailChimps Musterbibliothek bieten uns eine Benutzeroberfläche mit vorgefertigten CSS-Klassen, Typografie, Farbschema, manchmal einem Rastersystem und anderen Entwurfsmustern.

CSS-Code-Style-Guides wie Evernotes oder ThinkUp (oder die im Intro genannten) enthalten Regeln zum Schreiben von CSS darunter Dinge wie Namenskonventionen, Dateistruktur, Eigenschaftsreihenfolge, Code-Formatierung, und andere.

Beachten Sie, dass Living Style Guide-Generatoren wie KSS, Styledown oder Pattern Lab verwendet werden, Musterbibliotheken erzeugen und nicht Codierungsstil-Anleitungen. Musterbibliotheken sind zwar auch sehr nützlich und erhöhen den Webentwicklungsprozess, erlauben uns jedoch nicht, den Code selbst zu optimieren.

Erstellen Sie Ihren CSS-Code-Style Guide

Das endgültige Ziel eines CSS-Code-Style-Leitfadens besteht darin, sicherzustellen, dass wir mit einer konsistenten, leicht zu debuggenden Codebasis arbeiten können, die von Entwicklern geschrieben wurde, die alle dieselben Code-Styling-Regeln einhalten. Das Erstellen eines CSS-Code-Style-Guides kann etwas Zeit in Anspruch nehmen, aber es lohnt sich, da wir dies nur einmal tun müssen. Dann können wir den gleichen Style Guide für verschiedene Projekte verwenden.

Es ist wichtig zu wissen, dass die beste Stilführung gilt enthalten nicht nur die Stilregeln selbst, sondern auch Beispiele von gutem und schlechtem Gebrauch, da auf diese Weise Entwickler die Regeln intuitiver verstehen können.

Zum Beispiel zeigt AirBnB gute und schlechte Beispiele für Entwickler auf die folgende, leicht verdauliche Weise:

Dateistruktur

Zuerst müssen wir eine Logik finden, nach der wir unsere CSS-Dateien organisieren werden. Für kleinere Projekte kann eine CSS-Datei ausreichen, für größere jedoch Es ist immer besser, den Code aufzubrechen, und Verketten Sie die separaten Dateien später in der Produktion.

Einige Style-Guides wie ThinkUp's warnen uns auch davor keine Inline- oder Embedded-Styles es sei denn, es ist unvermeidlich; Es ist auch eine nützliche Regel, die sich lohnt.

Verschachtelung

Verschachtelung ist eine großartige Funktion in CSS, kann jedoch manchmal außer Kontrolle geraten. Niemand fühlt sich besonders glücklich, vor allem während eines frustrierenden Debugging-Prozesses, der auf extra lange Selektoren wie diese stößt:

 .class_1 .class_2 # id_1 # id_2 li ein span color: #bad; 

So ist es immer gut zu eine vernünftige Verschachtelungsgrenze einrichten, GitHub wählte zum Beispiel drei Ebenen in seinem Styleguide. Durch die Begrenzung der Verschachtelung können wir uns auch dazu zwingen, einen besser strukturierten Code zu schreiben.

Benennungsregeln

Die Verwendung kohärenter Benennungsregeln für CSS-Selektoren ist wichtig, wenn wir unseren Code Monate oder sogar Jahre später verstehen möchten. Es gibt viele Lösungen und Es gibt nur eine strikte Regel, der wir folgen müssen ein Selektorname kann nicht mit einer Zahl beginnen.

Die vier gängigsten Stile für die Benennung von Selektoren sind .Kleinbuchstaben, .under_scores, .Bindestrich, und .lowerCamelCase. Es ist in Ordnung, eine von ihnen auszuwählen, aber wir müssen im gesamten Projekt der gleichen Logik folgen.

Verwenden nur semantische Selektornamen ist auch wichtig, wenn wir wollen haben sinnvollen Code. Zum Beispiel statt .roter Knopf (was nicht zeigt, was die Schaltfläche macht), ist es besser, die .Alarm-Taste name (was sagt, was es tut). Auf diese Weise ermöglichen wir Entwicklern (und unserem zukünftigen Ich), zu verstehen, was die Schaltfläche tut.

Außerdem Wenn wir in der Zukunft die Farbe von Rot in etwas anderes ändern möchten, können wir dies problemlos tun. Es gibt auch vorgefertigte CSS-Namenskonventionen, beispielsweise die BEM-Konvention (Block, Element, Modifier) führen zu einer konsistenten Namensstruktur mit eindeutigen und aussagekräftigen Namen.

Formatierungsregeln

Die Formatierung von Code umfasst Dinge wie die Verwendung von Leerzeichen, Tabulatoren, Einrückungen, Abständen, Zeilenumbrüchen usw. Es gibt keine allgemein gute oder schlechte Methode für die Formatierung. Die einzige Faustregel lautet: Wählen Sie kohärente Regeln, die zu einem lesbaren Code führen, und folge ihnen durch.

Dropbox beispielsweise erfordert, dass Entwickler Leerzeichen nach dem Doppelpunkt in Eigenschaftsdeklarationen setzen, während Evernote zwei Leerzeichen für die Einrückung verwendet. Wir können so viele Formatierungsregeln aufstellen, wie wir möchten, aber nie mehr als es möglich ist zu begreifen.

Deklarationsauftrag

Bestellte Dinge sind immer leichter zu durchschauen und Bestellung von CSS-Deklarationen (Eigenschaften mit ihren Werten) Nach einer Regel, die Sinn macht, ergibt sich ein besser organisierter Code.

Schauen Sie sich zum Beispiel die Eigenschaftsreihenfolge von WordPress an. Sie definiert die folgende einfache, aber logische Grundlage für die Reihenfolge, in der Eigenschaften nach ihrer Bedeutung gruppiert werden:

1. Anzeige
2. Positionierung
3. Box-Modell
4. Farben und Typografie
5. Andere

Einheiten und Werte

Die Entscheidung, wie Einheiten und Werte verwendet werden sollen, ist nicht nur wichtig, um ein konsistentes Code-Aussehen zu erzielen. Wenn dies nicht der Fall ist, kann es passieren, dass wir etwas Seltsames haben

Stellen Sie sich eine Website vor, die abwechselnd verwendet wird px, em, und rem Längenmessungen. Es sieht nicht nur im Code-Editor schlecht aus, aber höchstwahrscheinlich werden einige Elemente auf dieser Site überraschend klein oder groß sein.

Wir müssen auch Entscheidungen über Farbwerte treffen (hexadezimal, rgb oder hsl) und darüber, ob und nach welchen Regeln Abkürzungseigenschaften verwendet werden sollen. Es gibt eine Anweisung, die in jedem CSS-Code-Style-Guide enthalten ist, den ich getroffen habe, d. H. Geben Sie keine Einheiten für 0-Werte an (wirklich, einfach nicht).

.Klasse // gute Marge: 0; // schlechte Marge: 0px; // schlechte Marge: 0em; // schlechte Marge: 0rem; 

Kommentieren

Kommentarcode ist in allen Sprachen, aber in CSS, unerlässlich Es erleichtert nicht nur das Debuggen und das Erstellen von Dokumentationen, sondern unterteilt auch die CSS-Regeln in logische Gruppen. Wir können entweder die verwenden / *… * / oder der //… Notationsstil für Kommentare in CSS ist das Wichtigste bleib konsistent mit Kommentaren während unseres Projekts.

Idiomatic CSS zum Beispiel etabliert ein aussagekräftiges Kommentarsystem, das sogar einige grundlegende ASCII-Grafiken verwendet und zu schön strukturiertem Code führt: