0Pricing
CSS Academy · Lektion

Dateiorganisation: ITCSS und 7-1-Muster

Strukturieren Sie CSS-Dateien mit dem Inverted-Triangle- oder 7-1-Muster für skalierbare Projekte.

Dateiorganisation: ITCSS und 7-1-Muster ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum CSS-Dateien organisieren?

Mit zunehmender Größe von Projekten wird eine einzelne CSS-Datei unübersichtlich. Strukturen zur Dateiorganisation helfen Teams dabei, CSS in logische Schichten aufzuteilen, die in der richtigen Reihenfolge geladen werden und leicht zu durchsuchen sind.

ITCSS: Inverted Triangle CSS

ITCSS organisiert CSS in Schichten, die nach zunehmender Spezifität geordnet sind. Wie bei einem umgekehrten Dreieck stehen die breitesten (allgemeinsten) Regeln oben und die spezifischsten unten. Dadurch wird die natürliche Kaskade berücksichtigt.

ITCSS-Schichten

Die 7 Schichten von ITCSS (von am allgemeinsten bis am spezifischsten):

  1. Settings — Variablen und Design-Tokens
  2. Tools — Mixins und Funktionen
  3. Generic — Reset/Normalisierung
  4. Elements — Basisstile für HTML-Elemente
  5. Objects — Layout-Abstraktionen (ohne visuelle Gestaltung)
  6. Components — UI-Komponenten
  7. Utilities — Überschreibungen, Hilfsklassen, !important ist hier erlaubt

ITCSS-Dateistruktur

Ein typischer Aufbau von ITCSS-Dateien:

  <pre class="file-tree">src/styles/
  01-settings/
    _colors.scss
    _typography.scss
    _spacing.scss
  02-tools/
    _mixins.scss
  03-generic/
    _reset.scss
  04-elements/
    _headings.scss
    _links.scss
  05-objects/
    _container.scss
    _media.scss
  06-components/
    _button.scss
    _card.scss
  07-utilities/
    _text-align.scss
    _display.scss</pre>

7-1-Muster

Das 7-1-Muster organisiert Sass in 7 Ordner und 1 Hauptdatei, die alles importiert:

  • abstracts/ — Variablen, Funktionen, Mixins
  • base/ — Reset, Typografie, Basiselemente
  • components/ — Buttons, Karten, Modalfenster
  • layout/ — Header, Footer, Sidebar, Grid
  • pages/ — seitenspezifische Styles
  • themes/ — mehrere Themes
  • vendors/ — CSS von Drittanbietern

Haupt-Einstiegsdatei

Eine zentrale main.scss-Datei importiert alle Partials in der richtigen Reihenfolge:

  <pre class="file-tree">@use 'abstracts/variables';
@use 'abstracts/mixins';
@use 'base/reset';
@use 'base/typography';
@use 'components/button';
@use 'components/card';
@use 'layout/header';</pre>

CSS-Schichten (@layer) zur Organisation

Das moderne CSS-Feature @layer bietet dieselben Vorteile bei der Kaskadenreihenfolge wie ITCSS, jedoch ohne Präprozessor. Schichten werden einmal deklariert und ihre Priorität bleibt unabhängig von der Reihenfolge im Quelltext festgelegt.

  <div class="card text-primary">Layered card text</div>

Colocation im Vergleich zur zentralen Ablage

Eine Alternative zu zentralen Style-Dateien ist die Colocation von Komponenten-CSS direkt neben der Komponentendatei. Das ist in React/Vue-Projekten mit CSS Modules oder CSS-in-JS üblich.

Sass-Partials benennen

Sass-Partial-Dateien beginnen mit einem Unterstrich (_button.scss). Der Unterstrich signalisiert Sass, dass die Datei nicht eigenständig kompiliert wird — sie muss in eine Hauptdatei importiert werden.

PostCSS als Alternative

Wenn Sie Sass nicht verwenden, erreichen Sie mit PostCSS und dem @import-Plugin oder mit nativer CSS-Syntax wie @import und @layer dieselbe Dateiorganisation ohne Präprozessor.

CSS-Dateien für Komponenten

Unabhängig davon, ob Sie ITCSS, das 7-1-Muster oder Colocation verwenden, sollte jede Komponente eine eigene Datei haben. Benennen Sie die Datei nach der Komponente, deren Styles sie enthält: _card.scss, button.css, Nav.module.css.

Kurzer Test

Welche Schicht befindet sich bei ITCSS ganz oben im umgekehrten Dreieck (am breitesten bzw. am wenigsten spezifisch)?

Zusammenfassung

ITCSS ordnet CSS-Schichten von allgemein bis spezifisch entsprechend der Kaskade. Das 7-1-Muster organisiert Sass in 7 Ordnern, die über eine zentrale Hauptdatei importiert werden. Das moderne CSS-Feature @layer bietet diese Kontrolle über die Kaskade nativ. Ob zentral oder direkt bei der Komponente abgelegt: Das entscheidende Prinzip lautet, für jede Komponente eine eigene Datei zu verwenden und die Imports konsistent zu ordnen.

Häufig gestellte Fragen

Ist die Lektion „Dateiorganisation: ITCSS und 7-1-Muster“ kostenlos?

Ja — der vollständige Text von „Dateiorganisation: ITCSS und 7-1-Muster“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Dateiorganisation: ITCSS und 7-1-Muster“?

Strukturieren Sie CSS-Dateien mit dem Inverted-Triangle- oder 7-1-Muster für skalierbare Projekte. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Dateiorganisation: ITCSS und 7-1-Muster“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Warum CSS-Architektur wichtig ist
  2. BEM: Benennung von Block, Element und Modifier
  3. Dateiorganisation: ITCSS und 7-1-Muster
  4. Spezifitätskonflikte vermeiden
← Zurück zu CSS Academy