CSS e BEM
Este artigo explica CSS e BEM.
YouTube Video
HTML para Visualização
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: Uma Abordagem para uma Gestão Eficaz de Estilos
CSS é uma linguagem fundamental usada para definir a aparência de um site. No entanto, gerenciar CSS de forma eficaz pode ser desafiador, especialmente em projetos de larga escala. BEM (Bloco Elemento Modificador) é uma convenção de nomenclatura CSS projetada para resolver esses problemas e melhorar a reutilização e a manutenção.
Desafios no CSS e a Necessidade do BEM
Os desafios no CSS incluem os seguintes problemas:.
- Colisão de namespace global: No CSS, os nomes de classes são globais, o que apresenta o risco de colisão entre diferentes componentes.
- Uso excessivo de seletores complexos: Seletores descendentes ou de ID muito complexos aumentam a especificidade, tornando futuras modificações difíceis.
- Redução da reutilização: Estilos específicos tornam-se mais difíceis de reutilizar em outros componentes.
O BEM foi projetado para resolver esses problemas.
Conceitos Básicos do BEM
O BEM consiste em três elementos principais:.
- Bloco: Um componente independente com seu próprio significado.
- Elemento: Uma parte de um bloco, logicamente conectada a ele.
- Modificador: Altera a aparência ou comportamento de um bloco ou elemento.
As convenções de nomenclatura do BEM seguem o formato abaixo:.
.block__element--modifierbloco: O nome do componente do bloco.elemento: Um elemento que faz parte do bloco.modificador: Representa um estado específico ou uma variação de estilo.
Exemplo Prático
Abaixo está um exemplo simples.
1<div class="button button--primary">
2 <span class="button__text">Click Me</span>
3</div>buttoné um bloco.button__texté um elemento.button--primaryé um modificador.
Benefícios do BEM
A seguir estão as vantagens do BEM.
- Consistência Como a convenção de nomenclatura é consistente, o código se torna mais fácil de ler.
- Reutilizabilidade Fica mais fácil reutilizar os componentes.
- Manutenibilidade Outros desenvolvedores podem entender o código mais facilmente, tornando as modificações mais fáceis.
Construindo um projeto usando BEM
Design HTML
Aqui está um exemplo de HTML que aplica o 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>Design CSS
Escreva o CSS correspondente para o HTML da seguinte maneira.
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}- Este CSS define estilos modulares utilizando a convenção BEM (Block Element Modifier) para melhorar a reutilização e a manutenibilidade.
Estendendo estilos
Vamos ver como adicionar um novo modificador para tornar um item específico do menu inativo.
O HTML correspondente ficaria assim.
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}- Este CSS define um modificador que escurece visualmente os itens de menu inativos e desabilita as interações de clique.
Perguntas Frequentes
Ao usar BEM, os seguintes pontos devem ser considerados.
Q1: Eu preciso aderir estritamente às convenções de nomenclatura do BEM?
Não é necessário seguir estritamente as regras de nomenclatura do BEM, mas manter a consistência é importante. Estabeleça regras unificadas dentro do projeto e garanta que toda a equipe as siga.
Q2: A introdução do BEM não torna o CSS mais verboso?
A introdução do BEM pode resultar em nomes de classes CSS mais longos, mas isso torna os papéis dos componentes mais claros. Como resultado, a manutenibilidade melhora e os benefícios superam a redundância.
Q3: O BEM pode ser usado juntamente com outros frameworks de CSS?
O BEM pode ser usado juntamente com outros frameworks CSS. Por exemplo, mesmo ao usar Tailwind CSS ou Bootstrap, você pode aplicar BEM a componentes personalizados.
Conclusão
O BEM oferece uma convenção de nomenclatura clara para modularizar e facilitar o gerenciamento do CSS. Utilizando este método, é possível prevenir conflitos de estilos e melhorar drasticamente a manutenibilidade e a reutilização. Projetar convenções de nomenclatura adequadas contribui para melhorar a qualidade e a produtividade do projeto.
Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.