CSS og BEM
Denne artikkelen forklarer CSS og BEM.
YouTube Video
HTML for 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 & 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 og BEM: En tilnærming for effektiv stilhåndtering
CSS er et grunnleggende språk som brukes til å definere utseendet på et nettsted. Å håndtere CSS effektivt kan imidlertid være utfordrende, spesielt for storskala prosjekter. BEM (Block Element Modifier) er en navnekonvensjon for CSS designet for å løse disse problemene og forbedre gjenbruk og vedlikeholdbarhet.
Utfordringer i CSS og behovet for BEM
Utfordringer i CSS inkluderer følgende problemer:.
- Global navnekonflikt: I CSS er klassenavn globale, noe som medfører risiko for kollisjon mellom forskjellige komponenter.
- Overforbruk av komplekse selektorer: Overdreven bruk av etterkommer- eller ID-selektorer øker spesifisiteten, noe som gjør fremtidige endringer vanskeligere.
- Redusert gjenbrukbarhet: Spesifikke stiler blir vanskeligere å gjenbruke i andre komponenter.
BEM ble designet for å løse disse problemene.
Grunnleggende konsepter for BEM
BEM består av tre hovedelementer:.
- Blokk: En uavhengig komponent med egen betydning.
- Element: En del av en blokk, logisk forbundet med den.
- Modifikator: Endrer utseendet eller oppførselen til en blokk eller et element.
BEM-navnekonvensjoner følger formatet nedenfor:.
.block__element--modifierblokk: Komponentnavnet til blokken.element: Et element som er en del av blokken.modifikator: Representerer en spesifikk tilstand eller stilsvariasjon.
Praktisk eksempel
Nedenfor er et enkelt eksempel.
1<div class="button button--primary">
2 <span class="button__text">Click Me</span>
3</div>buttoner en blokk.button__texter et element.button--primaryer en modifikator.
Fordeler med BEM
Følgende er fordelene med BEM.
- Konsistens Fordi navnekonvensjonen er konsistent, blir koden lettere å lese.
- Gjenbrukbarhet Det blir lettere å gjenbruke komponenter.
- Vedlikeholdbarhet Andre utviklere kan lettere forstå koden, noe som gjør endringer enklere.
Bygge et prosjekt ved bruk av BEM
HTML-design
Her er et eksempel på HTML som bruker 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-en for 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-en definerer modulære stiler ved å bruke BEM (Block Element Modifier)-konvensjonen for å forbedre gjenbrukbarhet og vedlikeholdbarhet.
Utvide stiler
La oss se på hvordan man legger til en ny modifikator for å gjøre et spesifikt menyelement inaktivt.
Den tilsvarende HTML-en vil se slik ut.
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-en definerer en modifikator som visuelt demper inaktive menyelementer og deaktiverer klikkinteraksjoner.
Ofte stilte spørsmål
Når du bruker BEM, bør du huske på følgende punkter.
Q1: Må jeg strengt følge BEMs navnekonvensjoner?
Det er ikke nødvendig å følge BEMs navngivningsregler strengt, men det er viktig å opprettholde konsistens. Etabler enhetlige regler i prosjektet og sørg for at hele teamet følger dem.
Q2: Gjør ikke innføringen av BEM CSS mer omstendelig?
Innføring av BEM kan føre til lengre CSS-klassenavn, men dette gjør komponentenes roller tydeligere. Som et resultat forbedres vedlikeholdbarheten, og fordelene oppveier overfloden.
Q3: Kan BEM brukes sammen med andre CSS-rammeverk?
BEM kan brukes sammen med andre CSS-rammeverk. For eksempel, selv når du bruker Tailwind CSS eller Bootstrap, kan du bruke BEM på tilpassede komponenter.
Konklusjon
BEM gir en tydelig navnekonvensjon for å modulere og gjøre CSS enklere å håndtere. Ved å bruke denne metoden kan du forhindre stilkonflikter og dramatisk forbedre vedlikeholdbarhet og gjenbrukbarhet. Å utforme passende navnekonvensjoner bidrar til forbedret prosjektkvalitet og produktivitet.
Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.