CSS og BEM

Denne artikel forklarer CSS og BEM.

YouTube Video

HTML til forhåndsvisning

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 og BEM: En tilgang til effektiv styring af stilarter

CSS er et grundlæggende sprog, der bruges til at definere udseendet på et website. Det kan dog være udfordrende at håndtere CSS effektivt, især for store projekter. BEM (Block Element Modifier) er en CSS-navngivningskonvention designet til at løse disse problemer og forbedre genanvendelighed og vedligeholdelse.

Udfordringer i CSS og behovet for BEM

Udfordringer i CSS inkluderer følgende problemer:.

  1. Global navnerumskonflikt: I CSS er klassenavne globale, hvilket udgør en risiko for konflikter mellem forskellige komponenter.
  2. Overforbrug af komplekse selektorer: Overdrevent komplekse efterkommer- eller ID-selektorer øger specificiteten, hvilket gør fremtidige ændringer svære.
  3. Reduceret genanvendelighed: Specifikke stilarter bliver sværere at genbruge i andre komponenter.

BEM blev designet til at løse disse problemer.

Grundlæggende begreber i BEM

BEM består af tre hovedelementer:.

  1. Block: En uafhængig komponent med sin egen betydning.
  2. Element: En del af en blok, der er logisk forbundet med den.
  3. Modifier: Ændrer udseendet eller opførelsen af en blok eller et element.

BEM-navngivningskonventioner følger nedenstående format:.

.block__element--modifier
  • block: Komponentnavnet på blokken.
  • element: Et element, der er en del af blokken.
  • modifier: Repræsenterer en specifik tilstand eller stilvariation.

Praktisk eksempel

Nedenfor er et simpelt eksempel.

1<div class="button button--primary">
2  <span class="button__text">Click Me</span>
3</div>
  • button er en blok.
  • button__text er et element.
  • button--primary er en modifier.

Fordele ved BEM

Følgende er fordelene ved BEM.

  • Konsistens Fordi navngivningskonventionen er konsekvent, bliver koden lettere at læse.
  • Genanvendelighed Det bliver nemmere at genbruge komponenter.
  • Vedligeholdelse Andre udviklere kan lettere forstå koden, hvilket gør ændringer nemmere.

Opbygning af et projekt med BEM

HTML-design

Her er et eksempel på HTML, der anvender BEM.

 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

Skriv den tilsvarende CSS til HTML'en som følger.

 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}
  • Denne CSS definerer modulære stilarter ved hjælp af BEM (Block Element Modifier)-konventionen for at forbedre genanvendelighed og vedligeholdelse.

Udvidelse af stilarter

Lad os se på, hvordan man tilføjer en ny modifier for at gøre et bestemt menupunkt inaktivt.

Den tilsvarende HTML ville se sådan ud.

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}
  • Denne CSS definerer en modifier, der visuelt dæmper inaktive menupunkter og deaktiverer klikinteraktioner.

Ofte stillede spørgsmål

Når du bruger BEM, kan du huske på følgende punkter.

Spørgsmål 1: Skal jeg strengt overholde BEM's navnekonventioner?

Det er ikke nødvendigt at følge BEMs navngivningsregler strengt, men det er vigtigt at opretholde konsistens. Etabler ensartede regler i projektet og sørg for, at hele teamet følger dem.

Spørgsmål 2: Gør indførelsen af BEM ikke CSS mere omfangsrig?

Indførelse af BEM kan føre til længere CSS-klassenavne, men det gør komponenternes roller tydeligere. Som resultat forbedres vedligeholdelsen, og fordelene opvejer redundansen.

Spørgsmål 3: Kan BEM bruges sammen med andre CSS-rammeværker?

BEM kan bruges sammen med andre CSS-rammeværk. For eksempel, selv når du bruger Tailwind CSS eller Bootstrap, kan du anvende BEM på brugerdefinerede komponenter.

Konklusion

BEM giver en klar navngivningskonvention for at modulopdele og gøre CSS lettere at administrere. Ved at bruge denne metode kan du forhindre stilkonflikter og markant forbedre vedligeholdelsen og genanvendeligheden. At designe passende navngivningskonventioner bidrager til forbedret projektkvalitet og produktivitet.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video