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

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

In diesem Artikel befassen wir uns mit der BEM (Block, Element, Modifier)-Methodik, 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:

<div class="menu">
    <ul class="menu__list">
        <li class="menu__item menu__item--active">Home</li>
        <li class="menu__item">About</li>
        <li class="menu__item">Contact</li>
    </ul>
</div>

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 eigenständige Einheit, die an einer beliebigen Stelle in Ihrem Code platziert werden kann, ohne dass Sie befürchten 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 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:

<div class="card">
    <div class="card__header">
        <h2 class="card__title">Card Title</h2>
    </div>
    <div class="card__body">
        <p class="card__text">This is a simple card component.</p>
    </div>
    <div class="card__footer">
        <button class="button card__button card__button--primary">Read More</button>
    </div>
</div>

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 est le bloc qui représente l'intégralité du composant de la carte.
• .card__header, .card__title, .card__body et .card__footer sont des éléments du bloc de cartes.
• .card__button--primary est un modificateur qui applique un style principal au bouton de la carte.

8. Erreurs courantes à éviter dans BEM

• Trop d'éléments imbriqués : évitez les éléments profondément imbriqués, car cela peut conduire à des noms de classe inutilement longs.
• Modificateurs inutiles : n'utilisez des modificateurs que lorsque vous devez modifier l'apparence ou l'état d'un bloc ou d'un élément.
• Combiner BEM avec d'autres conventions de dénomination : respectez BEM tout au long de votre projet pour plus de cohérence.

Conclusion

La méthodologie BEM est un moyen puissant de garder votre CSS organisé, prévisible et évolutif. En décomposant vos composants en blocs, éléments et modificateurs, vous pouvez maintenir un code plus propre et éviter les conflits de style, rendant le développement plus rapide et plus efficace au fur et à mesure de votre projet. grandit.

Suivez-moi sur LinkedIn

Ridoy Hasan

Das obige ist der detaillierte Inhalt vonCSS BEM-Modell – Ein Leitfaden zum Schreiben von skalierbarem und wartbarem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!