Uma rápida introdução à metodologia BEM

Book


Criado pela Yandex para fins de desenvolvimento rápido, padronização e facilididade na manutenção de código, o BEM se tornou uma das metodologias mais utilizadas no mercado front-end. Neste artigo, mostrarei de forma simples e objetiva como aplicá-lo em seus projetos.


O que é BEM?

BEM é uma metodologia ou padrão que é aplicado na nomenclatura de classes CSS para manter nossos projetos simples e organizados. A sigla BEM significa Block Element Modifier; esses três fundamentos são a base dessa metodologia cujo objetivo é fazer com que qualquer desenvolvedor possa alterar um código de um projeto de forma rápida e fácil.


Algumas regras


Estruturação


Nomenclatura


Block

Um bloco é uma entidade independente, um “bloco de construção“ de uma aplicação no qual pode ser simples ou composto (contendo outros blocos dentro do mesmo). Ele deve ser único, não contendo dois com o mesmo nome no seu código.

Block


Element

Um elemento nada mais é do que um complemento da estrutura de um bloco, como os botões de um menu ou os itens de uma lista.

Element

Um fato importante que deve ser ressaltado é que um elemento não pode estar dentro de outro, como por exemplo:

Para resolver esse problema, utilize a seguinte estrutura:


Modifier

Os modificadores, como o próprio nome já diz, servem para modificar a aparência dos elementos, como por exemplo adicionar uma cor especifica a um botão. Além disso, eles podem ser usados para alterar diferentes propriedades, tais como: opacity, position, display, font-weight, border, etc.

Modifier


Conclusão

A metodologia BEM é super fácil de compreender e implementar. Ela pode ser usada em diferentes tipos de projetos web, desde um simples site até um sistema completo. No começo, a sintaxe pode parecer estranha (eis o motivo dela ser amada por uns e odiada por outros), mas, em pouco tempo, você se acostuma com a ideia e já estará aplicando naturalmente essa metodologia em seus projetos, facilitando, assim, a escrita e a leitura de códigos, além de uma melhoria considerável no desempenho e desenvolvimento do projeto.


Obrigado pela leitura!

Share on: