Nomeação de Variáveis CSS: Boas Práticas e Abordagens
Published: 2024-07-10 10:09:19

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.
<br><br>

<figure style="width: 48%; margin-right: 2%;"> 
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y26m14p3n9phpztltqt1.png" alt="css inconsistency names" style="width: 48%; margin-right: 2%;"/>

  <figcaption>juro, nao è meme.</figcaption>
</figure>


<br><br>
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 <a  target="_blank" rel="noopener noreferrer"  href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/Using_CSS_custom_properties">este artigo no MDN Web Docs</a>, e depois voltar pra cá pra gente falar sobre as varias abordagens possiveis.

<br><br>

## Índice
<ul>
    <li>
        <a href="#why-use-variables">Por que Usar Variáveis CSS?</a>
    </li>
    <li>
        <a href="#benefits">Vantagens das Variáveis CSS</a>
    </li>
    <li>
        <a href="#approaches">Abordagens para Nomear Variáveis CSS</a>
    </li>
    <li>
        <a href="#colors">Nomeação Baseada em Cores</a>
    </li>
    <li>
        <a href="#semantic">Nomeação Semântica</a>
    </li>
    <li>
        <a href="#combination">Combinação de Nomes Semânticos e de Cores</a>
    </li>
    <li>
        <a href="#context">Nomeação Contextual</a>
    </li>
<li>
        <a href="#scope">Nomeação Baseada em Escopo</a>
    </li>
<li>
        <a href="#components">Nomeação Baseada em Componentes</a>
    </li>
<li>
        <a href="#type-valor">Nomeação Baseada em Tipos de Valores</a>
    </li>
<li>
        <a href="#theme">Nomeação Baseada em Temas</a>
    </li>
<li>
        <a href="#tools">Ferramentas de Linting para Variáveis CSS</a>
    </li>
<li>
        <a href="#conclusion">Conclusão</a>
    </li>
</ul>

<b><b>


### Por que Usar Variáveis CSS? <a id="why-use-variables" href="#why-use-variables">&#128279;</a>

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.
<br><br>

#### Vantagens das Variáveis CSS <a id="benefits" href="#benefits">&#128279;</a>

- **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 <a id="approaches" href="#approaches">&#128279;</a>

**1. Nomeação Baseada em Cores** <a id="colors" href="#colors">&#128279;</a>
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.

```css
: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 <a id="semantic" href="#semantic">&#128279;</a>
Nomear variáveis com base no propósito ou contexto de uso melhora a compreensão do código.

```css
: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 <a id="combination" href="#combination">&#128279;</a>

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

```css
: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 <a id="context" href="#context">&#128279;</a>
As variáveis são nomeadas de acordo com o contexto de uso.
```css
: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 <a id="scope" href="#scope">&#128279;</a>


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.

```css
: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) <a id="components" href="#components">&#128279;</a>


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

```css
: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) <a id="type-valor" href="#type-valor">&#128279;</a>

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

```css
: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) <a id="theme" href="#theme">&#128279;</a>

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

```css
: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 <a id="tools" href="#tools">&#128279;</a>

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:

- <a href="https://stylelint.io/" target="_blank" rel="noopener noreferrer" >Stylelint</a>: Um linter moderno e flexível para CSS que pode ser configurado para verificar a consistência das variáveis.
<br>
- <a href="https://postcss.org/" target="_blank" rel="noopener noreferrer" >PostCSS</a>: Uma ferramenta que transforma o CSS com plugins, incluindo verificações de variáveis.
<br>
- <a href="https://github.com/CSSLint/csslint" target="_blank" rel="noopener noreferrer" >CSS 
 Linter</a>:  Ferramenta específica para garantir o uso correto e consistente de variáveis CSS.

<br><br>



### Conclusão  <a id="conclusion" href="#conclusion">&#128279;</a>
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 <a id="credits" href="#credits">&#128279;</a>
Este artigo foi inspirado por experiências pessoais e estudos em várias fontes de referência, incluindo CSS Tricks e trabalhos de <a target="_blank" rel="noopener noreferrer" href="https://www.jonathan-harrell.com/about/">Jonathan Harrell</a>.