Metodologia BEM: organizando seu CSS

A metodologia BEM, ou Block Element Modifier, é uma forma de organizar o código CSS para solucionar problemas frequentes no desenvolvimento web. Ela divide o código em blocos, elementos e modificadores para uma melhor organização.

Curso HTML5 + CSS3 - Propriedades e seletores avançados

Conhecer o curso

Como surgiu a metodologia BEM?

A metodologia BEM surgiu em 2012, criada pela empresa russa de tecnologia Yandex, para resolver problemas comuns no desenvolvimento web, como complexidade e dificuldades na manutenção do código CSS. É uma das abordagens mais utilizadas para nomenclatura das classes em CSS.

Como aplicar a metodologia BEM em seu projeto?

A princípio, podemos otimizar a legibilidade e a reutilização do código CSS. Essa técnica requer uma nomeação clara e organizada dos blocos e seus elementos, proporcionando benefícios significativos para a escalabilidade e manutenção do projeto. Portanto, é altamente recomendável a adoção da metodologia BEM para melhorar a eficiência do desenvolvimento web.

Ademais, os modificadores são utilizados para realizar mudanças em partes específicas do código CSS. Isso torna o código mais simples de editar e personalizar. Ao aplicar os modificadores, é possível criar diferentes estilos para diversas situações, permitindo fazer alterações de forma ágil e descomplicada.

A fim de entender melhor como funciona a metodologia BEM, vamos analisar um exemplo de código CSS, que certamente, irá facilitar o entendimento:

Curso HTML5 + CSS3 - Fundamentos

Conhecer o curso

.block {
  display: block;
  width: 100%;
}

.block__element {
  font-size: 16px;
}

.block__element--modifier {
  color: #ff0000;
}

Nesse exemplo, a classe .block representa o bloco e define algumas propriedades CSS para o componente. A classe .block__element representa um elemento dentro desse bloco e define uma propriedade específica para ele. A classe .block__element--modifier representa o modificador que muda a aparência do elemento.

Agora vamos imaginar um cenário real em que temos um menu de navegação para uma página web. Aplicando os conhecimentos da metodologia em nosso projeto terá um bloco, que será todo o menu de navegação e seus links serão os elementos. Caso haja necessidade de uma modificação de estilização, no link ativado, por exemplo, a estrutura de CSS ficaria dessa forma:

.navmenu {
	display: flex;
	justify-content: center;
}

.navmenu__link {
	color: blue;
	font-size: 1.2rem;
}

.navmenu__link--active {
	color: black;
	font-size: 1.4rem;
}

Benefícios da metodologia BEM

Certamente, a metodologia BEM oferece muitos benefícios para o desenvolvimento web quando aplicada. Em primeiro lugar, ela torna o código mais organizado, facilitando a compreensão e manutenção do projeto. Além disso, a metodologia aumenta a escalabilidade do código, permitindo que ele seja modificado sem gerar confusão, ou, erros.

Além disso, ao utilizar uma nomenclatura de classe bem estruturada, viabiliza uma ampla reutilização do código, tornando os componentes prontamente aplicáveis em distintas seções do site.

Formação Desenvolvedor Front-end

Conhecer a formação

Conclusão

Para concluir, essa metodologia, traz várias vantagens ao desenvolvimento web, sua aplicação é direta e descomplicada. Com a utilização dessa abordagem, o código CSS se torna mais claro e fácil de gerenciar, melhorando a qualidade e agilizando o processo de desenvolvimento. Assim, se você ainda não adotou essa metodologia em seu projeto, é aconselhável avaliar sua implementação para aproveitar essas vantagens. Para isso, basta seguir alguns passos simples e começar a usufruir dos benefícios oferecidos pela metodologia BEM.

Se você quiser aprender mais sobre sobre esse tema tão importante no CSS, nos temos um direto ao ponto dedicado a metodologia BEM na nossa plataforma.