CSS en BEM
Dit artikel legt CSS en BEM uit.
YouTube Video
HTML voor Voorbeeldweergave
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 & 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<div class="button button--primary">
27 <span class="button__text">Click Me</span>
28</div>
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<header class="header">
38 <div class="header__logo">My Logo</div>
39 <nav class="header__nav">
40 <ul class="header__menu">
41 <li class="header__menu-item header__menu-item--active">Home</li>
42 <li class="header__menu-item">About</li>
43 <li class="header__menu-item">Contact</li>
44 </ul>
45 </nav>
46</header>
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<header class="header">
69 <div class="header__logo">My Logo</div>
70 <nav class="header__nav">
71 <ul class="header__menu">
72 <li class="header__menu-item header__menu-item--active">Home</li>
73 <li class="header__menu-item">About</li>
74 <li class="header__menu-item">Contact</li>
75 <li class="header__menu-item header__menu-item--disabled">Disabled</li>
76 </ul>
77 </nav>
78</header>
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 en BEM: Een aanpak voor effectief stijlbeheer
CSS is een fundamentele taal die wordt gebruikt om het uiterlijk van een website te bepalen. CSS effectief beheren kan echter een uitdaging zijn, vooral bij grootschalige projecten. BEM (Block Element Modifier) is een CSS-namensysteem ontworpen om deze problemen op te lossen en herbruikbaarheid en onderhoudbaarheid te verbeteren.
Uitdagingen in CSS en de behoefte aan BEM
Uitdagingen in CSS omvatten de volgende problemen:.
- Globale naamruimtebotsingen: In CSS zijn klasse-namen globaal, wat het risico op botsingen tussen verschillende componenten met zich meebrengt.
- Overmatig gebruik van complexe selectors: Overmatig complexe afstammings- of ID-selectors verhogen de specificiteit, waardoor toekomstige wijzigingen moeilijker worden.
- Verminderde herbruikbaarheid: Specifieke stijlen worden moeilijker te hergebruiken in andere componenten.
BEM is ontworpen om deze problemen op te lossen.
Basisconcepten van BEM
BEM bestaat uit drie hoofdelementen:.
- Block (blok): Een onafhankelijke component met een eigen betekenis.
- Element: Een onderdeel van een blok, logisch verbonden ermee.
- Modifier (modifier): Wijzigt het uiterlijk of gedrag van een blok of element.
BEM-namensystemen volgen het onderstaande formaat:.
.block__element--modifierblock: De componentnaam van het blok.element: Een element dat onderdeel is van het blok.modifier: Vertegenwoordigt een specifieke toestand of stijlafwijking.
Praktisch voorbeeld
Hier is een eenvoudig voorbeeld.
1<div class="button button--primary">
2 <span class="button__text">Click Me</span>
3</div>buttonis een blok.button__textis een element.button--primaryis een modificator.
Voordelen van BEM
De volgende zijn de voordelen van BEM.
- Consistentie Omdat de naamgevingsconventie consistent is, wordt de code gemakkelijker te lezen.
- Hergebruikbaarheid Het wordt gemakkelijker om componenten opnieuw te gebruiken.
- Onderhoudbaarheid Andere ontwikkelaars kunnen de code gemakkelijker begrijpen, waardoor aanpassingen eenvoudiger worden.
Een project opzetten met BEM
HTML-ontwerp
Hier is een voorbeeld van HTML waarin BEM wordt toegepast.
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-ontwerp
Schrijf de bijbehorende CSS voor de HTML als volgt.
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}- Deze CSS definieert modulaire stijlen met behulp van de BEM (Block Element Modifier) conventie om hergebruik en onderhoudbaarheid te verbeteren.
Stijlen uitbreiden
Laten we kijken hoe je een nieuwe modifier kunt toevoegen om een specifiek menu-item inactief te maken.
De bijbehorende HTML zou er als volgt uitzien.
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}- Deze CSS definieert een modifier die inactieve menu-items visueel dimt en klikinteracties uitschakelt.
Veelgestelde vragen
Bij het gebruik van BEM kunt u rekening houden met de volgende punten.
V1: Moet ik me strikt houden aan de naamgevingsconventies van BEM?
Het is niet noodzakelijk om strikt de naamgevingsregels van BEM te volgen, maar het behouden van consistentie is belangrijk. Stel eenduidige regels binnen het project op en zorg ervoor dat het hele team deze volgt.
V2: Maakt het introduceren van BEM CSS niet uitgebreider?
Het invoeren van BEM kan leiden tot langere CSS-classnamen, maar hierdoor worden de rollen van componenten duidelijker. Hierdoor verbetert de onderhoudbaarheid en wegen de voordelen op tegen de overbodigheid.
V3: Kan BEM naast andere CSS-frameworks worden gebruikt?
BEM kan samen met andere CSS-frameworks worden gebruikt. Bijvoorbeeld, zelfs bij het gebruik van Tailwind CSS of Bootstrap, kun je BEM toepassen op aangepaste componenten.
Conclusie
BEM biedt een duidelijke naamgevingsconventie om CSS te modulariseren en het beheer te vereenvoudigen. Door deze methode te gebruiken kun je stijlconflicten voorkomen en de onderhoudbaarheid en herbruikbaarheid aanzienlijk verbeteren. Het ontwerpen van geschikte naamgevingsconventies draagt bij aan een hogere projectkwaliteit en productiviteit.
Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.