Um guia para variáveis (custom properties) e componentização no CSS 
Tags: css, tutorial, webdev
Published: 2020-04-03 14:06:27

Olá pessoa 😉

Vou trazer nesse guia, links que vão mostrar como utilizar variáveis css localmente, globalmente e apresentar padrões de desenvolvimento que devem ajudar você na componentização do seu código CSS.

Desde quando tomei conhecimento sobre as *custom properties* do CSS, fiquei muito animado e com uma baita vontade de usá-las mas fui cauteloso, esperei aderência dos browsers à nova tecnologia. Dá uma olhada nesse link do [caniuse](https://caniuse.com/#search=variables) e veja se você consegue usar no seu projeto.

Faz um mês mais ou menos que comecei a estudar para implementar essa nova tecnologia no meu trabalho, projetos pessoais e etc... Por conta disso foi gerado bastante link nos meus favoritos e resolvi compartilhar com vocês essa, quem sabe trilha de estudo :-)

PS: *Vou falar em alguns momentos sobre pré-processador e caso você ainda não saiba ainda o que é, recomendo começar por [aqui](https://tableless.com.br/sass-vs-less-vs-stylus-batalha-dos-pre-processadores/)*

---
## Índice
* [Não conheço nada de CSS *custom properties](#index-1)
* [Mas tá na hora de usar ?](#index-2)
* [Padrões de desenvolvimento](#index-3)
* [Mão na massa](#index-4)
 * [Código sem custom properties](#index-5)
 * [Código com custom properties](#index-6)
 * [As variáveis globais](#index-7)
 * [O componente botão](#index-8)
 * [Segue o código final](#index-9)
* [Links complementares](#index-10)

---

# Não conheço nada de CSS *custom properties <a name="index-1"></a>
Então vou já vou deixar para você esse link da [mozilla](https://developer.mozilla.org/pt-BR/docs/Web/CSS/Using_CSS_custom_properties) onde fala sobre a documentação dessa *feature*.

# Mas tá na hora de usar ? <a name="index-2"></a>
Ao meu ver essa hora já chegou... mas como disse ali em cima, vai depender do suporte do seu projeto.

As *custom properties* tem coisas bem legais como reatribuição de valores e escopo. No próximo link, o autor vai abordar tudo o que falei de forma resumida. [It's Time To Start Using CSS Custom Properties](https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/)

# Padrões de desenvolvimento <a name="index-3"></a>
Uma coisa que reparei logo no começo dos estudos foi que, a maioria dos artigos que eu encontrava com algum exemplo, as pessoas só estavam utilizado as variáveis dentro de *:root*, levando assim para um escopo global.

> #Gente, creio que nem tudo deve ser global, certo ?

E nesse monte de links, acabei encontrando esses três artigos maravilhosos que falam sobre usar ou não usar `:root`:

- [Breaking CSS Custom Properties out of :root Might Be a Good Idea](https://css-tricks.com/breaking-css-custom-properties-out-of-root-might-be-a-good-idea/)
- [A Strategy Guide To CSS Custom Properties](https://www.smashingmagazine.com/2018/05/css-custom-properties-strategy-guide/)

E esse aqui mostra alguns padrões com essa nova abordagem:
- [Patterns for Practical CSS Custom Properties Use](https://css-tricks.com/patterns-for-practical-css-custom-properties-use/)

Bom, agora acho que chegamos no final da trilha :-)

# Mão na massa <a name="index-4"></a>
Eu criei um exemplo com tudo que aprendi para fixar melhor os conhecimentos e vou compartilhar com você.

Antes de começar quero te passar mais alguns links sobre alguns padrões que utilizei nesse código, caso não conheça eu recomendo dar uma olhada:

- [Atomic Design](https://atomicdesign.bradfrost.com/table-of-contents/)
- [BEM](http://getbem.com/)
- [Understanding and Using rem Units in CSS](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/)

---

### Código sem custom properties <a name="index-5"></a>
{% codepen https://codepen.io/lucianobarauna/pen/GRJYdqa %}

---

### Código com custom properties <a name="index-6"></a>
Vou comentar algumas partes que acho importantes no código e que são alguns conceitos que estão nos links acima.

#### As variáveis globais <a name="index-7"></a>
Declarei primeiro como variáveis de pré-processador para ficar mais fácil a manutenção, organização e escopo.

Com a ajuda da interpolação, nós conseguimos trazer uma dinâmica bem intressante para o código:

```scss
// GLOBAL VALUES IN SASS VARIABLES
$fontRoboto: "Roboto", sans-serif;
$fontVidaloka: "Vidaloka", serif;
$fontSizeMobile: 18px;
$fontSizeDesktop: 16px;
$colorBlue: #1c1b34;
$mediaMobile: 46.875rem;

:root {
  /* Global variables */

  --GL-FONT-ROBOTO: #{$fontRoboto}; // Estou usando aqui interpolação
  --GL-FONT-VIDALOKA: #{$fontVidaloka};
  --GL-FONT-SIZE: #{$fontSizeMobile};
  --GL-BLUE: #{$colorBlue};

  @media (min-width: $mediaMobile) {
    --GL-FONT-SIZE: #{$fontSizeDesktop};
  }

  font-size: var(--GL-FONT-SIZE);
}
```
#### O componente botão <a name="index-8"></a>
Uma parte bem interessante do código é o do botão. Repara que, por conta das variáveis e dos padrões que estamos utilizando no código, basta declaramos as variáveis e sobrescrevê-las quando necessário para termos o resultado esperado. E olha só, estou declarando as variáveis antes da lógica, assim temos uma boa separação de conceitos e organização do código

```scss
/* Buttons */
.btn {
  --btn-bgColor: #cccccc;
  --btn-bdColor: transparent;
  --btn-color: #ffffff;
  --btn-transition: all ease-in 150ms;

  &:hover {
    --btn-bgColor: transparent;
    --btn-bdColor: #cccccc;
    --btn-color: #cccccc;
    --btn-transition: all ease-out 300ms;
  }
  // .btn--ok = Variação do botão
  &--ok {
    --btn-bgColor: var(--GL-BLUE);

    &:hover {
      --btn-bdColor: var(--GL-BLUE);
      --btn-color: var(--GL-BLUE);
    }
  }
  // .btn--no = Variação do botão
  &--no {
    --btn-bgColor: #f51711;

    &:hover {
      --btn-bdColor: #f51711;
      --btn-color: #f51711;
    }
  }

  background-color: var(--btn-bgColor);
  border: 0.125rem solid var(--btn-bdColor);
  border-radius: 0.313rem;
  color: var(--btn-color);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.625rem 1.25rem;
  transition: var(--btn-transition);
}
```


### Segue o código final:<a name="index-9"></a>
{% codepen https://codepen.io/lucianobarauna/pen/NWqErXo %}
<a name="index-10"></a>

##Links complementares
- [Smart animations with custom properties](https://equinusocio.dev/blog/smart-animations-with-custom-properties/)
- [Css Variables Performance](https://lisilinhart.info/posts/css-variables-performance)

Espero que esse guia seja de grande ajuda para você como foi para mim e não deixa de entrar em contato quando tiver alguma dúvida ou sugestão ;-)

Abrcs!