BEM

Um modo estilo de arquitetura de CSS. Facilita a escalabilidade ,reaproveitamento do código e nomear os class. Ajuda a manter o HTML em estrutura simples. Combina bem com projetos pequenos.

Métodologia

No BEM a página é vista em 3 formatos abaixo.

• Block (pt: Bloco)
• Element (pt: Elemento)
• Modifier (pt: Modificador)

Block

Bloco são os pedaços grandes como cabeçalho, coluna do conteúdo, coluna do menu, rodapé e etc. Pode construir bloco dentro do bloco deis que ele seja independente do bloco parente.

Element

As peças dentro do bloco são os elemento. Utiliza "_"(underscore) como separador.

Modifier

Modificador é o estado do bloco ou elemento. Utiliza "-"(traço) como separador.

Exemplo：

<!-- header block -->
<div class="header">
  <!-- headerのelement "logo"-->
  <img class="header_logo" src="logo.png" alt="logo">
  <ul class="nav"><!-- nav block -->
    <li class="nav_item nav_item-selected">menu1
    <li class="nav_item">menu2
  </ul>
</div>

Regra de Nomear e Exemplo

Os nome seguem a regra abaixo.

.block
.block-state
.block_element
.block_element-state

No exemplo em cima. Blocos são .header e .nav, .header_logo e .nav_item são elementos, .nav_item-selected é o estado.
O Estado pode ser escrito em "chave" e "valor”.

.nav_item-stateActive

Nomes Compridos

Para os nomes compridos que são de mais de duas palavras utilize o estilo CamelCase.

/* Recomended */
.rightMenu
.leftMenu
.topAdSpace
.bottomAdSpace

/* Not recomended */
.right_menu
.left-menu
.top_ad-space
.bottomAd-Space