Gutes CSS schreiben

Veröffentlicht: 2016-10-17

Ich versuche immer, neue Dinge zu lernen. Ich versuche jedoch auch, Wege zu finden, um die Art und Weise, wie ich Dinge bereits mache, zu verbessern. Sowohl bei meinem Vollzeitjob als auch bei Kundenprojekten wollte ich immer mein CSS verbessern. Ich hatte immer das Gefühl, dass ich ziemlich gut in CSS bin, aber ich fand es immer unordentlich zu lesen und oft schwer zu warten.

Was ich versucht habe, ist herauszufinden, was gutes, lesbares und wartbares CSS ausmacht. Ich denke, ich habe mir einige Möglichkeiten ausgedacht (und gefunden), um dies alles möglich zu machen.

Die Probleme

Es gibt mehrere Dinge, die mich an CSS stören. Die häufigsten Ärgernisse, die ich habe, sind:

  • gemeinsamen Code wiederholen
  • Browser-Präfixe
  • Mangel an Kommentaren
  • über qualifizierte Selektoren
  • schlechte Klassennamen

Bei meinen persönlichen Projekten übernehme ich die volle Verantwortung für meinen Code. Ich kommentiere mein CSS selten und behandle es oft als nachträglichen Einfall. Das ist einfach falsch.

Lange Zeit dachte ich, dass meine Klassennamen „semantisch“ sind und dass nur ich die Dinge mache, also gibt es keine Notwendigkeit, den Code oder kleine „Hacks“ oder irgendetwas zu erklären.

Die Rückkehr zum Code in einem langjährigen Projekt beweist schnell, dass diese Theorie sehr falsch ist.

Wenn es um Code bei der Arbeit geht, kann ich nicht die ganze Schuld auf mich nehmen. Tatsächlich ist ein Teil des Problems die Anzahl der Leute, die dort ihre Hände hatten. Derzeit besteht unser Team aus sieben Mitarbeitern, die irgendwann CSS für unsere Websites geschrieben haben, und weitere 6-8, die dazu kamen und gingen Jahre. Jedes Mitglied des Teams verfügt über unterschiedliche Kenntnisse und Fähigkeiten in Bezug auf CSS.

Außerdem ist, wie es oft bei langjährigen Projekten der Fall ist, ein Teil des Codes alt . Vieles davon ist vor CSS3 oder vor dem Trend, der vor 5 Jahren noch cool war. In beiden Fällen gab es zum Zeitpunkt der Erstellung oft unterschiedliche Vorgehensweisen und in einigen Fällen einen natürlichen Mangel an Wissen.

Ich habe auch erfahren, dass einige Programmierer darauf bestehen, dass ihr Code „selbstdokumentierend“ ist. Wenn Sie mit diesem Begriff nicht vertraut sind, bedeutet er „Mein Code hat keine Kommentare“.

Lösungen

Obwohl nichts perfekt ist, glaube ich, dass wir Dinge tun können, um unseren Code zu verbessern. Ich habe vor einiger Zeit CSS-Richtlinien von Harry Roberts entdeckt. Itt hält sich an das Versprechen von „High-Level-Ratschlägen und Richtlinien zum Schreiben von vernünftigem, verwaltbarem, skalierbarem CSS“.

Bemerkungen

Während die CSS-Richtlinien Einzelheiten zu Kommentarstilen enthalten, versuche ich persönlich nur, etwas hinzuzufügen, um mir in Zukunft mitzuteilen, was ich gedacht habe. Ich beginne jede Komponente mit einem Kommentar, der den Titel darstellt, der Details zur Absicht der Komponente enthält.

Wenn ich einen Präprozessor verwende, gestalte ich bestimmte Kommentare so, dass sie entweder in das CSS aufgenommen oder vom Präprozessor übersprungen werden. Ich arbeite immer noch an diesem Teil und versuche, es mir zur Gewohnheit zu machen, etwas , irgendetwas zu setzen.

Objektorientierung

Objektorientierung ist ein Programmierparadigma, das große Dinge in kleine Dinge zerlegt. Aus Wikipedia:

Objektorientierte Programmierung (OOP) ist ein Programmierparadigma, das das Konzept von „Objekten“ darstellt, […] die normalerweise Instanzen von Klassen sind, [und] verwendet werden, um miteinander zu interagieren, um Anwendungen und Computerprogramme zu entwerfen.

Wenn es um CSS geht, nennen wir dies objektorientiertes CSS oder OOCSS . Das Grundkonzept trennt die Struktur des Elements von der Haut des Elements. Dies bedeutet, dass wir alle wiederkehrenden Entwurfsmuster problemlos wiederverwenden können, ohne unbedingt gleichzeitig die spezifischen Implementierungsdetails wiederverwenden zu müssen. OOCSS konzentriert sich stark auf die Wiederverwendung von Code, was uns schneller macht und die Größe unserer Codebasis gering halten kann.

Ich denke an strukturelle Aspekte wie Skelette; Gemeinsame Rahmen, die Konstrukte ergeben, die als Objekt bekannt sind. Diese Objekte sind einfache Gestaltungsmuster, die frei von jeglicher Kosmetik sind. Wir abstrahieren die Struktur von einer Menge von Komponenten, um ein generisches Objekt zu haben.

Wir fügen unserer Struktur dann optional die „Haut“-Ebene hinzu, damit wir den Abstraktionen ein bestimmtes Aussehen und Gefühl verleihen können. Zum Beispiel (entnommen aus den CSS-Richtlinien):

 /**
 * Ein einfaches, designfreies Schaltflächenobjekt. Erweitern Sie dieses Objekt mit einem `.btn--*`-Skin
 * Klasse.
 */
.btn {
    Anzeige: Inline-Block;
    Polsterung: 1em 2em;
    vertikale Ausrichtung: Mitte;
}

/**
 * Haut der positiven Tasten. Erweitert `.btn`.
 */
.btn--positiv {
    Hintergrundfarbe: grün;
    Farbe weiß;
}

/**
 * Haut der negativen Tasten. Erweitert `.btn`.
 */
.btn-negativ {
    Hintergrundfarbe: rot;
    Farbe weiß;
}

Hier sehen wir, wie die .btn -Klasse einem Element einfach Struktur verleiht, aber nichts mit kosmetischen Dingen zu tun hat. Wir können .btn mit einer zweiten Klasse wie .btn .btn--positve , um diesem Element ein spezifischeres Styling zu geben:

 <button class="btn btn--positive">OK</button>

Ich verwende lieber mehrere Klassen in meinem HTML als etwas wie @extend in einem Präprozessor. Dies gibt mir mehr Sichtbarkeit in meinem HTML, sodass ich schnell sehen kann, welche Klassen auf mein Element angewendet werden. Es bedeutet auch, dass meine Klassen nicht eng an andere Stile in meinem CSS gebunden sind. Es hilft OOCSS gewissermaßen, den Konzepten der Kapselung zu folgen.

BEM

BEM ( Block, Element, Modifier ) ​​ist eine bei Yandex entwickelte Front-End-Methodik. BEM ist eigentlich eine sehr vollständige Methodik, und ich habe mich ehrlich gesagt nicht mit allen Details befasst, aber was mich interessiert, ist einfach die Namenskonvention.

Ich verwende BEM- ähnliche Namenskonventionen. Das Konzept ist das gleiche, aber die genaue Syntax kann leicht abweichen.

BEM teilt Klassen in drei Gruppen ein:

  1. Block: die Wurzel oder Basis einer Komponente
  2. Element: eine Komponente innerhalb eines Blocks
  3. Modifikator: eine Variation oder Erweiterung des Blocks

Eine sehr einfache Analogie ( kein Beispiel):

 .Hund {}
.Hundeschwanz {}
.dog--klein {}

Elemente werden durch zwei Unterstriche (__) und Modifikatoren durch zwei Bindestriche (–) getrennt.

In der obigen Analogie sehen wir, dass .dog der Block ist, die Wurzel des Elements. Dann ist .dog__tail ein Element, es ist ein kleinerer Teil eines .dog Blocks. Schließlich ist .dog--small Modifikator, eine spezifische Variante des .dog Blocks. Sie können auch Modifikatoren auf Elemente anwenden. zum Beispiel könnten wir .dog__tail--short haben, um wiederum eine Variation des dog__tail Elements anzugeben.

In einigen Fällen möchte ich möglicherweise mehrere Wörter für Blöcke, Elemente oder Modifikatoren. Diese werden in jedem Fall durch einen einzelnen Bindestrich (-) getrennt und Klassen immer klein geschrieben.

Präprozessoren

Ich habe viel Zeit damit verbracht, CSS-Präprozessoren in meinen Arbeitsablauf zu integrieren, und bisher war es unglaublich wertvoll. CSS-Präprozessoren nehmen Code, der in einer vorverarbeiteten Sprache geschrieben ist, und konvertieren ihn in das gute alte CSS. Sie sind kein CSS, was bedeutet, dass sie nicht an die gleichen Regeln und Einschränkungen von CSS gebunden sind. Obwohl CSS großartig ist, erlaubt es uns nicht immer, die Dinge zu tun, die wir gerne tun würden.

Zum Beispiel wäre eine Sache, die in CSS wirklich nett wäre, variables . Vielleicht möchten Sie, dass der linke Rand eines Elements der Breite eines anderen entspricht, und plötzlich entscheidet jemand, dass diese Zahlen geändert werden müssen. Da es sich um dieselbe Nummer handelt und Ihr Layout möglicherweise auf dieser Nummer basiert, müssen Sie sie an mehr als einer Stelle ändern. Aber mit einer Variablen könnten Sie sie an nur einer Stelle ändern und sie im gesamten Layout widerspiegeln. Natürlich gibt es zu Präprozessoren viel mehr als nur Variablen, aber das ist ein Anfang!

Sie müssen offensichtlich keinen Präprozessor verwenden, aber ich denke, Sie werden feststellen, dass die meisten Leute, die dies tun, nicht zurückkehren werden. Ich weiß, ich werde nicht. Der Gewinn an Flexibilität und die verbesserte Lesbarkeit sind etwas, auf das ich einfach nicht verzichten kann. Einfach in der Lage zu sein, Variablen und Mixins zu verwenden, reicht aus, um mich süchtig zu machen.

Es sind mehrere Präprozessoren verfügbar, aber die einzigen zwei, die ich mir wirklich angesehen und überhaupt verwendet habe, sind LESS und SASS . Bitte werfen Sie einen Blick darauf und erwägen Sie, eines davon zu Ihrem Workflow hinzuzufügen, Sie werden nicht zurückblicken.

Abschließend

Mein eigentlicher Punkt hier ist, dass CSS besser sein kann . Alles kann besser werden. Jemand hat mir kürzlich in einem Kommentar zu einem Beitrag auf Reddit gesagt, dass „CSS keine Semantik hat“. Ich widerspreche von ganzem Herzen. CSS kann zu 100% ohne Zweifel semantisch sein.

Die Verwendung von OOCSS und BEM verleiht Ihrem CSS tatsächlich eine sehr semantische Bedeutung. Das bedeutet nicht, dass es auf Anhieb einfach ist, aber es lohnt sich, es zu erkunden. Kombinieren Sie das mit CSS-Präprozessoren, und Sie haben das Potenzial für gut lesbares, wartbares und skalierbares CSS .

Ich möchte auch darauf hinweisen, dass dies nicht nur Ihr CSS (vorverarbeitet oder nicht) lesbarer macht, sondern auch Ihren HTML-Code lesbarer macht, indem semantische Klassennamen auf Elemente angewendet werden.

TL;DR

Ok, das war vielleicht viel – um es zusammenzufassen, schreiben Sie besseres CSS, indem Sie Folgendes tun:

Objektorientiertes CSS :

  • Jede Klasse macht eine Sache – sie macht es gut, sie macht es richtig

Klassennamen im Stil von Blöcken, Elementen und Modifikatoren (BEM) :

  • Block: .grid
  • Element: .grid__item (2 Unterstriche)
  • Modifikator: .grid--wide (2 Bindestriche)

Präprozessoren sind genial :

  • sieh sie dir an: WENIGER – SASS
  • oder finden Sie andere: 8 CSS-Präprozessoren zur Beschleunigung der Entwicklungszeit