Hardcoding
CSS – Styling, Layout und moderne Techniken
CSS (Cascading Style Sheets) steuert das visuelle Erscheinungsbild von HTML-Elementen. Moderne CSS-Techniken wie Flexbox, Grid und Custom Properties haben das Layout-Paradigma grundlegend verändert — komplexe Layouts die früher JavaScript erforderten, sind heute mit wenigen CSS-Zeilen lösbar.
Moderne Layout-Techniken
Flexbox
Eindimensionales Layout-System — Elemente in einer Reihe oder Spalte anordnen. Perfekt für Navigation, Karten-Reihen, zentrierte Elemente. Wichtigste Properties: display: flex, flex-direction, justify-content, align-items, gap, flex-wrap.
CSS Grid
Zweidimensionales Layout-System — Zeilen und Spalten gleichzeitig definieren. Perfekt für Seiten-Layouts, Galerien, komplexe Komponenten. Wichtigste Properties: display: grid, grid-template-columns, grid-template-rows, gap, grid-area.
Container Queries
Wie Media Queries — aber für Containerbreite statt Viewport-Breite. Komponenten reagieren auf ihren eigenen Container statt auf den Bildschirm. Revolutionär für wiederverwendbare Komponenten die in verschiedenen Contexts funktionieren müssen.
CSS Custom Properties
Variablen in CSS — wiederverwendbare Werte die einmal definiert und überall genutzt werden. Basis für Design-Token-Systeme und Theme-Switching. Liveänderbar per JavaScript. Syntax: --variable-name: wert; Verwendung: var(--variable-name).
Das Box-Modell
Jedes HTML-Element ist eine Box mit: Content (Inhalt), Padding (Innenabstand), Border (Rahmen) und Margin (Außenabstand). box-sizing: border-box ist moderne Pflicht — es sorgt dafür dass Padding und Border die Gesamtgröße nicht vergrößern, sondern nach innen berechnet werden.
Häufig gestellte Fragen zum Thema CSS
Flexbox für eindimensionale Layouts (eine Reihe ODER eine Spalte). Grid für zweidimensionale Layouts (Zeilen UND Spalten gleichzeitig). In der Praxis: Grid für das Seiten-Layout, Flexbox für Komponenten innerhalb. Beide können auch kombiniert werden.
Spezifität bestimmt welche CSS-Regel gewinnt wenn mehrere auf dasselbe Element zutreffen. Inline-Styles > IDs > Klassen > Elemente. Hohe Spezifität durch zu viele IDs oder !important führt zu schwer wartbarem CSS. :where() als moderne Alternative mit Spezifität 0.