Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

Mit diesen CSS-Konventionen macht Debuggen Spaß

(Foto: Shutterstock)

Die Verwendung guter Konventionen ist bei der Entwicklung unverzichtbar. Wenn du mit CSS arbeitest und nie das findest, was du suchst, solltest du dir diese Konventionen einmal näher anschauen.

Wie wichtig Konventionen sind, muss ich keinem Entwickler erklären. Wenn jeder Variablen benennen oder Code einrücken würde, wie er will, dann wäre jedes Projekt zum Scheitern verurteilt. Da ist auch CSS keine Ausnahme. Damit euer Projekt nicht im Chaos endet und überflüssige Arbeit beim Debuggen vermieden werden kann, sollten einige der folgenden Konventionen eingesetzt werden.

CSS-Namenskonventionen

Kein Camel-Case

Die Benennung eines Objekts in CSS sollte nicht in Camel-Case erfolgen. Auch wenn das in Javascript so üblich ist, sollte in CSS darauf verzichtet werden. Ein Grund dafür ist die Art und Weise, wie in CSS Eigenschaften benannt sind.

// Falsch
.postTitle {
  font-weight: normal; 
}

Stattdessen sollten Objekte mit Bindestrichen benannt werden:

// Richtig
.post-title {
  font-weight: normal;
}

Doch bei der Namensvergabe eines Objekts gibt es noch einiges mehr zu beachten. Denn für die Benennung von Eltern und zugehörigen Kindern sowie Attributen kann man sich das Leben mit den folgenden Konventionen deutlich leichter machen.

.noun {} // Objekt z.B. .header
.noun {} // Eltern z.B. .post
.noun-noun {} // Kind z.B. .post-title
.adjective-noun {} // Unterklasse von „noun“ z.B. .left-button
// Attribute
.adjective {} // z.B. .inline
.is-state {} // z.B. .is-shown

Da die Unterklasse hier den „button“ nur erweitern soll, werden die Eigenschaften für den normalen Button natürlich nicht erneut beim Beschreiben des linken Buttons wiederholt. Dadurch müssen dem HTML-Element beide Klassen zugeordnet werden:

<button class="button left-button"></button>

Alternative BEM-Namenskonvention

Wie bei so vielem gibt es auch bei Konventionen mehr als nur einen Ansatz. Neben der oben genannten „Bindestrich-Schreibweise“ ist auch die sogenannte BEM-Notation eine häufig verwendete Alternative. BEM steht dabei für Block, Element und Modifier. Für eine möglichst einfache Erklärung dieser Konvention ziehen wir ein Auto als Beispiel heran. Dieses wollen wir nun mit passenden Eigenschaften beschreiben. Dabei ist das Auto selbst ein Block.

.car {}

Das „E“ beschreibt die Elemente des Autos. Das können Autoreifen, Türen oder auch die Scheinwerfer sein. Diese werden mit zwei Unterstrichen an den Block angehängt:

.car__wheel {}
.car__door {}
.car__headlight {}

Zu guter Letzt bleibt das „M“. Mit diesem kann das Auto modifiziert werden. Das kann ganz einfach eine Farbe sein. Diese wird dann mit zwei Bindestrichen angehängt:

.car--black {}
.car--blue {}

Doch es können auch die Elemente modifiziert werden. Vielleicht will man – warum auch immer – für seine Autotür eine separate Farbe haben.

.car__door--blue {}
.car__door--orange {}

Mehr Details zu BEM findest du hier.

Zusätzliche Javascript-Klassen verwenden

Angenommen, du verwendest keine separaten Klassen für Javascript, dann verursacht das zwei Probleme. Einerseits riskierst du einen Fehler, wenn du die Klasse umbenennst und vergisst, das im Javascript-Code anzupassen und andererseits kannst du nicht direkt erkennen, ob auf dein HTML-Element innerhalb von Javascript zugegriffen wird. Um beide Probleme zu vermeiden, kann ein einheitlicher, sinnvoller Prefix vor einer weiteren Klasse gesetzt werden:

<button class="button js-button"></button>

Redundanten Code vermeiden und Elemente kombinieren

Um doppelt und dreifachen CSS-Code zu vermeiden, können CSS-Elemente kombiniert werden.

h1, h2, h3 {
  color: #111;
  font-weight: normal;
}

Eine weitere, sehr gute Möglichkeit, den Code schlanker zu gestalten, sind Eigenschaften wie Padding oder Margin. So kann aus vier Zeilen...

...
padding-top: 5px;
padding-right: 3px;
padding-bottom: 2px;
padding-left: 8px;
...

... eine Zeile Code werden:

...
padding: 5px 3px 2px 8px;
...

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.