Um dos design patterns mais utilizados atualmente para organização da parte deno CSS em projetos é o chamado BEM.
BEM, acrônimo de "Block, Element, Modifier", nada mais é do que usar nomenclaturas padronizadas de forma a ajudar um desenvolvedor a identificar a função de uma classe CSS só de bater o olho no seu nome. Ela utiliza o padrão: .bloco__elemento--modificador
.
Um bom exemplo de uso prático seria o código abaixo:
<div class="contador">
<button class="contador__botao contador__botao--subtrair"> - </button>
<input class="contador__campo" type="number">
<button class="contador__botao contador__botao--somar"> + </button>
</div>
Onde as classes do exemplo acima representariam:
.contador
: classe geral do bloco-pai do que será estilizado;
.contador__input
: classe referente à todos os inputs pertencentes ao bloco-pai..contador__botão
: classe referente à todos os botões pertencentes à este bloco-pai;.contador__botao--subtrair/somar
: modificador do botão (continua sendo um botão, mas possuindo um subtipo, neste caso, "somar" ou "subtrair".
Onde ao bater o olho, qualquer conhecedor to padrão conseguiria identificar exatamente as funções de cada classe sem mesmo ver seu conteúdo.
Entre as vantagens de se usar o BEM como padrão estão:Entre as vantagens de se usar o BEM como padrão estão:
- Padronização de nomenclatura;
- Fácil identificação das funções das classes antes mesmo de ver o código;
- Melhor manutenção e escalabilidade em projetos grandes (por causa da padronização);
- Prevenção de conflito entre propriedades e classes CSS.
Entre as desvantagens, temos por principal:Entre as desvantagens, temos por principal:
- Nomenclatura esteticamente "feia" (classes com nomes grandes);
- "Engessamento" de classes (ao invés de uma classe
.btn
para todos os buttons, teríamos.escopoX__btn
, .escopoY__btn
, etc.
BEM, assim como outros padrões em ascendência no mercado tem seus pontos fortes e fracos, e assim como qualquer padrão no mundo da TI, deve ser avaliado e usado de acordo sua utilidade no projeto.