Metodologia BEM (Bloco, Elemento, Modificador)

A metodologia BEM (Bloco, Elemento, Modificador) é uma forma de organização de código CSS que visa facilitar a reutilização, a manutenção e a escalabilidade de projetos web. Ao estruturar as classes CSS de acordo com os princípios da BEM, você pode criar componentes independentes e reutilizáveis, tornando o código mais fácil de entender e de manter. 

Princípios da BEM:

• Bloco:Uma entidade independente, como um botão, um formulário ou uma seção de uma página.
• Elemento:Parte interna de um bloco, como o texto de um botão ou um campo de entrada de um formulário.
• Modificador:Uma variante de um bloco ou elemento, que altera sua aparência ou comportamento, como um botão no estado “ativo” ou “desabilitado”. 

Como funciona na prática:

• Bloco: bloco-nome (ex: .menu)
• Elemento: bloco-nome__elemento-nome (ex: .menu__item, .form__input)
• Modificador: bloco-nome--modificador-nome ou bloco-nome__elemento-nome--modificador-nome (ex: .menu--ativo, .form__input--erro) 

Benefícios da metodologia BEM:

• Código mais organizado:A estrutura clara e as convenções de nomenclatura tornam o código mais fácil de ler e entender.
• Reutilização de código:Os blocos e elementos independentes podem ser reutilizados em diferentes partes da aplicação.
• Manutenção mais fácil:A estrutura modular facilita a modificação e a atualização do código.
• Escalabilidade:A metodologia BEM facilita o desenvolvimento de projetos grandes e complexos. 

Exemplo:

Imagine um componente de um menu de navegação. Usando a metodologia BEM, você poderia ter: 

• menu: O bloco principal do menu.
• menu__item: Cada item da lista do menu.
• menu__link: O link dentro de cada item do menu.
• menu--ativo: Uma variante do menu que indica que ele está ativo.
• menu__link--destacado: Um link destacado em um item do menu.

A BEM é uma ferramenta poderosa para organizar e otimizar seu código CSS, tornando-o mais legível, reutilizável e escalável. 

---

Fontes

Página oficial do BEM (em inglês): https://en.bem.info/ – Criada pela equipe do Yandex. Você encontrará a documentação completa, exemplos e explicações detalhadas da metodologia.

Documentação do BEM (em russo): https://bem.info/ – A versão original da documentação, caso você prefira ou precise consultar algo na língua original.

Artigo “MindBEMding – Getting Your Head ‘Round BEM Syntax” de CSS-Tricks (em inglês): https://css-tricks.com/mindbemding-getting-your-head-round-bem-syntax/ – Um artigo popular que explica de forma clara e concisa a sintaxe e os conceitos do BEM.

Vídeo “BEM for CSS” no YouTube por DevTips (em inglês): https://www.youtube.com/watch?v=9o4S30tX-gY – Um vídeo explicativo que pode ajudar a visualizar e entender melhor a metodologia.

Artigo “BEM (Block, Element, Modifier)” na MDN Web Docs (em inglês): https://developer.mozilla.org/en-US/docs/Web/CSS/BEM – A documentação da Mozilla Developer Network também oferece uma visão geral da metodologia BEM.