Um dos *design patterns* mais utilizados atualmente para organização da parte de 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 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:

* 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:

* 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][1] 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.


  [1]: http://tableless.com.br/oocss-smacss-bem-dry-css-afinal-como-escrever-css/