Você está na página 1de 26

Convenções de

nomenclatura CSS

Eu já ouvi muitos desenvolvedores dizerem que

eles odeiam CSS. Em minha experiência, isso vem

como um resultado de não ter tempo para

aprender CSS.

CSS não é a “linguagem” mais bonita, mais tem

alimentado com sucesso o estilo na web por mais

de 20 anos. Não está indo muito mal, né?

Entretanto, enquanto você escreve mais CSS, você

rapidamente vê uma grande desvantagem.

É difícil de arrumar e manter o CSS.


CSS mal escrito rapidamente vai virar um

pesadelo.

Aqui estão algumas convenções de nomenclatura

que vão poupar um pouco de estresse e inúmeras

horas a menos de linha.


Use sequências delimitadas por
hífen
Se você escreve muito javascript, então escrever

variável em camelcase é uma prática comum

var redBox = document.getElementById('...')

Ótimo, certo?

O problema é que esse formato de nomenclatura

não é bem adequado para o CSS.

Não faça isso:

.redBox {

border: 1px solid red;

Em vez disso, faça isso:


.red-box {

border: 1px solid red;

Isso é um padrão bonito de convenções de

nomenclatura CSS. Isto é indiscutivelmente mais

agradável.

Também, é consistente com os nomes das

propriedades CSS.

// Correto

.some-class {

font-weight: 10em

}
// Errado

.some-class {

fontWeight: 10em

A convenção de nomenclatura
BEM
As equipes têm diferentes maneiras de escrever

seletores CSS. Alguns times usam hífen como

delimitadores, enquanto outros preferem usar

convenções de nomenclatura mais estruturadas

chamada BEM.

Geralmente, existem 3 problemas que a

convenção de nomenclatura CSS tentam resolver.


1 — Sabendo o que um seletor faz, simplesmente

olhando o nome dele.

2 — Ter uma ideia de onde um seletor pode ser

usado, simplesmente olhando ele.

3 — Conhecer as relações entre nomes de classe,

simplesmente olhando para eles.

Você já viu nomes de classes escritos assim:

.nav--secondary {

...

.nav__header {
...

Isso é a convenção de nomenclatura do BEM

Explicando BEM a uma criança de


5 anos
BEM tenta dividir a interface geral do usuário em

pequenos componentes reutilizáveis.

Considere a imagem abaixo:


É uma imagem premiada de um homem :)

Não, não é premiado :(

O desenho representa um componente, tal como

um bloco de design.

Você já deve ter adivinhado que o B do BEM

significa ‘Bloco’.

No mundo real, esse ‘Bloco’ poderia representar

uma navegação no site, cabeçalho, rodapé, ou

qualquer outro bloco de design.


Seguindo a prática explicada acima, um nome de

classe ideal para esse componente seria stick-

man.

O componente deve ser estilizado assim:

.stick-man {

Nós usamos strings delimitado aqui. Boa!


E para os elementos
O E no ‘BEM’ significa elementos.

Em geral os blocos de design raramente vivem

isolados.

Por exemplo, o desenho tem uma cabeça, dois

lindos braços, e pés.


A cabeça, pés, e braços, são todos os elementos

dentro do componente.

Eles pode ser visto como filhos do componentes.

isto é, filhos do componente pai.

Usando a convenções de nomenclatura do BEM,

nomes de classe de elementos são derivados e

adicionados dois underscores, seguidos pelo

nome do elemento.

Por exemplo:
.stick-man__head {

.stick-man__arms {

.stick-man__feet {

M para modificadores
O M no ‘BEM’ significa modificadores.

E se o desenho pudesse ser modificado e

pudéssemos ter um stick man azul ou um

vermelho.
No mundo real, isso poderia ser um botão

vermelho, ou um botão azul.

Essas são as modificações do componente em

questão.

Usando BEM, os nomes de classes modificadoras

são derivados e adicionados hífens seguidos pelo

nome do elemento.

Por exemplo:
.stick-man--blue {

.stick-man--red {

O último exemplo mostrou o componente pai

sendo modificado. Isto nem sempre é o caso.

E se tivéssemos um desenho diferente com uma

cabeça maior?
Dessa vez o elemento foi modificado,

relembrando, o elemento é um componente filho

dentro de um bloco geral.

O .stick-man representa o Bloco, .stick-

man__head o elemento.

Como Visto no exemplo acima, hífens duplo

também podem ser usados assim:

.stick-man__head--small {
}

.stick-man__head--big {

Novamente, note que usamos hífens duplo no

exemplo acima. Isto é usado para marcar um

modificador.

Agora você conseguiu.

Isso é basicamente como convenção de

nomenclatura no BEM funciona.

Pessoalmente, eu tenho utilizado um hífen

delimitando nomes de classe para projetos

simples e BEM para interfaces de usuários mais

envolvidas.
Você pode ler mais sobre BEM.

Por que usar convenções de


nomenclatura?

Existem apenas dois problemas difíceis em Ciência

da Computação: invalidação de cache e nomeação de

coisas — Phil Karlton

É difícil nomear as coisas. Estamos tentando

tornar as coisas fáceis e poupar horas no futuro

com um código mais sustentável.

Nomear corretamente as coisas no CSS fará seu

código mais fácil de ler e manter.

Se você escolher utilizar a convenção de

nomenclatura BEM, isto tornará fácil ver o


relacionamento entre seu componente/bloco de

design apenas olhando a marcação.

Sentindo-se confiante?

Nomes CSS com ganchos


Javascripts
Hoje é o primeiro dia de trabalho do Jhon.

Ele entregou um código HTML que se parece com

isso:

<div class="siteNavigation">

</div>

John leu o artigo e percebeu que isso não é a

melhor maneira de nomear as coisas em CSS.


Então ele vai em frente e refaz o código da

seguinte forma:

<div class="site-navigation">

</div>

Parece bom, né?

Sem saber, John quebra o código.

Como?

Em algum lugar no código Javascript, havia um

relacionamento anterior com o nome da classe

siteNavigation:

//O código Javascript


const nav =
document.querySelector('.siteNavigation')

Então, com a mudança do nome da classe, a

variável nav torna-se null.

Que triste.

Para prevenir casos como esse, desenvolvedores

criaram diferentes estratégias.

1. Use js- class names


Use js- para nomear classe

Uma maneira de suavizar esses bugs é usar um js-

* para nomear classe que representa um

relacionamento com o elemento DOM em

questão.

Por exemplo:
<div class="site-navigation js-site-navigation">

</div>

E no código javaScript:

//O código Javasript

const nav = document.querySelector('.js-site-


navigation')

Como uma convenção, qualquer um que veja o

nome da classe js-site-navigation entenderia que

ele é relacionado ao elemento DOM no código

javaScript.

2. Use o atributo Rel.


Eu não uso essa técnica, mas já vi pessoas usando.

Você reconhece isso?


<link rel="stylesheet" type="text/css"
href="main.css">

Basicamente, o atributo rel define o

relacionamento que o recurso vinculado tem com

o documento do qual é referenciado.

No exemplo anterior com John, o atributo dessa

técnica faria assim:

<div class="site-navigation" rel="js-site-


navigation">

</div>

E no JavaScript:

const nav = document.querySelector("[rel='js-


site-navigation']")

Eu tenho minhas dúvidas sobre essa técnica, mas

é provável que a tenha no seu código. A alegação


aqui é “bem, há uma relacao com o Javascript,

então eu uso o atributo rel para denotar isso”.

A web é um grande lugar com um monte de

métodos diferentes para solucionar o mesmo

problema.

3. Não use atributos de dados


Alguns desenvolvedores usam atributos de dados

como ganchos no javascript. Isto não está certo.

Por definição, os atributos de dados são usados

para armazenar dados customizados.


Edição #1: Como mencionado por algumas

pessoas incríveis na sessão de comentários, se as

pessoas usa o atributo ‘rel’, talvez seja aceitável

usar atributos de dados em certos casos. É sua

chamada depois de tudo.

Dica de bónus: Escreva mais


comentários CSS
Isso não tem nada a ver com convenções de

nomenclatura, mas também economiza algum

tempo.
Enquanto muitos desenvolvedores web tentam

não escrever comentários no JavaScript ou ficar

com alguns, eu acho que você deveria escrever

mais comentários CSS.

Como o CSS não é a “linguagem” mais elegante, os

comentários bem estruturados podem economizar

tempo quando você está tentando entender seu

código.

Não faz mal.

Olhe como o código-fonte do Bootstrap foi bem

comentado.

Você não precisa escrever comentários para dizer

cor: vermelha dará uma cor vermelha.


Créditos
CSS Naming Conventions that Will Save You

Hours of Debugging, escrito originalmente por

Ohans Emmanuel

Você também pode gostar