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.

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.

Créditos 🔗

Este artigo foi inspirado por experiências pessoais e estudos em várias fontes de referência, incluindo CSS Tricks e trabalhos de Jonathan Harrell.