Você sabe o que é a metodologia BEM no CSS? O nome BEM vem das palavras Blocks, Elements e Modifiers! Aprenda como utilizá-los para organizar seu código de forma prática e eficiente!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber o(s) arquivo(s) utilizados na aula, preencha seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento
O que você vai ver hoje?
Metodologia BEM no CSS: Como Organizar Seu Código de Forma Eficiente
A metodologia BEM é uma abordagem para organização e nomeação de classes CSS que facilita a escrita, leitura e manutenção do seu código. BEM significa Blocks, Elements e Modifiers, ou, em português, blocos, elementos e modificadores.
Nesta aula, você aprenderá os conceitos fundamentais da metodologia BEM, o que são blocos, elementos e modificadores, e como essa metodologia pode te ajudar a escrever códigos CSS organizados e modulares, muito útil para projetos de médio e grande porte.
Com a BEM, seu código ficará mais legível, intuitivo e claro. Isso facilita tanto a manutenção quanto o compartilhamento com outras pessoas que possam trabalhar com você no projeto.
O que é a metodologia BEM?
A metodologia BEM estrutura e organiza as classes CSS em três categorias principais: Bloco (Block), Elemento (Element) e Modificador (Modifier).
Com essa estrutura, você pode criar componentes reutilizáveis e com uma nomenclatura que indica a função e a relação entre os elementos de forma clara.
Ao organizar o seu CSS com BEM, você torna a leitura e a manutenção do código mais simples, tanto para você quanto para outros envolvidos no projeto.
Saiba mais sobre a Metodologia BEM
Estrutura da Nomenclatura BEM
Na metodologia BEM, o padrão de nomenclatura segue a estrutura:
- Bloco: .bloco
- Elemento: .bloco__elemento
- Modificador: .bloco–modificador ou .bloco__elemento–modificador
Esse formato torna as classes mais descritivas, facilitando a identificação rápida da função e da relação entre diferentes partes do código.
Bloco – Block
O Bloco é o componente principal, definindo um contêiner ou uma seção lógica. Ele representa uma entidade independente, que possui significado próprio, sem depender de outros elementos.
Exemplos de blocos podem ser cabeçalhos, formulários, containers, listas ou botões.
Elementos – Elements
O Elemento é uma parte do bloco que realiza uma função específica. Os elementos não possuem significado isoladamente, dependendo do contexto do bloco a que pertencem.
Por exemplo, o link em um cabeçalho, um item de lista, ou o campo de entrada (input) de um formulário são todos elementos que pertencem a um bloco específico.
Modificador – Modifier
Os modificadores servem para variar a aparência ou o comportamento de um bloco ou elemento. É o modificador que indica uma variação de estilo.
Por exemplo, um botão pode ter um modificador “disabled” (desabilitado) para indicar que está inativo. Outros modificadores podem incluir realce, marcação, tamanho e cor.
Exemplo Prático – Uso da Metodologia BEM
No material disponível para download, você encontrará dois arquivos HTML e CSS estruturados com a metodologia BEM. Assim, poderá entender na prática como aplicar esse conceito.
Vamos começar analisando o código HTML que segue a estrutura BEM. Dentro dele, temos uma barra de navegação representada pela tag <nav>. Essa barra contém uma imagem com o logo da Hashtag e uma <div> que organiza os links para cada curso.
<nav class="nav"> <img src="https://www.hashtagtreinamentos.com/wp-content/uploads/2022/05/Logo-Hashtag-Original-100x45px.png" alt="" /> <div class="nav__lista"> <a href="" class="nav__link">Curso de Excel</a ><a href="" class="nav__link">Curso de Python</a ><a href="" class="nav__link">Curso de Power BI</a ><a href="" class="nav__link nav__link--realce">Curso de HTML & CSS</a ><a href="" class="nav__link">Curso de JavaScript</a> </div> </nav>
Esses elementos são estilizados no arquivo CSS com a metodologia BEM, que organiza o código de forma clara e fácil de entender.
.nav {
display: flex;
gap: 15px;
justify-content: space-between;
padding: 10px;
align-items: center;
}
.nav__lista {
display: flex;
gap: 15px;
}
.nav__link {
text-decoration: none;
color: inherit;
font-weight: 600;
}
.nav__link--realce {
color: brown;
text-decoration: underline;
}Observe que tanto no HTML quanto no CSS, utilizamos a estrutura de Blocos, Elementos e Modificadores.
A classe .nav, aplicada à tag <nav>, representa o bloco principal da barra de navegação. É nesse bloco que definimos o layout da barra, como a organização dos elementos em uma linha e o espaçamento adequado.
Dentro do bloco .nav, temos definido os elementos:
- .nav__lista: Esse elemento representa a lista de links de navegação na <div>. Definimos um layout flexível para os links, com espaçamento entre eles.
- .nav__link: Esse elemento representa cada link individual na barra de navegação, ou seja, cada tag <a>. Com essa classe, estilizamos os links para que fiquem sem sublinhado, herdem a cor do elemento pai e tenham fonte mais destacada.
Por fim, temos o modificador .nav__link–realce, que destaca o link “Curso de HTML & CSS”, aplicando uma cor marrom e sublinhado. Nesse caso, o modificador é aplicado ao elemento __link dentro do bloco .nav.
Para modificar diretamente o bloco, podemos adicionar, por exemplo, o modificador –light no bloco .nav, alterando o HTML:
<header>
<nav class="nav nav--light">
<img
class="nav__logo"
src="https://www.hashtagtreinamentos.com/wp-content/uploads/2022/05/Logo-Hashtag-Original-100x45px.png"
alt=""
/>
<div class="nav__lista">
<a href="" class="nav__link">Curso de Excel</a
><a href="" class="nav__link">Curso de Python</a
><a href="" class="nav__link">Curso de Power BI</a
><a href="" class="nav__link nav__link--realce">Curso de HTML & CSS</a
><a href="" class="nav__link">Curso de JavaScript</a>
</div>
</nav>
</header>E aplicamos esse modificador no CSS para definir a cor de fundo:
.nav--light {
background-color: #c8f9ff;
}
Assim, é possível mudar a cor da barra de navegação apenas adicionando o modificador nav–light ao bloco .nav no HTML.
Benefícios da Metodologia BEM
A metodologia BEM traz diversos benefícios para o código e o projeto, como:
- Escalabilidade: Cada bloco e elemento é independente, facilitando expandir ou alterar partes específicas da interface sem impactar outras.
- Reutilização: A metodologia BEM incentiva a criação de componentes que podem ser reaproveitados em várias partes do projeto.
- Clareza e Legibilidade: A nomenclatura descritiva torna o código mais fácil de entender para outros desenvolvedores.
- Manutenção Facilitada: Com uma estrutura consistente, o CSS fica mais simples de manter, especialmente em projetos grandes.
Boas Práticas com a Metodologia BEM
Além disso, para que você possa obter o melhor da metodologia BEM, siga essas dicas:
- Seja Consistente: Mantenha sempre a mesma estrutura de nomenclatura e evite misturar convenções.
- Limite o Uso de Modificadores: Use modificadores apenas quando necessário. Eles devem ser variações, não substituições do bloco original.
- Comente Blocos Complexos: Em casos de blocos mais complicados, adicione comentários para facilitar a compreensão de outros desenvolvedores.
Conclusão – Metodologia BEM no CSS: Como Organizar Seu Código de Forma Eficiente
A metodologia BEM é uma ferramenta poderosa para organizar e estruturar o CSS em projetos HTML, melhorando a escalabilidade, a manutenção e a clareza do código.
Hoje, você aprendeu os conceitos principais da metodologia BEM e como ela pode tornar seu CSS mais organizado e eficiente.
Ao adotar essa metodologia, você constrói uma base sólida para suas interfaces, reduzindo conflitos de estilo e aumentando a eficiência no desenvolvimento front-end.
Ao adotar a metodologia BEM, você estará contribuindo para a criação de uma base sólida e organizada para suas interfaces, reduzindo a probabilidade de conflitos de estilo e aumentando a eficiência do seu desenvolvimento front-end.
Quer aprender mais sobre como criar projetos front-end completos do zero, com material de apoio e suporte? Conheça nosso Curso Completo HTML e CSS Impressionador!
Hashtag Treinamentos
Para acessar publicações de JavaScript, clique aqui!
Posts mais recentes de HTML e CSS
- Aprenda Tailwind CSS com apenas uma aula!
Descubra como o Tailwind CSS pode revolucionar o seu desenvolvimento web. Aprenda a usar essa ferramenta que vai elevar o nível do seu front-end. - Configure seu VS Code para HTML e CSS, e conheça outras Tecnologias Full Stack! Aprenda como baixar e configurar o VS Code para HTML e CSS e deixe-o pronto para iniciar o seu desenvolvimento web!
- Guia rápido – Aprenda como usar Bootstrap do Zero Quer criar sites bonitos e responsivos sem complicação? Aprenda como usar Bootstrap, uma ferramenta que te permite criar páginas completas com o mínimo de dificuldade e esforço!
Posts mais recentes da Hashtag Treinamentos
- 5 Boas Práticas de SQL para Iniciantes: Otimize Suas Consultas e Organize Seu Código
Se você está começando com MySQL ou busca melhorar suas habilidades em SQL, este post traz cinco boas práticas de escrita de SQL para iniciantes. - Função SE Excel: Exemplos e Dicas para Uso [Guia] A função SE Excel é muito útil para definir condições e criar uma planilha mais completa e funcional. Confira nesta aula!
- Exercícios de Listening em Inglês – Como Melhorar sua Compreensão Faça estes exercícios de listening em inglês e melhore sua compreensão! Descubra técnicas e estratégias para praticar e evoluir no aprendizado do idioma!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.