EMZETT.
Login

Emzett Wiki

HTML + CSS: CSS sauber organisieren

Properties1
tagsprogrammiersprachen, html-css

4 Min. Lesezeit

Kurz: Kleine Seiten verzeihen Chaos, große nicht. Mit ein paar Gewohnheiten bleibt dein CSS auch nach Monaten verständlich.

Teil des Kurses HTML + CSS

Kapitel 25 von 27 im Kurs HTML + CSS (Abschnitt „Praxis“). Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Kleine Seiten verzeihen Chaos, große nicht. Mit ein paar Gewohnheiten bleibt dein CSS auch nach Monaten verständlich.

Ein Reset und gute Grundwerte

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { line-height: 1.6; font-family: system-ui, sans-serif; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; line-height: 1.2; }

Aufbau einer Stylesheet-Datei

Eine bewährte Reihenfolge, vom Allgemeinen zum Speziellen:

  1. Variablen (:root)
  2. Reset und Basis (Elemente: body, a, h1 …)
  3. Layout (Raster, Container, Seitenaufbau)
  4. Komponenten (.karte, .button, .menue)
  5. Hilfsklassen (.zentriert, .sr-only)
  6. Media Queries (am besten direkt bei der jeweiligen Komponente)

Benennung

Gute Klassennamen beschreiben die Funktion, nicht das Aussehen:

SchlechtBesser
.rot, .gross-fett.fehler, .titel
.box2.produktkarte
.links-menue-neu.hauptmenue

Die BEM-Konvention (Block, Element, Modifier) macht Zusammenhänge sichtbar:

<style>
  .karte { border: 2px solid #cbd5e1; border-radius: 10px; padding: 12px; max-width: 260px; background: white; }
  .karte__titel { margin: 0 0 6px; font-size: 1.1rem; }
  .karte__text { margin: 0 0 10px; color: #475569; }
  .karte__knopf { background: #4f46e5; color: white; border: 0; padding: 6px 14px; border-radius: 6px; }
  .karte--hervorgehoben { border-color: #f59e0b; background: #fffbeb; }
  .karte--hervorgehoben .karte__knopf { background: #d97706; }
</style>
<div class="karte karte--hervorgehoben">
  <h3 class="karte__titel">Angebot</h3>
  <p class="karte__text">Block <b>karte</b>, Elemente <b>__titel</b>, Modifier <b>--hervorgehoben</b>.</p>
  <button class="karte__knopf">Kaufen</button>
</div>

Wiederverwendbare Komponenten

Baue Bausteine, die an vielen Stellen funktionieren:

<style>
  :root { --primaer: #4f46e5; --text: #0f172a; --grau: #e2e8f0; --radius: 8px; }
  .btn { display: inline-block; padding: .55em 1.1em; border: 2px solid var(--primaer); border-radius: var(--radius);
         background: var(--primaer); color: white; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: .15s; }
  .btn:hover { filter: brightness(1.1); }
  .btn:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
  .btn--zweit { background: transparent; color: var(--primaer); }
  .btn--klein { font-size: .85rem; padding: .3em .8em; }
  .btn[disabled] { opacity: .5; cursor: not-allowed; }
</style>
<p><button class="btn">Primär</button> <button class="btn btn--zweit">Sekundär</button> <button class="btn btn--klein">Klein</button> <button class="btn" disabled>Aus</button> <a class="btn" href="#">Link-Button</a></p>

Häufige Fehler vermeiden

  • !important nur in Hilfsklassen oder Notfällen
  • Zu tiefe Selektoren (.a .b .c .d span): flach halten, ein bis zwei Ebenen
  • Magische Zahlen (margin-top: 37px): lieber Variablen und ein Abstandssystem
  • IDs für Stil vermeiden, Klassen nutzen
  • Duplikate: wiederkehrende Werte als Variablen
  • Feste Höhen vermeiden: min-height und Inhalt bestimmen lassen
  • outline: none ohne Ersatz entfernt den sichtbaren Fokus

Abstandssystem

Statt zufälliger Werte nutzt du eine Skala:

<style>
  :root { --s1: .25rem; --s2: .5rem; --s3: 1rem; --s4: 1.5rem; --s5: 2.5rem; }
  .stack > * + * { margin-top: var(--s3); }               /* gleichmäßiger Abstand in einem Stapel */
  .stack--eng > * + * { margin-top: var(--s2); }
  .stack > div { background: #e0e7ff; padding: var(--s2) var(--s3); border-radius: 6px; }
</style>
<div class="stack"><div>Eins</div><div>Zwei</div><div>Drei</div></div>

Leistung

  • Ein Stylesheet statt vieler kleiner Dateien; minimiert und komprimiert (gzip/brotli)
  • Kritisches CSS (für den ersten Bildschirm) bei Bedarf direkt im <head>
  • Nicht benötigtes CSS entfernen (Browser-Werkzeug “Coverage”)
  • will-change und contain nur gezielt einsetzen
  • Schriften und Bilder optimieren: sie sind meist größer als das gesamte CSS

Werkzeuge

WerkzeugNutzen
Stylelintprüft CSS auf Fehler und Stil
Prettierformatiert CSS einheitlich
PostCSS / Lightning CSSPräfixe, Minimierung, Bündelung
Browser-DevToolsRegeln live untersuchen und ändern
caniuse.comBrowserunterstützung prüfen

Dokumentation der Entscheidungen

Ein kurzer Kommentarkopf in der Datei (“Farben: …; Abstände: …; Breakpoints: …”) und ein Style-Guide mit allen Komponenten auf einer Seite sparen dir und dem Team viel Zeit.

Merke

  • Reset, Variablen, Layout, Komponenten, Hilfsklassen in klarer Reihenfolge
  • Klassennamen nach Funktion; BEM zeigt Zusammenhänge
  • Flache Selektoren, wenig !important, keine IDs für Stil
  • Abstandsskala und Variablen statt magischer Zahlen
  • Werkzeuge wie Stylelint, Prettier und DevTools helfen

Übungsaufgabe

Baue eine kleine Komponentensammlung (Button, Karte, Hinweisbox) mit Variablen und BEM-Namen, alle auf einer Style-Guide-Seite.

Quiz zur Selbstkontrolle

Weiter im Kurs

Zurück: Moderne CSS-Funktionen

Weiter: Projekt: Eine komplette Landing Page

Alle Kapitel: HTML + CSS im Überblick

Graphansicht

Backlinks