Articles
Einführung in CSS
CSS und BEM

CSS und BEM

Dieser Artikel erklärt CSS und BEM.

YouTube Video

HTML zur Vorschau

css-bem.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>BEM Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-bem.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS &amp; BEM(Block Element Modifier)</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>BEM Example</h2>
20        </header>
21        <article>
22            <h3>BEM HTML Example</h3>
23            <section>
24                <header><h4>HTML</h4></header>
25<pre class="sample">
26&lt;div class=&quot;button button--primary&quot;&gt;
27    &lt;span class=&quot;button__text&quot;&gt;Click Me&lt;/span&gt;
28&lt;/div&gt;
29</pre>
30            </section>
31        </article>
32        <article>
33            <h3>BEM Example</h3>
34            <section>
35                <header><h4>HTML</h4></header>
36<pre class="sample">
37&lt;header class=&quot;header&quot;&gt;
38    &lt;div class=&quot;header__logo&quot;&gt;My Logo&lt;/div&gt;
39    &lt;nav class=&quot;header__nav&quot;&gt;
40        &lt;ul class=&quot;header__menu&quot;&gt;
41            &lt;li class=&quot;header__menu-item header__menu-item--active&quot;&gt;Home&lt;/li&gt;
42            &lt;li class=&quot;header__menu-item&quot;&gt;About&lt;/li&gt;
43            &lt;li class=&quot;header__menu-item&quot;&gt;Contact&lt;/li&gt;
44        &lt;/ul&gt;
45    &lt;/nav&gt;
46&lt;/header&gt;
47</pre>
48            </section>
49            <header><h4>HTML+CSS</h4></header>
50            <section class="sample-view">
51                <header class="header">
52                    <div class="header__logo">My Logo</div>
53                    <nav class="header__nav">
54                        <ul class="header__menu">
55                            <li class="header__menu-item header__menu-item--active">Home</li>
56                            <li class="header__menu-item">About</li>
57                            <li class="header__menu-item">Contact</li>
58                        </ul>
59                    </nav>
60                </header>
61            </section>
62        </article>
63        <article>
64            <h3>BEM Example</h3>
65            <section>
66                <header><h4>HTML</h4></header>
67<pre class="sample">
68&lt;header class=&quot;header&quot;&gt;
69    &lt;div class=&quot;header__logo&quot;&gt;My Logo&lt;/div&gt;
70    &lt;nav class=&quot;header__nav&quot;&gt;
71        &lt;ul class=&quot;header__menu&quot;&gt;
72            &lt;li class=&quot;header__menu-item header__menu-item--active&quot;&gt;Home&lt;/li&gt;
73            &lt;li class=&quot;header__menu-item&quot;&gt;About&lt;/li&gt;
74            &lt;li class=&quot;header__menu-item&quot;&gt;Contact&lt;/li&gt;
75            &lt;li class=&quot;header__menu-item header__menu-item--disabled&quot;&gt;Disabled&lt;/li&gt;
76        &lt;/ul&gt;
77    &lt;/nav&gt;
78&lt;/header&gt;
79</pre>
80            </section>
81            <header><h4>HTML+CSS</h4></header>
82            <section class="sample-view">
83                <header class="header">
84                    <div class="header__logo">My Logo</div>
85                    <nav class="header__nav">
86                        <ul class="header__menu">
87                            <li class="header__menu-item header__menu-item--active">Home</li>
88                            <li class="header__menu-item">About</li>
89                            <li class="header__menu-item">Contact</li>
90                            <li class="header__menu-item header__menu-item--disabled">Disabled</li>
91                        </ul>
92                    </nav>
93                </header>
94            </section>
95        </article>
96    </main>
97</body>
98</html>

CSS und BEM: Ein Ansatz für effektives Stilmanagement

CSS ist eine grundlegende Sprache, die verwendet wird, um das Erscheinungsbild einer Website zu definieren. Allerdings kann die effektive Verwaltung von CSS, insbesondere bei groß angelegten Projekten, schwierig sein. BEM (Block Element Modifier) ist eine CSS-Namenskonvention, die entworfen wurde, um diese Probleme zu lösen und die Wiederverwendbarkeit und Wartbarkeit zu verbessern.

Herausforderungen in CSS und die Notwendigkeit von BEM

Herausforderungen in CSS umfassen die folgenden Probleme:.

  1. Globale Namensraum-Kollision: In CSS sind Klassennamen global, was ein Risiko für Kollisionen zwischen verschiedenen Komponenten darstellt.
  2. Übermäßiger Einsatz komplexer Selektoren: Übermäßig komplexe Nachkommen- oder ID-Selektoren erhöhen die Spezifität, was zukünftige Änderungen erschwert.
  3. Verringerte Wiederverwendbarkeit: Spezifische Stile werden schwieriger in anderen Komponenten wiederzuverwenden.

BEM wurde entwickelt, um diese Probleme zu lösen.

Grundlegende Konzepte von BEM

BEM besteht aus drei Hauptelementen:.

  1. Block: Eine unabhängige Komponente mit eigener Bedeutung.
  2. Element: Ein Teil eines Blocks, der logisch mit ihm verbunden ist.
  3. Modifikator: Ändert das Erscheinungsbild oder Verhalten eines Blocks oder Elements.

Die Namenskonventionen von BEM folgen dem unten stehenden Format:.

.block__element--modifier
  • block: Der Komponentenname des Blocks.
  • element: Ein Element, das Teil des Blocks ist.
  • modifier: Repräsentiert einen bestimmten Zustand oder eine Stilvariante.

Praktisches Beispiel

Im Folgenden ein einfaches Beispiel.

1<div class="button button--primary">
2  <span class="button__text">Click Me</span>
3</div>
  • button ist ein Block.
  • button__text ist ein Element.
  • button--primary ist ein Modifikator.

Vorteile von BEM

Die folgenden sind die Vorteile von BEM.

  • Konsistenz Da die Namenskonvention konsistent ist, wird der Code leichter lesbar.
  • Wiederverwendbarkeit Es wird einfacher, Komponenten wiederzuverwenden.
  • Wartbarkeit Andere Entwickler können den Code leichter verstehen, wodurch Änderungen einfacher werden.

Ein Projekt mit BEM erstellen

HTML-Design

Hier ist ein Beispiel für HTML, das BEM anwendet.

 1<header class="header">
 2  <div class="header__logo">My Logo</div>
 3  <nav class="header__nav">
 4    <ul class="header__menu">
 5      <li class="header__menu-item header__menu-item--active">Home</li>
 6      <li class="header__menu-item">About</li>
 7      <li class="header__menu-item">Contact</li>
 8    </ul>
 9  </nav>
10</header>

CSS-Design

Schreiben Sie das entsprechende CSS für das HTML wie folgt.

 1.header {
 2  background-color: #333;
 3  color: #fff;
 4  padding: 10px;
 5}
 6
 7.header__logo {
 8  font-size: 24px;
 9}
10
11.header__nav {
12  display: flex;
13  justify-content: space-around;
14}
15
16.header__menu {
17  list-style: none;
18  margin: 0;
19  padding: 0;
20  display: flex;
21}
22
23.header__menu-item {
24  margin: 0 10px;
25  padding: 5px 10px;
26}
27
28.header__menu-item--active {
29  font-weight: bold;
30  border-bottom: 2px solid #fff;
31}
  • Dieses CSS definiert modulare Stile unter Verwendung der BEM-Konvention (Block Element Modifier), um Wiederverwendbarkeit und Wartbarkeit zu verbessern.

Stile erweitern

Schauen wir uns an, wie man einen neuen Modifier hinzufügt, um einen bestimmten Menüpunkt inaktiv zu machen.

Das entsprechende HTML würde so aussehen.

1<li class="header__menu-item header__menu-item--disabled">Disabled</li>
1.header__menu-item--disabled {
2  opacity: 0.5;
3  pointer-events: none;
4}
  • Dieses CSS definiert einen Modifier, der inaktive Menüpunkte optisch abdunkelt und Klickinteraktionen deaktiviert.

Häufig gestellte Fragen

Beim Einsatz von BEM sollten folgende Punkte beachtet werden.

F1: Muss ich mich strikt an die Namenskonventionen von BEM halten?

Es ist nicht notwendig, die BEM-Namensregeln strikt einzuhalten, aber die Wahrung der Konsistenz ist wichtig. Erstellen Sie einheitliche Regeln innerhalb des Projekts und stellen Sie sicher, dass das gesamte Team sie einhält.

F2: Macht die Einführung von BEM CSS nicht ausführlicher?

Die Verwendung von BEM kann zu längeren CSS-Klassennamen führen, aber dadurch werden die Rollen der Komponenten klarer. Dadurch verbessert sich die Wartbarkeit und die Vorteile überwiegen die Redundanzen.

F3: Kann BEM zusammen mit anderen CSS-Frameworks verwendet werden?

BEM kann zusammen mit anderen CSS-Frameworks verwendet werden. Zum Beispiel kannst du BEM auch bei der Verwendung von Tailwind CSS oder Bootstrap auf benutzerdefinierte Komponenten anwenden.

Fazit

BEM bietet eine klare Namenskonvention, um das CSS zu modularisieren und die Verwaltung zu erleichtern. Durch die Verwendung dieser Methode können Stilkonflikte vermieden und die Wartbarkeit sowie Wiederverwendbarkeit erheblich verbessert werden. Die Entwicklung geeigneter Namenskonventionen trägt zur Verbesserung der Projektqualität und Produktivität bei.

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

`aspect-ratio`-Eigenschaft und responsives Design