Tableless

Busca Menu

BEM, um novo método para seu CSS

Seja o primeiro a comentar por

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:

.formcontent (elemento pai)
.formcontent__field (elemento filho)
.formcontent__field--first (elemento filho modificado)

Visualizando a estrutura HTML:

<form class="formcontent">
  <input type="text" class="formcontent__field--first" />
  <input type="text" class="formcontent__field" />
  <input type="submit" class="formcontent__field--button" />
</form>

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.

😉

Publicado no dia