CSS och BEM
Den här artikeln förklarar CSS och BEM.
YouTube Video
HTML för förhandsgranskning
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 och BEM: En metod för effektiv stilhantering
CSS är ett grundläggande språk som används för att definiera utseendet på en webbplats. Det kan dock vara utmanande att hantera CSS effektivt, särskilt för storskaliga projekt. BEM (Block Element Modifier) är en CSS-namngivningskonvention som är utformad för att lösa dessa problem och förbättra återanvändbarhet och underhållbarhet.
Utmaningar inom CSS och behovet av BEM
Utmaningar inom CSS innefattar följande problem:.
- Global namnrymdskollision: I CSS är klasser globala, vilket gör att det finns en risk för kollision mellan olika komponenter.
- Överanvändning av komplexa selektorer: Alltför komplexa ättling- eller ID-selektorer ökar specificiteten, vilket försvårar framtida förändringar.
- Minskad återanvändbarhet: Specifika stilar blir svårare att återanvända i andra komponenter.
BEM skapades för att lösa dessa problem.
Grundläggande koncept för BEM
BEM består av tre huvudkomponenter:.
- Block: En självständig komponent med sin egen betydelse.
- Element: En del av ett block, logiskt kopplad till det.
- Modifierare: Ändrar ett blocks eller elements utseende eller beteende.
BEM-namngivningskonventioner följer formatet nedan:.
.block__element--modifierblock: Komponentnamnet för blocket.element: Ett element som är en del av blocket.modifierare: Representerar ett specifikt tillstånd eller en stilvariation.
Praktiskt exempel
Nedan är ett enkelt exempel.
1<div class="button button--primary">
2 <span class="button__text">Click Me</span>
3</div>buttonär ett block.button__textär ett element.button--primaryär en modifierare.
Fördelar med BEM
Följande är fördelarna med BEM.
- Konsistens Eftersom namngivningskonventionen är konsekvent blir koden lättare att läsa.
- Återanvändbarhet Det blir enklare att återanvända komponenter.
- Underhållbarhet Andra utvecklare kan förstå koden lättare, vilket gör ändringar enklare.
Bygga ett projekt med BEM
HTML-design
Här är ett exempel på HTML som använder 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 motsvarande CSS för HTML enligt följande.
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}- Denna CSS definierar modulära stilar med BEM (Block Element Modifier)-konventionen för att förbättra återanvändbarhet och underhållbarhet.
Utökning av stilar
Låt oss se hur man lägger till en ny modifierare för att göra ett specifikt menyalternativ inaktivt.
Den motsvarande HTML-koden skulle se ut så här.
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}- Denna CSS definierar en modifierare som visuellt tonar ner inaktiva menyalternativ och inaktiverar klickinteraktioner.
Vanliga frågor
När du använder BEM kan du ha följande punkter i åtanke.
F1: Måste jag strikt följa BEM:s namngivningskonventioner?
Det är inte nödvändigt att strikt följa BEM:s namngivningsregler, men det är viktigt att behålla konsekvensen. Fastställ enhetliga regler inom projektet och se till att hela teamet följer dem.
F2: Gör inte införandet av BEM CSS mer ordrik?
Att introducera BEM kan leda till längre CSS-klassnamn, men det gör komponenternas roller tydligare. Som ett resultat förbättras underhållbarheten och fördelarna överväger överflödet.
F3: Kan BEM användas tillsammans med andra CSS-ramverk?
BEM kan användas tillsammans med andra CSS-ramverk. Till exempel, även när du använder Tailwind CSS eller Bootstrap, kan du tillämpa BEM på anpassade komponenter.
Slutsats
BEM erbjuder en tydlig namngivningskonvention för att modulera och göra CSS lättare att hantera. Genom att använda denna metod kan du förhindra stilkonflikter och dramatiskt förbättra underhållbarhet och återanvändbarhet. Att utforma lämpliga namngivningskonventioner bidrar till förbättrad projektkvalitet och produktivitet.
Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.