CSS

CSS (Cascading Style Sheets) ist die Stylesheet-Sprache, die das visuelle Erscheinungsbild von HTML-Dokumenten definiert. Sie ermöglicht die vollständige Trennung von Inhalt (HTML) und Präsentation (Design) und ist damit eine der drei Kerntechnologien des modernen Webs neben HTML und JavaScript.

Warum CSS unverzichtbar ist

Ohne CSS wären Webseiten reine Textdokumente ohne Farben, Layout oder visuelle Gestaltung. Browser würden nur schwarzen Text auf weißem Hintergrund mit Standardschrift anzeigen – funktional, aber visuell nicht ansprechend. CSS revolutionierte das Webdesign, indem es Entwicklern ermöglicht, dieselbe HTML-Struktur auf unzählige Arten zu gestalten, ohne den zugrundeliegenden Code zu verändern.

Die Trennung von Inhalt und Design bringt enorme Vorteile: Ein Team kann an der HTML-Struktur arbeiten, während Designer parallel an der visuellen Gestaltung feilen. Änderungen im Design erfordern keine Anpassung des HTML-Codes. Eine einzige CSS-Datei kann das Aussehen tausender Seiten steuern, was Wartung und Konsistenz dramatisch vereinfacht.

Die Anatomie von CSS: Selektoren, Eigenschaften und Werte

CSS besteht aus Regeln, die festlegen, welche HTML-Elemente wie gestaltet werden sollen. Eine CSS-Regel folgt immer dem gleichen Muster:

selektor {
    eigenschaft: wert;
    eigenschaft: wert;
}

Der Selektor bestimmt, welche HTML-Elemente betroffen sind. Die Eigenschaften definieren, was verändert werden soll (Farbe, Größe, Abstand etc.), und die Werte legen fest, wie diese Änderung aussieht.

Ein praktisches Beispiel:

h1 {
    color: #2c3e50;
    font-size: 32px;
    margin-bottom: 20px;
    font-weight: 700;
}

Diese Regel besagt: Alle <h1>-Überschriften sollen dunkelgrau (#2c3e50) sein, 32 Pixel groß, einen unteren Abstand von 20 Pixeln haben und fett dargestellt werden.

Selektoren: Die Macht der Präzision

CSS bietet verschiedene Selektortypen mit unterschiedlicher Spezifität:

Element-Selektoren wählen alle Elemente eines Typs:

p { color: #333; }  /* Alle Absätze */
a { color: #0066cc; }  /* Alle Links */

Klassen-Selektoren (mit Punkt) ermöglichen wiederverwendbare Styles:

.highlight { background-color: yellow; }
.button-primary { background-color: #007bff; }

ID-Selektoren (mit Raute) sind einzigartig pro Seite:

#header-navigation { position: sticky; }

Attribut-Selektoren wählen Elemente basierend auf Attributen:

a[target="_blank"] { color: red; }  /* Externe Links */
input[type="email"] { border: 2px solid blue; }

Pseudo-Klassen reagieren auf Zustände:

a:hover { text-decoration: underline; }  /* Bei Mausberührung */
button:disabled { opacity: 0.5; }  /* Deaktivierte Buttons */
li:nth-child(odd) { background-color: #f5f5f5; }  /* Jede ungerade Zeile */

Kombinator-Selektoren definieren Beziehungen zwischen Elementen:

nav > ul { list-style: none; }  /* Direkte Kind-Elemente */
h2 + p { margin-top: 0; }  /* Erster Absatz nach h2 */
.container .card { padding: 20px; }  /* Nachfahren */

CSS einbinden: Drei Wege zum Ziel

Externe Stylesheets (Best Practice)

Die professionelle Methode: CSS-Regeln in separate .css-Dateien auslagern und im HTML verlinken:

<head>
    <link rel="stylesheet" href="styles.css">
</head>

Vorteile: Wiederverwendbarkeit über mehrere Seiten, Browser-Caching für bessere Performance, klare Trennung von Struktur und Design, einfache Wartung.

Interne Stylesheets

CSS innerhalb des <head>-Bereichs einer HTML-Seite:

<head>
    <style>
        body { font-family: Arial, sans-serif; }
        .container { max-width: 1200px; }
    </style>
</head>

Verwendung: Sinnvoll für seitenspezifische Styles oder wenn nur eine einzelne HTML-Datei existiert.

Inline-Styles

Styles direkt am HTML-Element:

<p style="color: red; font-weight: bold;">Wichtiger Text</p>
```

**Achtung:** Nur in Ausnahmefällen verwenden (z.B. dynamisch generierte Styles via JavaScript). Inline-Styles erschweren Wartung, überschreiben externe Regeln und verletzen das Prinzip der Trennung von Inhalt und Präsentation.

## Das Box-Modell: Die Grundlage jedes Layouts

Jedes HTML-Element wird in CSS als rechteckige Box behandelt. Das **Box-Modell** definiert, wie Breite, Höhe, Innenabstand und Rahmen berechnet werden:
```
┌─────────────── Margin ───────────────┐
│  ┌───────────── Border ──────────────┐ │
│  │  ┌────────── Padding ────────────┐ │ │
│  │  │                               │ │ │
│  │  │          Content              │ │ │
│  │  │                               │ │ │
│  │  └───────────────────────────────┘ │ │
│  └─────────────────────────────────────┘ │
└─────────────────────────────────────────┘

Standardmäßig addiert der Browser width + padding + border zur Gesamtbreite. Mit box-sizing: border-box; bleibt die angegebene Breite die tatsächliche Außenbreite:

* {
    box-sizing: border-box;  /* Moderne Best Practice */
}

.card {
    width: 300px;
    padding: 20px;
    border: 2px solid #ccc;
    /* Gesamtbreite bleibt 300px, nicht 344px */
}

Moderne Layout-Techniken

Flexbox: Eindimensionale Layouts

Flexbox ist ideal für die Ausrichtung von Elementen in einer Reihe oder Spalte:

.navigation {
    display: flex;
    justify-content: space-between;  /* Horizontal verteilen */
    align-items: center;  /* Vertikal zentrieren */
    gap: 20px;  /* Abstand zwischen Items */
}

.card-container {
    display: flex;
    flex-wrap: wrap;  /* Umbruch bei Platzmangel */
}

.card {
    flex: 1 1 300px;  /* Wachsen, Schrumpfen, Basis-Breite */
}

Typische Anwendungsfälle: Navigationsleisten, Button-Gruppen, vertikale Zentrierung, gleichmäßige Abstände.

CSS Grid: Zweidimensionale Layouts

Grid ermöglicht komplexe Raster-Layouts mit präziser Kontrolle:

.page-layout {
    display: grid;
    grid-template-columns: 250px 1fr 300px;  /* Sidebar, Main, Aside */
    grid-template-rows: auto 1fr auto;  /* Header, Content, Footer */
    gap: 20px;
    min-height: 100vh;
}

.header { grid-column: 1 / -1; }  /* Volle Breite */
.footer { grid-column: 1 / -1; }

/* Responsive Grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

Grid vs. Flexbox: Nutze Grid für komplette Seitenlayouts und zweidimensionale Strukturen. Flexbox eignet sich besser für einzelne UI-Komponenten und eindimensionale Ausrichtungen.

Responsive Design mit Media Queries

Media Queries ermöglichen unterschiedliche Styles basierend auf Bildschirmgröße, Ausrichtung oder Geräteeigenschaften:

/* Mobile First Approach */
.container {
    width: 100%;
    padding: 15px;
}

@media (min-width: 768px) {  /* Tablets */
    .container {
        width: 720px;
        margin: 0 auto;
    }
}

@media (min-width: 1200px) {  /* Desktop */
    .container {
        width: 1140px;
    }
    
    .navigation {
        flex-direction: row;  /* Horizontal auf Desktop */
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
        color: #e0e0e0;
    }
}

/* Print-Styles */
@media print {
    .no-print { display: none; }
    a { text-decoration: underline; }
}

Häufige Breakpoints:

  • 576px (Smartphones landscape)
  • 768px (Tablets)
  • 992px (Laptops)
  • 1200px (Desktop)

CSS-Variablen (Custom Properties): Wartbarkeit auf neuem Level

CSS-Variablen erlauben die Definition wiederverwendbarer Werte:

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --font-main: 'Inter', sans-serif;
    --spacing-unit: 8px;
    --border-radius: 4px;
}

.button {
    background-color: var(--primary-color);
    padding: calc(var(--spacing-unit) * 2);
    border-radius: var(--border-radius);
    font-family: var(--font-main);
}

/* Dark Theme durch Überschreiben */
[data-theme="dark"] {
    --primary-color: #0d6efd;
    --background: #1a1a1a;
    --text-color: #e0e0e0;
}

Vorteile: Zentrale Farbdefinition, Theme-Switching, einfachere Wartung, JavaScript-Zugriff für dynamische Anpassungen.

Performance-Optimierung

CSS-Dateien minimieren

Entferne Leerzeichen, Kommentare und unnötigen Code:

/* Original: 50 KB */
.navigation { display: flex; justify-content: space-between; }

/* Minified: 38 KB */
.navigation{display:flex;justify-content:space-between;}

Tools wie cssnano, clean-css oder Build-Prozesse (Webpack, Vite) automatisieren die Minimierung.

Critical CSS

Extrahiere CSS für sichtbaren Bereich (above-the-fold) und lade es inline im <head>:

<head>
    <style>
        /* Critical CSS für sofortige Darstellung */
        body { font-family: sans-serif; margin: 0; }
        .header { background: #fff; padding: 20px; }
    </style>
    
    <!-- Vollständiges CSS asynchron nachladen -->
    <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>

CSS-Selektoren effizient gestalten

/* Ineffizient: Browser muss alle divs durchsuchen */
div div div p { color: red; }

/* Besser: Spezifische Klasse */
.article-text { color: red; }

/* Ineffizient: Universalselektor */
* { margin: 0; }

/* Besser: Nur wo nötig */
body, h1, h2, h3, p, ul { margin: 0; }

Moderne CSS-Features

Container Queries

Responsive Design basierend auf Container-Größe statt Viewport:

.card-container {
    container-type: inline-size;
}

@container (min-width: 400px) {
    .card {
        display: grid;
        grid-template-columns: 150px 1fr;
    }
}

CSS Nesting (ab 2023)

Verschachtelte Selektoren wie in Sass-Präprozessoren:

.card {
    padding: 20px;
    
    & .title {
        font-size: 24px;
        font-weight: bold;
    }
    
    &:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
}

Subgrid

Grid-Kinder erben das Raster der Eltern:

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.card {
    display: grid;
    grid-template-rows: subgrid;  /* Nutzt Eltern-Grid */
    grid-row: span 3;
}

Scroll-Snap

Sanftes Einrasten beim Scrollen:

.gallery {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}

.gallery-item {
    scroll-snap-align: center;
}

CSS-Präprozessoren: Sass, Less, Stylus

Präprozessoren erweitern CSS um Features wie Variablen (vor CSS-Variablen), Nesting, Mixins und Funktionen:

Sass/SCSS Beispiel:

// Variablen
$primary: #007bff;
$spacing: 16px;

// Mixins (wiederverwendbare Styles)
@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

// Nesting
.card {
    padding: $spacing;
    
    .title {
        color: $primary;
        font-size: 1.5rem;
    }
    
    &:hover {
        transform: scale(1.05);
    }
}

// Verwendung
.hero {
    @include flex-center;
    height: 100vh;
}

Wann Präprozessoren sinnvoll sind:

  • Große Projekte mit komplexen Style-Strukturen
  • Teams, die Wiederverwendbarkeit und Wartbarkeit priorisieren
  • Wenn CSS-Variablen und natives Nesting nicht ausreichen

Moderne Alternative: PostCSS mit Plugins für automatisches Prefixing, zukünftige CSS-Syntax und Custom Transformationen.

CSS-Frameworks: Bootstrap, Tailwind, Bulma

Bootstrap (Component-Based)

Vorgefertigte Komponenten mit Utility-Klassen:

<button class="btn btn-primary btn-lg">Klick mich</button>
<div class="container">
    <div class="row">
        <div class="col-md-6">Spalte 1</div>
        <div class="col-md-6">Spalte 2</div>
    </div>
</div>

Vorteil: Schneller Prototypenbau, konsistentes Design, umfangreiche Komponenten-Bibliothek. Nachteil: Hohe Dateigröße, generisches Aussehen ohne Anpassung.

Tailwind CSS (Utility-First)

Design direkt im HTML mit atomaren Utility-Klassen:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Klick mich
</button>

<div class="flex items-center justify-between p-4 bg-gray-100">
    <h1 class="text-2xl font-semibold">Titel</h1>
    <nav class="space-x-4">...</nav>
</div>

Vorteil: Maximale Flexibilität, kein CSS schreiben, PurgeCSS entfernt ungenutztes CSS. Nachteil: HTML wird länger, Lernkurve für Klassennamen.

Framework oder Custom CSS?

Frameworks wählen:

  • Schnelle Entwicklung gefragt (MVPs, Prototypen)
  • Team hat Framework-Erfahrung
  • Standard-UI-Patterns ausreichend

Custom CSS bevorzugen:

  • Einzigartiges, markenspezifisches Design
  • Performance-kritische Projekte (jedes KB zählt)
  • Volle Kontrolle über Code-Struktur

Barrierefreiheit mit CSS

CSS spielt eine zentrale Rolle für zugängliche Webseiten:

Fokus-Indikatoren niemals entfernen

/* NIEMALS */
*:focus { outline: none; }

/* STATTDESSEN: Eigener Fokus-Style */
a:focus,
button:focus {
    outline: 3px solid #007bff;
    outline-offset: 2px;
}

/* Oder: Fokus nur bei Tastatur-Navigation */
a:focus-visible {
    outline: 3px solid #007bff;
}

Ausreichende Kontraste

Nach WCAG 2.1 Level AA:

  • Normal-Text: Mindestens 4.5:1 Kontrastverhältnis
  • Großer Text (18pt+): Mindestens 3:1
/* Gutes Kontrastverhältnis: 7.23:1 */
.text-primary {
    color: #0056b3;  /* Dunkelblau */
    background: #ffffff;  /* Weiß */
}

/* Zu geringer Kontrast: 2.1:1 - NICHT verwenden */
.text-light {
    color: #e0e0e0;
    background: #ffffff;
}

Tools wie der WebAIM Contrast Checker oder Browser-DevTools prüfen Kontraste automatisch.

Screen-Reader-freundliche Patterns

/* Visuell verstecken, aber für Screen Reader verfügbar */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip-Link für Tastatur-Navigation */
.skip-link {
    position: absolute;
    top: -40px;
}

.skip-link:focus {
    top: 0;
}

Responsive Schriftgrößen

/* Relative Einheiten respektieren Browser-Einstellungen */
html {
    font-size: 16px;  /* Base */
}

body {
    font-size: 1rem;  /* 16px, skaliert mit User-Settings */
}

h1 {
    font-size: clamp(1.5rem, 5vw, 3rem);  /* Fluid zwischen 24px-48px */
}

/* NICHT: Fixe Pixel-Werte für Text */
.bad { font-size: 14px; }  /* Ignoriert Accessibility-Einstellungen */

CSS in WordPress

WordPress nutzt CSS auf mehreren Ebenen:

Theme-Stylesheet

Jedes WordPress-Theme hat eine style.css im Theme-Ordner:

/*
Theme Name: Mein Theme
Author: die mainagentur
Version: 1.0
*/

/* Theme-spezifische Styles */
.site-header {
    background: #fff;
    padding: 20px 0;
}

Gutenberg Block-Styles

Moderne Block-Themes trennen Editor- und Frontend-Styles:

// functions.php
function mein_theme_block_styles() {
    wp_enqueue_style(
        'mein-theme-blocks',
        get_template_directory_uri() . '/assets/css/blocks.css'
    );
}
add_action('wp_enqueue_scripts', 'mein_theme_block_styles');

Custom CSS über Customizer

Viele Themes bieten einen Customizer für zusätzliches CSS ohne Child-Theme:

Pfad: Design > Customizer > Zusätzliches CSS

Vorteil: Schnelle Anpassungen, Update-sicher. Nachteil: Schlechte Performance (wird inline gerendert), keine Versionierung.

CSS-Optimierung in WordPress

// CSS minifizieren und zusammenfassen
function optimize_css() {
    // Alle CSS-Dateien außer Critical CSS entfernen und gebündelt laden
    wp_dequeue_style('wp-block-library');  // Gutenberg CSS (wenn nicht benötigt)
    
    // Eigenes optimiertes Bundle
    wp_enqueue_style('main-css', get_template_directory_uri() . '/dist/main.min.css');
}
add_action('wp_enqueue_scripts', 'optimize_css', 100);

Plugins für CSS-Optimierung:

  • Autoptimize – CSS-Aggregation und Minifizierung
  • WP Rocket – Critical CSS, CSS-Minimierung, Lazy Loading
  • Asset CleanUp – Unnötige Styles deaktivieren

Browser-Kompatibilität und Prefixes

Ältere Browser benötigen Vendor-Prefixes für neuere CSS-Features:

.element {
    -webkit-transform: rotate(45deg);  /* Chrome, Safari */
    -moz-transform: rotate(45deg);     /* Firefox */
    -ms-transform: rotate(45deg);      /* IE */
    transform: rotate(45deg);          /* Standard */
}

.flex-container {
    display: -webkit-box;      /* Safari 6.1+, iOS 6.1+ */
    display: -ms-flexbox;      /* IE 10 */
    display: flex;             /* Modern browsers */
}

Automation mit Autoprefixer:

// PostCSS-Config
module.exports = {
    plugins: [
        require('autoprefixer')({
            browsers: ['last 2 versions', '> 1%']
        })
    ]
}

Autoprefixer fügt automatisch nötige Prefixes basierend auf Browser-Support hinzu.

Browser-Support prüfen:

  • Can I Use (caniuse.com) – Detaillierte Kompatibilitätstabellen
  • MDN Browser Compatibility – Offizielle Dokumentation
  • BrowserStack – Cross-Browser-Testing

Debugging und DevTools

Moderne Browser bieten leistungsstarke CSS-Debugging-Tools:

Chrome/Edge DevTools

Elements > Styles:

  • Aktivierte/deaktivierte Regeln visualisiert
  • Computed Styles: Finale berechnete Werte
  • Box-Modell-Visualisierung
  • Farb-Picker mit Kontrast-Checker
  • Animations-Inspector

Performance Tab:

  • CSS-Rendering-Performance messen
  • Layout-Thrashing identifizieren
  • Paint-Operationen analysieren

Firefox DevTools

Inspector:

  • Grid-Inspector mit Overlay
  • Flexbox-Inspector
  • Fonts-Panel für Typography-Debugging
  • Changes-Panel: Alle CSS-Änderungen tracken

CSS-Fehler finden

Häufige Probleme:

  1. Spezifität-Konflikte:
/* Überschreibt nicht: */
.button { color: red; }
#header .button { color: blue; }  /* Höhere Spezifität */

/* Lösung: Gleiche oder höhere Spezifität */
.header .button.active { color: red; }
  1. Kaskadierungs-Reihenfolge:
/* Später definierte Regel gewinnt */
.text { color: red; }
.text { color: blue; }  /* Wird angewendet */
  1. Z-Index-Probleme:
.modal {
    position: fixed;
    z-index: 1000;  /* Stacking Context */
}

.dropdown {
    position: relative;  /* Eigener Stacking Context */
    z-index: 9999;  /* Wirkt nur innerhalb des Eltern-Kontexts */
}

CSS-Methodologien für große Projekte

BEM (Block Element Modifier)

Strukturierte Namenskonvention für skalierbare Stylesheets:

/* Block: Eigenständige Komponente */
.card { }

/* Element: Teil des Blocks */
.card__title { }
.card__image { }
.card__description { }

/* Modifier: Variation */
.card--featured { }
.card__title--large { }

Beispiel:

<article class="card card--featured">
    <h2 class="card__title card__title--large">Titel</h2>
    <img class="card__image" src="...">
    <p class="card__description">Text</p>
</article>

SMACSS (Scalable and Modular Architecture for CSS)

Kategorisiert CSS in fünf Typen:

  1. Base: Reset, Grundstyles (html, body, a)
  2. Layout: Seitenlayout (header, sidebar, footer)
  3. Module: Wiederverwendbare Komponenten (card, button)
  4. State: Zustandsänderungen (.is-active, .is-hidden)
  5. Theme: Farbschemata, Variationen

Utility-First (Atomic CSS)

Kleine, wiederverwendbare Klassen für einzelne Styles:

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.text-center { text-align: center; }
.flex { display: flex; }
.flex-col { flex-direction: column; }

Vorteil: Konsistenz, keine neuen Klassen nötig. Nachteil: Viele Klassen im HTML, anfangs unübersichtlich.

Sicherheitsaspekte

CSS-Injection verhindern

User-generierter CSS-Code kann Sicherheitsrisiken darstellen:

// WordPress: CSS sanitizen
$custom_css = wp_strip_all_tags($_POST['custom_css']);
$custom_css = esc_html($custom_css);

// Nie direkt ausgeben:
// <style><?php echo $_POST['css']; ?></style>

// Besser: Validierung
function validate_css($css) {
    // Entferne gefährliche Properties
    $css = preg_replace('/@import/i', '', $css);
    $css = preg_replace('/expression/i', '', $css);
    return $css;
}

Content Security Policy (CSP)

Inline-Styles können durch CSP blockiert werden:

<!-- CSP-Header verbietet Inline-Styles -->
Content-Security-Policy: style-src 'self'

<!-- Lösung: Nonce oder Hash -->
<style nonce="abc123">
    .element { color: red; }
</style>

Häufige Fehler und Lösungen

1. Vergessen von box-sizing

/* Problem: Padding addiert sich zur Breite */
.box { width: 200px; padding: 20px; }  /* = 240px breit */

/* Lösung: */
.box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;  /* = 200px breit */
}

2. Margin Collapsing

/* Problem: Vertikale Margins kollabieren */
.box1 { margin-bottom: 20px; }
.box2 { margin-top: 20px; }
/* Abstand ist 20px, nicht 40px */

/* Lösung: Flexbox oder Grid nutzen */
.container {
    display: flex;
    flex-direction: column;
    gap: 20px;  /* Echter 20px-Abstand */
}

3. Absolute Positionierung ohne Kontext

/* Problem: Bezieht sich auf <body> */
.tooltip { position: absolute; top: 0; }

/* Lösung: Eltern-Element positionieren */
.tooltip-container {
    position: relative;
}
.tooltip {
    position: absolute;
    top: 100%;
}

4. Z-Index ohne Positioning

/* Funktioniert NICHT */
.modal { z-index: 1000; }

/* Funktioniert */
.modal {
    position: fixed;
    z-index: 1000;
}

CSS-Performance-Metriken

Layout Thrashing vermeiden:

// SCHLECHT: Mehrfaches Layout-Recalculation
const width1 = element1.offsetWidth;  // Read
element1.style.width = width1 + 10 + 'px';  // Write
const width2 = element2.offsetWidth;  // Read (Force Layout)
element2.style.width = width2 + 10 + 'px';  // Write

// GUT: Erst lesen, dann schreiben
const width1 = element1.offsetWidth;
const width2 = element2.offsetWidth;
element1.style.width = width1 + 10 + 'px';
element2.style.width = width2 + 10 + 'px';

CSS Contain:

css

.card {
    contain: layout style paint;  /* Browser optimiert Rendering */
}

Will-Change für Animationen:

.animated-element {
    will-change: transform, opacity;  /* Browser bereitet GPU vor */
}

.animated-element:hover {
    transform: scale(1.1);
}

Zukunft von CSS

CSS Houdini: Low-Level-API für Custom CSS

// Custom Properties mit JavaScript-Typisierung
CSS.registerProperty({
    name: '--rotation',
    syntax: '<angle>',
    initialValue: '0deg',
    inherits: false
});

CSS Layers (@layer): Kaskadenkontrolle

@layer reset, base, components, utilities;

@layer reset {
    * { margin: 0; padding: 0; }
}

@layer utilities {
    .text-center { text-align: center; }
}

CSS Scope (@scope): Begrenzte Style-Gültigkeit

@scope (.card) {
    :scope {  /* Die .card selbst */
        padding: 20px;
    }
    
    .title {  /* Nur .title innerhalb von .card */
        font-size: 1.5rem;
    }
}

Checkliste: CSS professionell einsetzen

✅ Struktur:

  • Externe Stylesheets verwenden
  • CSS-Variablen für Konsistenz nutzen
  • Logische Dateistruktur (base, components, layouts, utilities)

✅ Performance:

  • CSS minimieren und komprimieren
  • Critical CSS inline laden
  • Ungenutzte Styles entfernen (PurgeCSS)
  • Moderne Bild-Formate (WebP, AVIF) via CSS

✅ Responsive Design:

  • Mobile-First-Ansatz
  • Fluid Typography (clamp, calc)
  • Container Queries für Komponenten

✅ Barrierefreiheit:

  • Ausreichende Kontraste (WCAG AA: 4.5:1)
  • Fokus-Indikatoren sichtbar
  • Relative Einheiten für Skalierbarkeit

✅ Wartbarkeit:

  • Klare Namenskonventionen (BEM)
  • Kommentare für komplexe Logik
  • Versionskontrolle (Git)

✅ Browser-Kompatibilität:

  • Autoprefixer einsetzen
  • Fallbacks für neue Features
  • Cross-Browser-Testing

Weiterführende Ressourcen

Offizielle Spezifikationen:

Learning Platforms:

Tools:

Artikel teilen:

Zurück zum Glossar-Index
Der Autor: Tim Ehling

Über den Autor

Tim Ehling

Seit über zwei Jahrzehnten beschäftige ich mich mit Webentwicklung – und seit 2006 ganz besonders intensiv mit WordPress. Ich entwickle und optimiere Webseiten, betreue sie langfristig durch zuverlässige Wartung und biete Schulungen für alle, die WordPress sicher und effizient nutzen möchten. Außerdem unterstütze ich Unternehmen dabei, ihre Social-Media-Kanäle und SEO-Strategien so zu verbessern, dass sie bei Kunden und Suchmaschinen gleichermaßen gut ankommen.

Alle Artikel von Tim →
LinkedIn
Termin buchen

Mehr aus dem Glossar