Webdesign Grundlagen
HTML & CSS Style Guide für übersichtlichen Code

Strukturiere Deinen HTML/CSS-Code und Du kannst ihn besser lesen und sparst Zeit. Dieser Artikel stellt Dir HTML/CSS-Guidlines und die wichtigsten Regeln vor.

Code, der sauber aussieht, fühlt sich gut an.

Die 7 wichtigsten Style Guide-Regeln

  • Strukturiere Deinen Code einheitlich mit zwei einrückenden Leerzeichen.
  • Schreib alles in Kleinbuchstaben: HTML, Attribute, CSS Selektoren, Werte.
  • Kommentiere Deinen Code, damit Du und andere diesen auch später noch verstehen.
  • Gib jedem HTML/CSS-Element eine eigene Zeile.
  • Benutze einfache doppelte Anführungszeichen um “werte” anzugeben.
  • Benenne CSS-Klassen verständlich und vermeide Abkürzungen.
  • Nutze nur das Minus, um CSS-ID und -Klassen zu strukturieren.

HTML/CSS Style Guide

Große Unternehmen wie WordPress, GitHub oder Google veröffentlichen Ihre eigenen HTML/CSS Style Guides. Diese findest Du über die folgenden Links:

CSS Kommentare

Inhaltsverzeichnis

/**
 * CONTENTS
 *
 * SETTINGS
 * Global...............Globally-available variables and config.
 *
 * TOOLS
 * Mixins...............Useful mixins.
 *
 * GENERIC
 * Normalize.css........A level playing field.
 * Box-sizing...........Better default `box-sizing`.
 *
 * BASE
 * Headings.............H1–H6 styles.
 *
 * OBJECTS
 * Wrappers.............Wrapping and constraining elements.
 *
 * COMPONENTS
 * Page-head............The main page header.
 * Page-foot............The main page footer.
 * Buttons..............Button elements.
 *
 * TRUMPS
 * Text.................Text helpers.
 */

Lange CSS Kommentare

/**
 * Ich bin ein langer Kommentar. Ich beschreibe im Detail den folgenden CSS-
 * Code. Ich packe nicht mehr als 80 Zeichen pro Zeile damit ich lesbar bleibe.
 */

CSS – Arbeiten mit Überschriften

/*------------------------------------*\
    # Überschrift
\*------------------------------------*/