Anzeige
Anzeige
Ratgeber

Mit diesen CSS-Konventionen macht Debuggen Spaß

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.

Von Andreas Domin
4 Min.
Artikel merken
Anzeige
Anzeige

(Foto: Shutterstock)

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

Anzeige
Anzeige

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:

Anzeige
Anzeige
// 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.

Anzeige
Anzeige
.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.

Anzeige
Anzeige
.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.

Anzeige
Anzeige
.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.

Anzeige
Anzeige
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;
...

Abschnitte mit Kommentaren versehen

Die Kommentarfunktion ist eines der einfachsten und zugleich wichtigsten Werkzeuge für Entwickler, um Code übersichtlicher zu machen. Dennoch gerät sie schnell in Vergessenheit und kostet am Ende mehr Zeit als das Schreiben der Kommentare benötigt hätte.

Anzeige
Anzeige

Um Kommentare in CSS sinnvoll einzusetzen, können zusammengehörige Klassen zu Abschnitten zusammengefasst werden. Diese Abschnitte können dann wunderbar mit passenden Kommentaren versehen werden:

/* COLUMNS */
...
/* HEADER */
...
/* FOOTER */
...

Eine solide Dateistruktur

Bei einem kleinen Ein-Mann-Projekt müssen nicht zwangsweise mehrere CSS-Dateien angelegt werden. Doch je größer ein Team und ein Projekt wird, desto wichtiger wird diese Trennung. So arbeiten nicht mehrere Entwickler womöglich gleichzeitig an einer Styles-Datei. Jeder kann so die Verantwortung über einzelne CSS-Dateien erhalten. Eine mögliche Dateistruktur könnten dabei wie folgt aussehen:

  • layouts.css: Essentielle Styles für das Seitenlayout
  • typography.css: Alles zu Schriften: Textgrößen, Schriftarten, usw.
  • forms.css: Alles Wichtige für Formulare
  • tables.css: Styles zu Tabellen
  • lists.css: Styles zu Listen

Deine Struktur kann sich von dieser natürlich unterscheiden. Sie ist nur ein Beispiel und soll eine grobe Richtung vorgeben. Es ist auf jeden Fall sinnvoll, eine thematisch passende Aufspaltung auf verschiedene Dateien vorzunehmen.

Anzeige
Anzeige

Aber auch eine CSS-Datei an sich sollte eine Struktur haben. Zu empfehlen ist eine Art Top-Down-Struktur: also von wichtig zu unwichtig oder von oben nach unten (bezogen auf das Seitenlayout). So entstehen Abschnitte, die wieder gut kommentiert werden können.

/* HEADER */
...
/* NAVBAR */
...
/* MAIN CONTENT */
...

Die Struktur in der typography.css könnte mit einer entsprechenden Top-Down-Struktur wie folgt aussehen.

/* HEADLINES */
...
h1 { }
h2 { }
...
/* TEXT */
...
/* QUOTES */
...

Fazit

Die hier aufgezählten Konventionen zeigen letztlich nur einige Möglichkeiten, wie du eine gute Struktur in deinen CSS-Code bekommst. Insgesamt ist es also gar nicht so wichtig, ob du die gelisteten Konventionen bis ins kleinste Detail einhältst. Wirklich wichtig ist nur, sich für eine einheitliche Konvention zu entscheiden und diese auch konsequent einzuhalten. Auch und vor allem, wenn hinter einem Projekt ein ganzes Team steht.

Anzeige
Anzeige

Passend zu dem Thema:

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Kommentare

Community-Richtlinien

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Kommentar abgeben

Melde dich an, um Kommentare schreiben und mit anderen Leser:innen und unseren Autor:innen diskutieren zu können.

Anmelden und kommentieren

Du hast noch keinen t3n-Account? Hier registrieren

Anzeige
Anzeige