CSS BEM-Modell – Ein Leitfaden zum Schreiben von skalierbarem und wartbarem CSS

In diesem Artikel befassen wir uns mit der BEM-Methodik (Block, Element, Modifier), einer beliebten CSS-Namenskonvention, die Ihnen hilft, sauberes, strukturiertes und wartbares CSS für große Projekte zu schreiben. BEM stellt sicher, dass Ihr Code auch dann skalierbar bleibt, wenn das Projekt wächst, und verringert das Risiko von Stilkonflikten.

1. Was ist BEM?

BEM steht für:

• Block: Eine eigenständige Entität, die für sich genommen eine Bedeutung hat, z. B. eine Schaltfläche, ein Menü oder ein Formular.
• Element: Ein Teil des Blocks, der eine bestimmte Funktion ausführt, z. B. eine Schaltflächenbeschriftung oder ein Menüelement.
• Modifikator: Eine Variation oder ein Zustand eines Blocks oder Elements, wie eine deaktivierte Schaltfläche oder ein hervorgehobener Menüpunkt.

Bei der BEM-Methodik liegt der Schwerpunkt auf der Erstellung wiederverwendbaren, vorhersehbaren und wartbaren CSS-Code.

BEM-Namenskonvention:

.block {}
.block__element {}
.block--modifier {}

• Block: Stellt den Hauptcontainer dar.
• Element: Folgt dem Blocknamen, getrennt durch einen doppelten Unterstrich (__).
• Modifikator: Folgt dem Block- oder Elementnamen, getrennt durch einen doppelten Bindestrich (--).

2. Definieren der Struktur

Lassen Sie uns die Struktur von BEM anhand eines Beispiels aufschlüsseln.

Beispiel:

    

        
Home
        
About
        
Contact
    

In diesem Beispiel:

• Block: .menu ist der Hauptblock, der das Navigationsmenü darstellt.
• Element: .menu__list und .menu__item sind Elemente innerhalb des Blocks.
• Modifikator: .menu__item--active ist ein Modifikator, der den aktiven Status des Menüelements angibt.

3. Blöcke in BEM

Ein Block ist eine unabhängige, wiederverwendbare Komponente. Betrachten Sie es als eine in sich geschlossene Einheit, die an einer beliebigen Stelle in Ihrem Code platziert werden kann, ohne befürchten zu müssen, dass ihr Stil durch andere Elemente beeinflusst wird.

Beispiel:

.button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
}

Hier ist .button ein Block, der die Stile für eine Schaltflächenkomponente definiert. Sie können diesen Block in mehreren Teilen Ihrer Website wiederverwenden.

4. Elemente in BEM

Ein Element ist ein Teil eines Blocks, der keine eigenständige Bedeutung hat. Es ist an den Block gebunden und existiert, um eine mit dem Block verbundene Funktion auszuführen.

Beispiel:

.button__icon {
    margin-right: 10px;
}
.button__label {
    font-size: 14px;
}

Hier:

• .button__icon ist ein Element innerhalb des .button-Blocks, das ein Symbol in der Schaltfläche darstellt.
• .button__label ist ein weiteres Element, das die Textbeschriftung der Schaltfläche darstellt.

5. Modifikatoren in BEM

Ein Modifikator stellt eine Variation eines Blocks oder Elements dar. Modifikatoren werden verwendet, um das Erscheinungsbild oder Verhalten einer Komponente zu ändern, z. B. um die Farbe einer Schaltfläche zu ändern oder ein Element zu vergrößern.

Beispiel:

.button--primary {
    background-color: #2ecc71;
}
.button--large {
    padding: 15px 30px;
}

Hier:

• .button--primary ist ein Modifikator, der die Hintergrundfarbe der Schaltfläche ändert.
• .button--large ist ein weiterer Modifikator, der die Größe der Schaltfläche erhöht.

Modifikatoren können auch auf Elemente angewendet werden:

.button__icon--small {
    width: 10px;
    height: 10px;
}

6. Vorteile der Verwendung von BEM

• Skalierbarkeit: BEM ist skalierbar und eignet sich daher ideal für größere Projekte mit vielen Komponenten.
• Wiederverwendbarkeit: Blöcke sind in sich geschlossen und können in verschiedenen Teilen eines Projekts wiederverwendet werden.
• Wartbarkeit: BEM fördert eine klare, konsistente Benennung und erleichtert so die Pflege von CSS, wenn das Projekt wächst.
• Vorhersagbarkeit: Sie können leicht erkennen, welche Elemente zu welchen Blöcken gehören, und ihre Variationen anhand des Modifikators verstehen.

7. BEM in Aktion

Sehen wir uns ein vollständigeres Beispiel an, das Blöcke, Elemente und Modifikatoren enthält:

HTML:

    

        
Card Title
    
    

        
This is a simple card component.
    
    

        Read More
    

CSS:

/* Block */
.card {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
}

/* Elements */
.card__header {
    margin-bottom: 15px;
}
.card__title {
    font-size: 18px;
    color: #333;
}
.card__body {
    margin-bottom: 15px;
}
.card__text {
    color: #666;
}
.card__footer {
    text-align: right;
}

/* Modifier */
.card__button--primary {
    background-color: #3498db;
    color: white;
}

In diesem Beispiel:

• .card ist der Block, der die gesamte Kartenkomponente darstellt.
• .card__header, .card__title, .card__body und .card__footer sind Elemente innerhalb des Kartenblocks.
• .card__button--primary ist ein Modifikator, der einen primären Stil auf die Schaltfläche innerhalb der Karte anwendet.

8. Häufige Fehler, die es bei BEM zu vermeiden gilt

• Zu viele verschachtelte Elemente: Vermeiden Sie tief verschachtelte Elemente, da dies zu unnötig langen Klassennamen führen kann.
• Unnötige Modifikatoren: Verwenden Sie Modifikatoren nur, wenn Sie das Aussehen oder den Status eines Blocks oder Elements ändern müssen.
• Kombination von BEM mit anderen Namenskonventionen: Halten Sie sich während Ihres gesamten Projekts an BEM, um Konsistenz zu gewährleisten.

Abschluss

Die BEM-Methodik ist eine leistungsstarke Möglichkeit, Ihr CSS organisiert, vorhersehbar und skalierbar zu halten. Indem Sie Ihre Komponenten in Blöcke, Elemente und Modifikatoren aufteilen, können Sie saubereren Code beibehalten und Stilkonflikte vermeiden, wodurch die Entwicklung schneller und effizienter wird als Ihr Projekt wächst.

Folgen Sie mir auf LinkedIn

Ridoy Hasan