Convenções de nomenclatura

O first.css oferece cinco tipos de seletores:

• Bloco
• Elemento
• Modificador
• Estado
• Utilidade

Todos são apresentados no código abaixo:

<div class="christmas-tree">
    <div class="christmas-tree--star is-active">
        <img src="shine.png" />
    </div>
    <ul class="christmas-tree--lights">
        <li class="christmas-tree--light mod-red"><svg /></li>
        <li class="christmas-tree--light mod-green"><svg /></li>
        <li class="christmas-tree--light mod-blue"><svg /></li>
    </ul>
</div>

Bloco

Independente, este seletor tem o nível mais alto. Deve representar um contâiner.

Exemplo

.christmas-tree

Elemento

Um seletor dependente de um Bloco. Prefixado por -- antes do nome do Bloco.

Exemplo

.christmas-tree--lights

Modificador

Prefixado por .mod-. Procure criar modificadores genéricos, no nível um, que sejam aplicáveis a qualquer elemento. Mas se você precisar de algo super específico, eu tenho boas notícias: Este seletor (e o de Estado) são os único seletores que podem estar abaixo de outro seletor. Uma boa ideia é juntar todos os seus modificadores em uma única folha de estilo. Assim, antes de criar um novo, você pode se perguntar:

Eu já não fiz um modificador pra isso?

Cheque a lista e, caso a resposta seja negativa, crie um novo.

Exemplos

.mod-green
.mod-bordered
.mod-no-icon

Estado

Prefixado por .is-. O seletor de estado controla o estado de um elemento e a interação do usuário. Este tipo de seletor casa muito bem com Javascript. O Estado (assim como um Modificador) pode estar abaixo de outro seletor. E é o ÚNICO seletor onde é permitido o uso de !importante. Só use nele, ok?

Exemplos

.is-hidden
.is-active
.is-current
.is-collapsed
.is-disabled

Utilidade

Prefixado por .u-. Para classes genéricas reutilizáveis.

Exemplos

.u-clearfix
.u-responsive