O que é BEM?
A sigla BEM significa block, element, modifier e segue essas propriedades para definir uma nova metodologia de criação de nomes para classes de folhas de estilo.
A estrutura é simples:
.elementopai, .elementopai__filho, .elementopai__filho- -primeiro
Como assim?
As marcas registradas da estruturação BEM são o uso do “__” e do “- -“: sendo que o primeiro define um elemento (filho do elemento pai), e o segundo define um modificador.
Na prática:
Visualizando a estrutura HTML:
Simples, não é?
A grande ideia é padronizar para que qualquer front-end, ao se deparar com essa estrutura, separada por “__” ou “- -“, identifique os elementos e os modificadores só de analisar um HTML.
No geral, a aplicação BEM está sendo bem aceita por vários desenvolvedores, porém alguns outros argumentam alegando que as classes ficam “feias” com a aplicação desses caracteres a mais para definição dos nomes.
Particularmente, me soa como um argumento fraco, visto que em alguns artigos, já encontramos até boas aplicação desta metodologia à alguns frameworks conhecidos.
Como aqui no Tableless nossa missão é trazer o que há de novo, sigo dizendo que sempre vale a pena testar até mesmo para que em algum momento, você não seja pego de surpresa por classes nomeadas com underlines e hyphens.
Até a próxima.
😉