Como nomear seus componentes CSS

Tá difícil dar nomes para seus componentes? Essa lista vai te ajudar.

Featured image

Introdução

Nomear componentes quando estilizamos nosso site/app pode parecer uma tarefa fácil para alguns, mas vira uma dor de cabeça se não estamos acostumados.

Afinal, a gente tem que pensar que:

Pensando nisso, elaborei essa lista de possíveis nomes que você pode dar para seus componentes CSS, dependendo do contexto.

A ideia é que você possa usar essas classes quando estiver criando componentes com a metodologia BEM, mas isso pode ser adaptado para outras metodologias.

Assim, você pode poupar o seu tempo pensando em nome de classes e focar no que realmente importa.

Layout

Classes usadas para determinar características de layout como tamanho e divisões entre conteúdos, margens, espaçamento, etc.

Seções Principais

Classes usadas para subdividir as páginas, esses componentes normalmente vão aparecer somente uma vez por página.

O Holy Grail design é um exemplo de seções principais de um site.

Componentes de Página

Classes usadas para definir componentes estruturais que podem aparecer várias vezes na mesma página.

Classes para conjunto de links ou botões de navegação.

Nomes genéricos

Nomes por relevância

Nomes por posicionamento

Nomes por contexto

Listas

Classes para listas de elementos ou conjunto de componentes.

Nomes genéricos

Nomes por características

Nomes por contexto

Componentes

Classes para elementos em geral, a combinação e agrupamento desses elementos formam componentes maiores.

Formulários

Classes para formulários e seus campos.

Nomes genéricos

Nomes por tipo

Nesse caso, usando modificadores do BEM.

Nomes por contexto

Texto

Classes para estilizar textos que são usados por todo o site/app.

Elementos aninhados

Sufixos de classe para serem usados em componentes filhos quando usamos a metodologia BEM.

Basicamente, todo nome de classe citado até agora pode se tornar um sufixo quando utilizado como filho de um elemento.

Sufixos estruturais

Sufixos de texto

Sufixos de contexto

Indicar Estado

Classes que normalmente são adicionadas/removidas por JavaScript e servem para indicar um estado diferente em que o componente se encontra.

Conclusão

Como você pode perceber, os nomes estão em inglês. Você vai encontrar na maioria dos lugares a nomenclatura assim, é o padrão.

Certamente você também deve divergir em relação a alguns nomes e categorias, mas a ideia aqui é mais ser uma lista de utilidades, sem certo ou errado.

Se tiver mais nomes de classes para inserir, fique à vontade e seja bem-vindo para deixar sua contribuição nos comentários aqui embaixo.

Até o próximo artigo!