Wenn wir mit Angular arbeiten, ist die Organisation des CSS-Codes entscheidend, um ein skalierbares und leicht wartbares Projekt zu gewährleisten. Eine der am häufigsten verwendeten Methoden zur Strukturierung von Styles ist BEM (Block, Element, Modifier).
In diesem Artikel erklären wir, was BEM ist und wie man es in Angular mit einfachen Beispielen anwendet. Außerdem gehen wir auf seine Vorteile und bewährten Praktiken ein.
Was ist BEM?
BEM ist ein Ansatz zur Benennung von CSS-Klassen, der darauf abzielt, die Struktur, Klarheit und Wartbarkeit des Codes zu verbessern.
Die Namenskonvention für Blöcke, Elemente und Modifikatoren ist wie folgt:
- Block: Ein eigenständiges Komponentenelement, das mehrere Teile gruppiert.
- Element: Bestandteile eines Blocks, die ihn zusammenstellen.
- Modifier: Verändert das Erscheinungsbild oder Verhalten eines Blocks oder Elements.
.block { }
.block__element { }
.block--modifier { }
Warum die BEM-Methodik in Angular anwenden?
Angular basiert auf Komponenten, sodass die Anwendung von BEM ideal ist. Außerdem wird sie dadurch begünstigt, dass jede Komponente ihre eigene CSS- oder SCSS-Datei hat. Schauen wir uns ein praktisches Beispiel an.
Beispiel für BEM in einer Angular-Komponente
Angenommen, wir haben eine Card-Komponente. Dazu gehören zwei Dateien: die HTML-Struktur und die CSS- oder SCSS-Style.
HTML-Struktur (card.component.html)
<div class="card">
<h2 class="card__title">Título del Producto</h2>
<p class="card__description">Descripción breve del producto.</p>
<button class="card__button card__button--primary">Comprar</button>
</div>
Formatvorlagen mit BEM (card.component.scss)In diesem Beispiel sehen wir, dass der Hauptblock die Klasse card enthält, zu der die untergeordneten Elemente card__title, card__description und card__button gehören. Dadurch wird eine hierarchische Struktur sowohl im HTML als auch im CSS beibehalten.
Der &__-Selektor wird verwendet, um die Elemente eines Blocks zu kennzeichnen, während der &–-Selektor für Modifikatoren genutzt wird. In unserem Fall hat card__button den Modifikator primary, der nach folgender Syntax angegeben wird:
card__button card__button–primary.
Auf diese Weise können wir die benötigten Modifikatoren anwenden. Zudem können wir dank des komponentenbasierten Potenzials von Angular jeden Modifikator dynamisch auswerten, der übergeben wird. Zum Beispiel können wir im folgenden Fall den Modifikator mit ngClass einfügen, abhängig von der Variablen primary, wenn diese den Wert true hat.
HTML-Struktur mit bedingtem Modifikator (card.component.html)
<div class="card">
<h2 class="card__title">Título del Producto</h2>
<p class="card__description">Descripción breve del producto.</p>
<button
class="card__button
[ngClass]="primary ? 'card__button--primary' : ''"
>Comprar</button>
</div>
Vorteile der Verwendung von BEM in Angular
1. Modularität und Wiederverwendbarkeit
Jede Komponente in Angular ist gekapselt, so dass Stile definiert werden können, ohne andere Elemente der Anwendung zu beeinträchtigen. Mit BEM wird diese Modularität verstärkt, so dass Blöcke auf flexible Weise wiederverwendet werden können.
2. Skalierbarkeit
Große Projekte können ohne Komplikationen wachsen, da BEM das Hinzufügen neuer Stile und Komponenten ohne unerwartete Störungen erleichtert.
3. Wartbarkeit
Durch die klare Struktur von BEM ist der Code leicht zu lesen und zu verstehen, was den Entwicklern hilft, das Projekt im Laufe der Zeit zu pflegen, ohne dass ein größeres Refactoring erforderlich ist.
Beste Praktiken bei der Verwendung von BEM in Angular
1. Tief verschachtelte Selektoren vermeiden
In Angular ist es üblich, dass Selektoren gekapselt sind. Ein übermäßiger Einsatz von tief verschachtelten Selektoren kann jedoch den Code weniger wartbar machen. Es wird empfohlen, die BEM-Struktur sauber zu halten, ohne unnötige Verschachtelungen.
2. Konsistenz bei der Benennung
Die Verwendung eines einheitlichen Formats für alle Komponenten sorgt für eine bessere Zusammenarbeit im Team. Das Festlegen interner Richtlinien hilft, die Kohärenz im Projekt zu wahren.
3. Verwendung von Variablen und Mixins in SCSS
SCSS ermöglicht das Definieren von Variablen und Mixins, um die Wiederverwendbarkeit des Codes zu verbessern. Es ist ratsam, diese mit der BEM-Methodologie zu kombinieren, um einen effizienteren Code zu erzielen.
$primary-color: #007bff;
.card {
background-color: #f5f5f5;
padding: 20px;
border-radius: 8px;
&__title {
font-size: 1.5rem;
color: #333;
}
&__button {
@mixin button-style($bg-color) {
padding: 10px 20px;
border: none;
cursor: pointer;
background-color: $bg-color;
color: #fff;
}
&--primary {
@include button-style($primary-color);
}
}
}
Schlussfolgerung
Durch den Einsatz von BEM in Angular erhalten wir einen saubereren, besser organisierten und wartbaren Code. Dank ihrer klaren Struktur verbessert diese Methodik die Skalierbarkeit und die Zusammenarbeit im Team.
Wata Factory ist führend in den neuesten Technologien und betrachtet BEM als eine sehr leistungsstarke und nützliche Methodik für die Anwendung in unseren Angular-Projekten.
