Sauberes und organisiertes CSS zu schreiben ist wichtig, insbesondere bei größeren Projekten. Eine der besten Möglichkeiten, Ihr CSS zu strukturieren, ist die Verwendung der BEM-Namenskonvention. In diesem Artikel erklären wir, was BEM ist, warum es wichtig ist, welche Vor- und Nachteile es hat und zeigen Ihnen anhand von zwei Beispielen, wie Sie es verwenden.

Was ist BEM?

BEM steht für Block, Element und Modifier. Es handelt sich um ein Benennungssystem zum Schreiben von CSS-Klassennamen, das das Verständnis und die Wartung Ihres Codes erleichtert. Das Hauptziel von BEM besteht darin, Entwicklern dabei zu helfen, wiederverwendbares, modulares und skalierbares CSS zu schreiben.

1. Block: Eine eigenständige Komponente, die für sich genommen Sinn macht (z. B. eine Schaltfläche oder ein Formular).
2. Element: Ein Teil des Blocks, der für sich genommen keine Bedeutung hat und vom Block abhängig ist (z. B. ein Schaltflächensymbol).
3. Modifikator: Eine andere Version eines Blocks oder eines Elements (z. B. eine Schaltfläche mit einer anderen Farbe).

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

Warum BEM verwenden?

Die Verwendung von BEM hilft Ihnen, unordentliches und verwirrendes CSS zu vermeiden. Es bringt mehrere Vorteile mit sich:

• Konsistenz: Alle Klassennamen folgen dem gleichen Muster, wodurch Ihr Code vorhersehbarer und leichter verständlich wird.
• Wiederverwendbarkeit: Blöcke und Elemente können in verschiedenen Teilen eines Projekts wiederverwendet werden.
• Einfache Wartung: Andere Entwickler können Ihren Code einfach lesen und ändern.
• Vermeidet Konflikte: BEM hilft Ihnen, CSS-Konflikte zwischen verschiedenen Komponenten zu verhindern.

So verwenden Sie BEM: Beispiele

Beispiel 1: Eine einfache Schaltfläche

Beginnen wir mit einem einfachen Schaltflächenblock und sehen wir uns an, wie BEM funktioniert.

HTML:

  Submit

CSS:

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

.button--primary {
  background-color: blue;
}

Erläuterung:

• button ist ein Block, der den Hauptschaltflächenstil darstellt.
• button--primary ist ein Modifikator, der einen blauen Hintergrund auf diese bestimmte Schaltflächenversion anwendet.

Beispiel 2: Eine Kartenkomponente

Jetzt erstellen wir einen Kartenblock mit Titel und Beschreibung (Elemente) sowie einer kleinen Version (Modifikator).

HTML:

  
Title
  
This is a description.

CSS:

.card {
  padding: 20px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
}

.card__title {
  font-size: 18px;
  margin-bottom: 10px;
}

.card__description {
  font-size: 14px;
  color: #666;
}

.card--small {
  padding: 10px;
}

Erläuterung:

• Karte ist ein Block, der die Kartenkomponente darstellt.
• „card__title“ und „card__description“ sind Elemente, bestimmte Teile der Karte.
• card--small ist ein Modifikator, der den Abstand für die kleinere Version der Karte reduziert.

Vor- und Nachteile von BEM

Vorteile:

1. Organisiert und konsistent: Hilft, Ihr CSS sauber und gut strukturiert zu halten.
2. Vermeidet CSS-Konflikte: Reduziert das Risiko, dass Stile einer Komponente eine andere beeinflussen.
3. Wiederverwendbarkeit: Blöcke und Elemente können an mehreren Stellen in einem Projekt verwendet werden.
4. Einfach zu warten: Erleichtert die Aktualisierung und Verwaltung von CSS, auch wenn Ihr Projekt wächst.

Nachteile:

1. Lange Klassennamen: BEM-Klassennamen können ziemlich lang sein, was auf den ersten Blick überwältigend erscheinen kann.
2. Lernkurve: Es dauert einige Zeit, sich an die BEM-Struktur zu gewöhnen, insbesondere wenn Sie neu bei CSS sind.

Warum ist BEM wichtig?

BEM ist eine beliebte CSS-Methode, da sie sauberen und skalierbaren Code fördert. In großen Projekten kann CSS schnell schwierig zu verwalten sein. Bei BEM ist jeder Klassenname eindeutig und beschreibend, was das Verständnis des Zwecks jeder Klasse erleichtert. Es verhindert außerdem Probleme wie Stilkonflikte und sorgt für eine reibungslosere Zusammenarbeit zwischen Entwicklern.

Wenn Sie eine konsistente und modulare Methode zum Schreiben von CSS wünschen, ist BEM eine ausgezeichnete Wahl. Das Erlernen kann einige Zeit in Anspruch nehmen, aber auf lange Sicht sparen Sie Zeit und erstellen Ihr CSS wartbarer.

Abschluss

Die BEM-Namenskonvention ist eine großartige Möglichkeit, Ihr CSS organisiert und skalierbar zu halten. Es hilft, Konflikte zu vermeiden, macht Ihren Code wartbarer und fördert wiederverwendbare Komponenten. Obwohl es aufgrund der langen Klassennamen und der Lernkurve zunächst eine Herausforderung sein mag, überwiegen die Vorteile bei weitem die Nachteile. Wenn Sie saubereres CSS schreiben und die Zusammenarbeit in Ihren Projekten verbessern möchten, probieren Sie BEM aus!

Folgen Sie mir für weitere Updates!

Ich hoffe, dass Ihnen dieser Artikel dabei geholfen hat, die CSS-BEM-Namenskonventionen zu verstehen. Wenn Sie über weitere Artikel wie diesen, Tipps und Einblicke in die Webentwicklung auf dem Laufenden bleiben möchten, folgen Sie mir unbedingt. Wenn Sie Fragen oder Anregungen haben, können Sie sich jederzeit an uns wenden. Ich würde gerne von Ihnen hören!