Leonardo Muniz

Posted on Jul 10

Nomeação de Variáveis CSS: Boas Práticas e Abordagens

Recentemente, enquanto navegava na internet, como todo bom desenvolvedor front-end, quis "roubar" a paleta de cores de um site. Então, abri o inspetor de elementos para copiar os valores hexadecimais das cores e me deparei com uma surpresa inusitada: as variáveis CSS estavam nomeadas de forma inconsistente.

css inconsistency names — juro, nao è meme.

Como você pode perceber, os valores das variáveis não correspondiam aos seus nomes, o que é um exemplo clássico de "naming inconsistency" (inconsistência de nomenclatura). É crucial evitar isso em sua base de código.

Nomear variáveis CSS é essencial para a organização, legibilidade e manutenção do código em projetos front-end. Apesar de parecer trivial, muitas empresas ainda não adotam um padrão de nomenclatura.

Este artigo explora várias abordagens para a nomeação de variáveis CSS, destacando a importância de escolhas semânticas e práticas consistentes, se voce ainda não sabe como declarar variaveis, eu te aconselho primeiro ler este artigo no MDN Web Docs, e depois voltar pra cá pra gente falar sobre as varias abordagens possiveis.

Índice

Por que Usar Variáveis CSS?
Vantagens das Variáveis CSS
Abordagens para Nomear Variáveis CSS
Nomeação Baseada em Cores
Nomeação Semântica
Combinação de Nomes Semânticos e de Cores
Nomeação Contextual
Nomeação Baseada em Escopo
Nomeação Baseada em Componentes
Nomeação Baseada em Tipos de Valores
Nomeação Baseada em Temas
Ferramentas de Linting para Variáveis CSS
Conclusão

Por que Usar Variáveis CSS? 🔗

Segundo CSS Tricks, variáveis CSS (custom properties) proporcionam flexibilidade e poder ao CSS, permitindo a criação de temas dinâmicos e o ajuste de estilos em tempo real. Jonathan Harrell destaca que variáveis CSS são nativas, dinâmicas e podem ser redefinidas dentro de media queries, além de funcionarem em qualquer contexto CSS, seja ele pré-processado ou não.

Vantagens das Variáveis CSS 🔗

Reutilização: Permitem o uso consistente de valores em todo o projeto.
Manutenção: Facilita a atualização de estilos ao alterar valores em um único lugar.
Legibilidade: Nomes significativos tornam o código mais fácil de entender e manter.

Abordagens para Nomear Variáveis CSS 🔗

1. Nomeação Baseada em Cores 🔗
Nomear variáveis CSS com base nas cores é uma abordagem direta. Esta técnica é útil para pequenos projetos ou quando as cores têm um uso limitado, mas deve-se ter cuidado com possíveis problemas de manutenção, estou citando esta abordagem aqui, mas não recomendo usa-la.

:root {
  --blue: #4267b2;
  --indigo: #3b2614;
  --purple: #754218;
  --pink: #f1ece7;
  --red: #b50000;
  --orange: #dc3545;
  --yellow: #f2b300;
  --green: #009733;
}

Vantagens:

Clareza imediata: Facilita a identificação da cor exata.
Simplicidade: Fácil de implementar.

Desvantagens:

Semântica limitada: Não indica o propósito da cor.
Reutilização: Pode ser confuso em projetos maiores com múltiplos contextos de uso.
Manutenção: Alterar uma cor pode quebrar a consistência semântica.

2. Nomeação Semântica 🔗

Nomear variáveis com base no propósito ou contexto de uso melhora a compreensão do código.

:root {
  --primary-color: #4267b2;
  --secondary-color: #3b2614;
  --accent-color: #754218;
  --background-color: #f1ece7;
  --error-color: #b50000;
  --warning-color: #dc3545;
  --info-color: #f2b300;
  --success-color: #009733;
}

Vantagens:

Clareza semântica: Indica o propósito ou contexto da cor.
Facilidade de manutenção: Simples de atualizar e reutilizar.
Suporte a temas: Fácil implementação de temas diferentes.
Consistência: Facilita a colaboração em equipes.

Desvantagens:

Abstração: Pode requerer mais esforço para mapear nomes a cores específicas.
Curva de aprendizado: Pode ser desafiador para novos desenvolvedores.

3. Combinação de Nomes Semânticos e de Cores 🔗

Combina semântica com a descrição da cor, proporcionando clareza e contexto.

:root {
  --primary-blue: #4267b2;
  --secondary-brown: #3b2614;
  --accent-purple: #754218;
  --background-pink: #f1ece7;
  --error-red: #b50000;
  --warning-orange: #dc3545;
  --info-yellow: #f2b300;
  --success-green: #009733;
}

Vantagens:

Detalhamento: Combina clareza imediata com contexto semântico.
Contexto adicional: Facilita a compreensão e manutenção.

Desvantagens:

Verbosidade: Pode resultar em nomes mais longos e verbosos.

4. Nomeação Contextual 🔗

As variáveis são nomeadas de acordo com o contexto de uso.

:root {
  --header-background: #333;
  --header-color: #fff;
  --footer-background: #222;
  --footer-color: #ccc;
}

.header {
  background-color: var(--header-background);
  color: var(--header-color);
}

.footer {
  background-color: var(--footer-background);
  color: var(--footer-color);
}

Vantagens:

Clareza contextual: Facilita a identificação do propósito das variáveis em partes específicas do layout.
Evita conflitos: Útil em grandes projetos com múltiplos componentes.

Desvantagens:

Potencial de repetição: Pode haver redundância de variáveis para diferentes contextos.

5. Nomeação Baseada em Escopo 🔗

As variáveis são nomeadas para refletir o escopo específico onde serão usadas. Isso pode ajudar a evitar conflitos de nomenclatura em grandes projetos.

:root {
  --button-primary-bg: #007bff;
  --button-primary-color: #fff;
  --button-secondary-bg: #6c757d;
  --button-secondary-color: #fff;
}

.button-primary {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-color);
}

.button-secondary {
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-color);
}

Vantagens:

Evita conflitos: Reduz a chance de colisões de nomes em grandes bases de código.
Escopo claro: Facilita a manutenção e leitura do código.

Desvantagens:

Complexidade: Pode adicionar complexidade ao gerenciar muitos escopos diferentes.

6. Nomeação Baseada em Componentes (Component-based Naming) 🔗

As variáveis são nomeadas de acordo com os componentes específicos da interface. Isso é comum em metodologias como BEM (Block Element Modifier).

:root {
  --card-background: #fff;
  --card-border: 1px solid #ddd;
  --card-title-color: #333;
}

.card {
  background-color: var(--card-background);
  border: var(--card-border);
}

.card-title {
  color: var(--card-title-color);
}

Vantagens:

Clareza de componente: Facilita a identificação das variáveis relacionadas a componentes específicos.
Modularidade: Facilita a reutilização de estilos em diferentes partes do projeto.

Desvantagens:

Manutenção: Pode ser mais difícil manter consistência em projetos muito grandes.

7. Nomeação Baseada em Tipos de Valores (Type-based Naming) 🔗

As variáveis são nomeadas para refletir o tipo de valor que representam. Isso é útil para manter consistência em todo o projeto.

:root {
  --color-primary: #3498db;
  --color-secondary: #2ecc71;
  --font-size-small: 12px;
  --font-size-medium: 16px;
  --font-size-large: 24px;
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 32px;
}

.text-primary {
  color: var(--color-primary);
}

.text-secondary {
  color: var(--color-secondary);
}

.small-text {
  font-size: var(--font-size-small);
}

.medium-text {
  font-size: var(--font-size-medium);
}

.large-text {
  font-size: var(--font-size-large);
}

.margin-small {
  margin: var(--spacing-small);
}

.margin-medium {
  margin: var(--spacing-medium);
}

.margin-large {
  margin: var(--spacing-large);
}

Vantagens:

Consistência: Facilita a manutenção e leitura ao usar uma convenção clara para tipos de valores.
Modularidade: Facilita a reutilização de variáveis em diferentes contextos.

Desvantagens:

Verbosidade: Pode resultar em nomes longos.

8. Nomeação Baseada em Temas (Theming) 🔗

As variáveis são nomeadas para refletir diferentes temas ou modos (como modo claro e modo escuro).

:root {
  --color-background-light: #ffffff;
  --color-background-dark: #000000;
  --color-text-light: #000000;
  --color-text-dark: #ffffff;
}

.light-theme {
  background-color: var(--color-background-light);
  color: var(--color-text-light);
}

.dark-theme {
  background-color: var(--color-background-dark);
  color: var(--color-text-dark);
}

Vantagens:

Flexibilidade: Facilita a criação e manutenção de diferentes temas visuais.
Consistência: As variáveis podem ser facilmente trocadas para alterar o tema.

Desvantagens:

Complexidade: Gerenciar múltiplos temas pode adicionar complexidade ao projeto.

Ferramentas de Linting para Variáveis CSS 🔗

Ferramentas de linting podem ajudar a garantir que as variáveis sigam convenções de nomenclatura específicas, promovendo consistência no código. Exemplos de ferramentas incluem:

Stylelint: Um linter moderno e flexível para CSS que pode ser configurado para verificar a consistência das variáveis.
PostCSS: Uma ferramenta que transforma o CSS com plugins, incluindo verificações de variáveis.
CSS Linter: Ferramenta específica para garantir o uso correto e consistente de variáveis CSS.

Conclusão 🔗

Essas abordagens e práticas podem ajudar a garantir que o uso de variáveis CSS em seus projetos seja eficiente, organizado e fácil de manter. A escolha da abordagem certa depende das necessidades e da escala do seu projeto, bem como das preferências e práticas da sua equipe de desenvolvimento.