CSS-Dokumentation #

Aktuelle Struktur #

Die CSS-Dateien sind wie folgt organisiert:

/static/css/
├── base/
│   ├── variables.css      (Farben, Abstände, etc.)
│   ├── typography.css     (Schriften, Größen)
│   └── layout.css        (Grundlegende Layouts)
├── components/
│   ├── navigation.css
│   ├── buttons.css
│   └── cards.css
├── pages/
│   ├── blog.css
│   ├── calculator.css
│   └── contact.css
└── main.css              (Importiert alle Module)

Wichtige Konventionen #

BEM-Methodologie #

Wir verwenden die BEM-Methodologie für CSS-Klassen:

.block {}           /* Block: Eigenständige Einheit */
.block__element {}  /* Element: Teil eines Blocks */
.block--modifier {} /* Modifier: Variation eines Blocks */

Beispiel:

.calculator {}
.calculator__result {}
.calculator__result--highlighted {}

Medienabfragen #

Wir verwenden folgende Breakpoints:

/* Mobil (bis 576px) */
@media (max-width: 576px) { }

/* Tablet (577px - 1024px) */
@media (min-width: 577px) and (max-width: 1024px) { }

/* Desktop (ab 1025px) */
@media (min-width: 1025px) { }

Komponenten #

• Provisionsrechner
• Blog-Layout
• Navigation

Aktuelle Aufgaben #

• CSS-Dateien nach Komponenten aufteilen
• Doppelte Definitionen entfernen
• Media Queries optimieren
• BEM-Methodologie einführen