BEM é uma convenção de nomenclatura de CSS, acrônimo que faz referência ao conceito de uso mesmo, Bloco/Elemento/Modificador. Faz parte de um framework de desenvolvimento front end da Yandex que abarca diversas regras e ferramentas úteis, mas, pelo menos no ocidente, é mais conhecido de maneira stand alone.
Atualmente, BEM já é bem difundida e conhecida pelo mundo todo — com nossa colaboração, inclusive, tendo-a trazido em um livro e um curso –, mas muitos ainda desconhecem as verdadeiras vantagens de usar BEM ao escrever CSS, optando por usar somente “porque todo mundo está usando” ou mesmo não usando at all.
Então, para preencher esta lacuna e deixar alguns pontos mais do que claros, conheça 6 vantagens de usar BEM ao escrever CSS.
BEM ajuda a nomear CSS sem esforço
BEM provê o necessário para tomar decisões rápidas quando se trata de criar nomes em CSS.
Nomear no desenvolvimento é notoriamente difícil (juntamente com invalidação de cache), mas BEM ajuda a formular uma estrutura de nomeação que realmente ajudou a evitar nomes que são enigmáticos ou abstratos.
Nomes compreensíveis (até por humanos)
Para alguns, isso é mais do que óbvio: nomes devem ser facilmente compreensíveis, especialmente para seres humanos. O fato é que, no entanto, vê-se com bastante frequência práticas como nomeação de caracteres únicos.
Usar uma única letra como a, b ou c para descrever um nome de classe é tão útil quanto uma sequência de caracteres gerada aleatoriamente.
Dê a si mesmo a liberdade de ser um pouco detalhado em prol da sanidade. Se quiser usar as convenções de BEM para isso, as vantagens serão notáveis.
Nomes adequados e não excessivamente descritivos
Depois que se conhece essa liberdade recém-descoberta de usar nomes detalhados, é fácil descrever excessivamente o propósito de uma classe através de seu nome escolhido. O objetivo é ser apenas adequadamente descritivo.
Por exemplo, quando se está criando um componente de pesquisa que aparece em um cabeçalho, pode-se atribuir ao Bloco o nome .site-search ao invés de .header-search, porque provavelmente o mesmo componente e estilo serão usados em outros lugares, como o rodapé ou um aside.
Se o design tiver a intenção de ser diferente, .header-search pode ser apropriado, ou, talvez, mais provavelmente um modificador como .site-search--header seja o suficiente.
Nomes de classes que usam uma nomenclatura comum
É bastante comum usar os mesmos sufixos de elemento repetidamente. Isso acontece porque eles são suficientemente descritivos. Usar esses mesmos nomes repetidamente ajuda a desenvolver uma nomenclatura mental, que aparece várias vezes.
Por exemplo, ao usar Sass Referencing Parent Selector (o famoso “& “), é comum ter instâncias de &__item, &__list ou &__link. Esses tipos de nomes são claros e consistentes, permitindo rápido desenvolvimento e pouco tempo pensando em nomes.
Mais HTML pode significar menos problemas
Uma vantagem mais discreta de BEM é a liberdade de adicionar elementos HTML extras conforme necessário. Há desenvolvedores especialistas em manter o HTML o mais simples possível.
Com BEM, um elemento HTML extra com uma classe específica pode permitir mais versatilidade e organização mais legível dos estilos e das marcações.
Você ainda deve manter o HTML o mais simples possível, claro, mas, usando BEM, a liberdade de ser mais liberal no uso de elementos HTML extras para dividir melhor as responsabilidades de um bloco seletor em vários elementos é inegável.
BEM pode coexistir com outras convenções e estruturas
Depois de um tempo usando BEM, começa-se a perceber muitas vantages ao se escrever CSS. Uma fantástica é que é fácil integrar BEM a sistemas que não o usavam previamente. Inclusive, BEM trabalha junto com estruturas como Foundation e Bootstrap de maneira bastante eficaz.
Muitas dessas estruturas criam suas próprias convenções de nomenclatura, e a verbosidade de BEM é o filé mignon de sua onipresença. É uma convenção de nomenclatura que pode realmente viver ao lado de outras convenções com pouco ou nenhum medo de seletores conflitantes.
Portanto, se você estava esperando para experimentar BEM em um novo projeto, não precisa esperar mais. O projeto antigo em que você está brincando há algum tempo está pronto para uma certificação BEM. :)
Conclusão
Se você ainda não usou ou deu apenas uma chance a BEM e não mexeu mais desde então, esperamos que você possa dar uma segunda chance.
Evidentemente, BEM não resolve todos os problemas de CSS, mas resolve muito do pensamento organizacional envolvido. Concordemos que é preferível gastar tempo pensando em propriedades e valores de CSS ao invés de em nomes de classes.
Essas 6 vantagens de usar BEM ao escrever CSS mostram que BEM provê uma maneira de simplificar a nomeação para que seja possível nos concentrarmos no que realmente amamos em CSS: a solução de problemas de layout e estilo.