CSS Struktur | DevPanicZone

Warum Struktur wichtig ist

Eine CSS-Datei kann schnell hunderte oder tausende Zeilen lang werden. Ohne klare Struktur verlierst du den Überblick: Wo war nochmal der Button-Style? Warum überschreibt sich hier etwas?

Eine logische Reihenfolge hilft dir:

Schneller finden: Du weißt sofort, wo welche Styles stehen
Weniger Konflikte: Allgemeine Regeln zuerst, spezifische später
Einfacher erweitern: Neue Styles passen logisch ins System
Bessere Teamarbeit: Andere verstehen deinen Code

Die goldene Regel

Von allgemein zu spezifisch. Beginne mit globalen Styles (Reset, Base), dann Layout-Strukturen, dann Komponenten, und am Ende Utilities, die alles überschreiben können.

1. Reset / Normalize

Browser haben eigene Standardstyles - und die sind nicht einheitlich. Ein Reset setzt diese zurück, damit du von einer sauberen Basis startest.

CSS

/* ===================
   1. RESET
   =================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

Mit box-sizing: border-box werden Padding und Border in die Breite eingerechnet - das macht Layouts viel berechenbarer. Der Reset auf margin und padding entfernt die unterschiedlichen Browser-Abstände bei Elementen wie <p>, <ul> oder <h1>.

2. Base Styles

Die Grundeinstellungen für html und body - hier definierst du Schriftart, Farben und grundlegendes Verhalten für die gesamte Seite.

CSS

/* ===================
   2. BASE STYLES
   =================== */

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: "Open Sans", sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #222;
    background-color: #fdfdfd;
    min-height: 100vh;
}

Warum font-size auf html?

Die font-size auf html ist die Basis für alle rem-Einheiten. Mit 16px entspricht 1rem = 16px, 1.5rem = 24px usw.

3. Layout

Die großen Strukturelemente deiner Seite: Header, Navigation, Main-Bereich, Footer. Hier definierst du das Grundgerüst.

CSS

/* ===================
   3. LAYOUT
   =================== */

header {
    background-color: #333;
    color: #fff;
    padding: 1rem 0;
}

main {
    flex: 1;  /* Füllt verfügbaren Platz (bei flex auf body) */
    padding: 2rem 0;
}

footer {
    background-color: #222;
    color: #ccc;
    padding: 2rem 0;
    text-align: center;
}

/* Container für zentrierten Inhalt */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

4. Components (Inhaltselemente)

Wiederverwendbare UI-Bausteine wie Buttons, Cards, Navigation, Formulare. Diese Styles kannst du überall auf der Seite einsetzen.

CSS

/* ===================
   4. COMPONENTS
   =================== */

/* Navigation */
.nav-list {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

.nav-link {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.nav-link:hover {
    text-decoration: underline;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-primary {
    background-color: #3b82f6;
    color: #fff;
}

.btn-primary:hover {
    background-color: #2563eb;
}

/* Cards */
.card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
}

5. Typography

Globale Schriftstile für Überschriften, Absätze, Links und andere Textelemente.

CSS

/* ===================
   5. TYPOGRAPHY
   =================== */

h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat", sans-serif;
    line-height: 1.2;
    margin-bottom: 0.5em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p {
    margin-bottom: 1rem;
}

a {
    color: #3b82f6;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

6. Utilities (Hilfsklassen)

Kleine, einzweckige Klassen für schnelle Anpassungen. Sie stehen am Ende, weil sie andere Styles überschreiben sollen.

CSS

/* ===================
   6. UTILITIES
   =================== */

/* Display */
.hidden { display: none; }
.block { display: block; }
.flex { display: flex; }

/* Text */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.bold { font-weight: bold; }
.uppercase { text-transform: uppercase; }

/* Spacing - Margin */
.mt-sm { margin-top: 0.5rem; }
.mt-md { margin-top: 1rem; }
.mt-lg { margin-top: 2rem; }
.mb-sm { margin-bottom: 0.5rem; }
.mb-md { margin-bottom: 1rem; }
.mb-lg { margin-bottom: 2rem; }

/* Spacing - Padding */
.pt-sm { padding-top: 0.5rem; }
.pt-md { padding-top: 1rem; }
.pt-lg { padding-top: 2rem; }
.pb-sm { padding-bottom: 0.5rem; }
.pb-md { padding-bottom: 1rem; }
.pb-lg { padding-bottom: 2rem; }

Utility-First?

Frameworks wie Tailwind CSS setzen komplett auf Utility-Klassen. Für eigene Projekte ist ein Mix aus Komponenten und Utilities oft praktischer - Komponenten für komplexe, wiederkehrende Elemente, Utilities für schnelle Anpassungen.

Zusammenfassung: Empfohlene Reihenfolge

So sieht eine gut strukturierte CSS-Datei aus:

CSS

/* ===================
   1. RESET
   =================== */
/* Browser-Defaults zurücksetzen */

/* ===================
   2. BASE STYLES
   =================== */
/* html, body Grundeinstellungen */

/* ===================
   3. LAYOUT
   =================== */
/* header, main, footer, .container */

/* ===================
   4. COMPONENTS
   =================== */
/* .btn, .card, .nav, .form, etc. */

/* ===================
   5. TYPOGRAPHY
   =================== */
/* h1-h6, p, a, listen */

/* ===================
   6. UTILITIES
   =================== */
/* Hilfsklassen (.mt-md, .text-center, etc.) */

Warum diese Reihenfolge?

Reset zuerst: Saubere Basis ohne Browser-Unterschiede
Base danach: Globale Einstellungen, die überall gelten
Layout: Grundgerüst der Seite
Components: Wiederverwendbare UI-Elemente
Typography: Kann Komponenten ergänzen
Utilities am Ende: Höchste Priorität, überschreiben alles andere

Wann auf mehrere Dateien aufteilen?

Solange deine style.css überschaubar bleibt (unter 500 Zeilen), reicht eine Datei. Wenn es mehr wird, kannst du aufteilen:

Dateistruktur

css/
├── style.css          (importiert alle anderen)
├── reset.css
├── base.css
├── layout.css
├── components.css
├── typography.css
└── utilities.css

Mehr dazu im Tutorial CSS Organisation.

Weiter: CSS Organisation

CSS Datei strukturieren