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

Índice

• Não conheço nada de CSS *custom properties
• Mas tá na hora de usar ?
• Padrões de desenvolvimento
• Mão na massa
  • Código sem custom properties
  • Código com custom properties
  • As variáveis globais
  • O componente botão
  • Segue o código final
• Links complementares

Não conheço nada de CSS *custom properties

Então vou já vou deixar para você esse link da mozilla onde fala sobre a documentação dessa feature.

Mas tá na hora de usar ?

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

Padrões de desenvolvimento

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
• A Strategy Guide To CSS Custom Properties

E esse aqui mostra alguns padrões com essa nova abordagem:

• Patterns for Practical CSS Custom Properties Use

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

Mão na massa

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
• BEM
• Understanding and Using rem Units in CSS

Código sem custom properties

Código com custom properties

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

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:

// 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

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

/* 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:

Links complementares

• Smart animations with custom properties
• 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!