SASS und BEM

Dieser Artikel erklärt SASS und BEM.

Wir erklären die Konzepte und Implementierungsmethoden zur Vermeidung von Verwirrung und Fragilität, die häufig bei groß angelegtem CSS auftreten, anhand von SASS und BEM sowie konkreten Beispielen.

YouTube Video

SASS und BEM

Mit zunehmender Anzahl an Dateien und Bildschirmseiten treten bei CSS oft Probleme auf wie: 'Ich weiß nicht, wo dieser Stil definiert ist' und 'Eine kleine Änderung hat das Aussehen auf einem anderen Bildschirm zerstört.'.

Das liegt daran, dass CSS von Natur aus eine Sprache ist, die keine Designregeln erzwingt. Wenn du einfach weiterschreibst wie bisher, nehmen unbeabsichtigte Abhängigkeiten zu.

SASS und BEM sind praktische Techniken, um CSS von einer Ad-hoc-Schreibweise in eine gestaltete und verwaltbare Struktur zu überführen und so solche Probleme zu vermeiden. Durch die Kombination beider Ansätze kannst du die Bedeutung der Styles klären und gleichzeitig Lesbarkeit, Wiederverwendbarkeit und Wartbarkeit verbessern.

Gründe, warum CSS leicht unübersichtlich wird

Nachfolgendes CSS kann später schwer nachvollziehbar machen, wie es sich verhält, wenn man den Code erneut betrachtet.

 1.title {
 2  font-size: 16px;
 3  color: #333;
 4}
 5
 6.container .title {
 7  font-size: 18px;
 8}
 9
10.sidebar .container .title {
11  color: red;
12}

• In diesem Beispiel sieht die gleiche .title-Klasse je nach Platzierung unterschiedlich aus, sodass man nicht sofort erkennen kann, welcher Stil auf .title angewendet wird.
• Wenn Selektoren immer tiefer und abhängiger von Elternelementen werden, wird der Einflussbereich schwer vorhersehbar und das CSS kann beim Ändern leichter kaputtgehen.

BEM ist eine Namenskonvention, die 'Rollen durch Namen ausdrückt'

BEM steht für Block / Element / Modifier und enthält im Namen, welche Komponente die Klasse darstellt und in welchem Zustand sie ist.

• Block ist eine unabhängige Komponente.
• Element ist ein internes Element des Blocks.
• Modifier steht für einen Zustand oder eine Variante.

1.card {}
2.card__title {}
3.card--highlighted {}

Mit dieser Namenskonvention kannst du die Struktur und Rolle allein durch das HTML erkennen.

Grundform eines HTML unter Verwendung von BEM

Hier ist ein Beispiel für eine Karten-UI in HTML unter Verwendung von BEM.

1<div class="card card--highlighted">
2  <h2 class="card__title">Title</h2>
3  <p class="card__text">Description</p>
4</div>

Schon an den Klassennamen siehst du, dass es sich um eine „card“-Komponente handelt, darin ein „title“ und einen „hervorgehobenen Zustand“. Das ist der größte Vorteil von BEM.

BEM allein kann jedoch zu sehr ausführlichem CSS führen.

Wenn du BEM direkt ins CSS schreibst, nimmt die Code-Menge tendenziell zu.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Hier kannst du mit SASS strukturierten Code erhalten, der die Gliederung beibehält.

BEM lässt sich durch das Verschachteln in SASS natürlich ausdrücken

Mit SASS-Verschachtelung kannst du die BEM-Struktur direkt im Code abbilden.

 1.card {
 2  padding: 16px;
 3
 4  &__title {
 5    font-size: 18px;
 6  }
 7
 8  &__text {
 9    font-size: 14px;
10  }
11
12  &--highlighted {
13    border: 2px solid orange;
14  }
15}

& verweist auf den Eltern-Selektor und funktioniert sehr gut mit BEM-Benennung.

Das aus diesem SASS generierte CSS

Das obige SASS wird zu folgendem CSS kompiliert.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Obwohl das Aussehen gleich bleibt, ist die kognitive Belastung für Entwickler deutlich geringer.

Gestaltetes Arbeiten für die sichere Nutzung von Modifiers

Da Modifier bei BEM 'Zustände' darstellen, sollte man sie auf Überschreibungen beschränken.

 1.button {
 2  padding: 8px 12px;
 3  background: #eee;
 4
 5  &--primary {
 6    background: blue;
 7    color: white;
 8  }
 9
10  &--disabled {
11    opacity: 0.5;
12    pointer-events: none;
13  }
14}

Das Design wird stabiler, wenn Modifier nicht als 'Ergänzungen', sondern als 'Änderungen' verwendet werden.

Verschachtelung von Elementen auf eine Ebene begrenzen

Bei BEM ist es wichtig, Elemente nicht zu tief zu verschachteln.

1.card {
2  &__header {
3    font-weight: bold;
4  }
5
6  &__body {
7    margin-top: 8px;
8  }
9}

Mehrstufige Elemente wie .card__header__title sind ein Indiz dafür, dass du den Block besser aufteilen solltest.

Ein Beispiel für die Struktur von SASS-Dateien

Zum Schluss ein Beispiel für eine SASS-Struktur, die sich in realen Projekten bewährt.

1styles/
2├── base/
3│   └── reset.scss
4├── components/
5│   ├── card.scss
6│   └── button.scss
7├── layout/
8│   └── header.scss
9└── main.scss

Wenn du jede Komponente als 1 Block = 1 Datei verwaltest, sinkt die Fehleranfälligkeit.

Beispiel für card.scss

 1.card {
 2  padding: 16px;
 3  border: 1px solid #ccc;
 4
 5  &__title {
 6    font-size: 18px;
 7  }
 8
 9  &__text {
10    color: #666;
11  }
12}

Da jede Einheit in sich abgeschlossen ist, sind Löschen, Verschieben und Wiederverwenden einfach.

Zusammenfassung

SASS und BEM sind nicht bloß moderne Techniken – sie sind praktische Ansätze, um CSS in gestaltbaren Code zu verwandeln.

• BEM benennt Bedeutung und Rolle.
• SASS ermöglicht einfaches Schreiben unter Beibehaltung der Struktur.
• Die Kombination beider Methoden macht CSS weniger fehleranfällig.

Schreiben wir das CSS heute so, dass dein zukünftiges Ich es versteht.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video