CSS e BEM
Questo articolo spiega CSS e BEM.
YouTube Video
HTML per Anteprima
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 e BEM: Un approccio per una gestione efficace degli stili
CSS è un linguaggio fondamentale utilizzato per definire l'aspetto di un sito web. Tuttavia, gestire il CSS in modo efficace può essere impegnativo, specialmente per progetti di grande scala. BEM (Block Element Modifier) è una convenzione per la nomenclatura CSS progettata per affrontare questi problemi e migliorare la riusabilità e la manutenzione.
Sfide nel CSS e la necessità di BEM
Le sfide nel CSS includono i seguenti problemi:.
- Collisione nello spazio dei nomi globale: Nei CSS, i nomi delle classi sono globali, il che comporta il rischio di collisione tra componenti diversi.
- Uso eccessivo di selettori complessi: I selettori discendenti o ID eccessivamente complessi aumentano la specificità, rendendo difficili le modifiche future.
- Riusabilità ridotta: Gli stili specifici diventano più difficili da riutilizzare in altri componenti.
BEM è stato progettato per risolvere questi problemi.
Concetti di base di BEM
BEM consiste in tre elementi principali:.
- Blocco: Un componente indipendente con un proprio significato.
- Elemento: Una parte di un blocco, logicamente collegata ad esso.
- Modificatore: Cambia l'aspetto o il comportamento di un blocco o elemento.
Le convenzioni di denominazione BEM seguono il formato seguente:.
.block__element--modifierblock: Il nome del componente del blocco.element: Un elemento che fa parte del blocco.modifier: Rappresenta uno stato specifico o una variazione di stile.
Esempio Pratico
Di seguito è riportato un semplice esempio.
1<div class="button button--primary">
2 <span class="button__text">Click Me</span>
3</div>buttonè un blocco.button__textè un elemento.button--primaryè un modificatore.
Vantaggi di BEM
I seguenti sono i vantaggi di BEM.
- Coerenza Poiché la convenzione di denominazione è coerente, il codice diventa più facile da leggere.
- Riutilizzabilità Diventa più facile riutilizzare i componenti.
- Manutenibilità Altri sviluppatori possono comprendere il codice più facilmente, rendendo più semplici le modifiche.
Costruzione di un progetto utilizzando BEM
Progettazione HTML
Ecco un esempio di HTML che applica 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>Progettazione CSS
Scrivi il CSS corrispondente per l'HTML come segue.
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}- Questo CSS definisce stili modulari usando la convenzione BEM (Block Element Modifier) per migliorare la riutilizzabilità e la manutenibilità.
Estensione degli stili
Vediamo come aggiungere un nuovo modificatore per rendere inattivo un elemento specifico del menu.
L'HTML corrispondente avrebbe questo aspetto.
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}- Questo CSS definisce un modificatore che offusca visivamente gli elementi di menu inattivi e disabilita le interazioni di click.
Domande frequenti
Quando si utilizza BEM, si possono tenere a mente i seguenti punti.
Q1: Devo seguire rigorosamente le convenzioni di denominazione di BEM?
Non è necessario seguire rigorosamente le regole di nomenclatura di BEM, ma mantenere la coerenza è importante. Stabilisci regole unificate nel progetto e assicurati che l'intero team le segua.
Q2: L'introduzione di BEM non rende il CSS più prolisso?
L'introduzione di BEM può portare a nomi di classi CSS più lunghi, ma ciò rende più chiari i ruoli dei componenti. Di conseguenza, la manutenibilità migliora e i benefici superano la ridondanza.
Q3: BEM può essere utilizzato insieme ad altri framework CSS?
BEM può essere utilizzato insieme ad altri framework CSS. Ad esempio, anche utilizzando Tailwind CSS o Bootstrap, puoi applicare BEM ai componenti personalizzati.
Conclusione
BEM fornisce una chiara convenzione di denominazione per modularizzare e rendere il CSS più facile da gestire. Utilizzando questo metodo, è possibile prevenire conflitti di stile e migliorare notevolmente la manutenibilità e la riutilizzabilità. Progettare adeguate convenzioni di denominazione contribuisce a migliorare la qualità e la produttività del progetto.
Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.