Váriaveis CSS vs Variáveis de pré processadores

[raphaguasta]

Utilizar váriaveis CSS ou Variáveis de pré processadores?

Qual é mais performática?

Já é possível utilizar as variáveis nativas sem fallback?

Quais as vantagens de cada cenário?

Trazendo a continuação da discussão #335 para um post apropriado :)

[vitor-mendrone-deel]

@afonsopacifer eu escolho você!

[afonsopacifer]

Opaaaaa..
para abrir os trabalhos.. deixo um artigo que saiu essa semana sobre o assunto:
https://css-tricks.com/difference-between-types-of-css-variables/

O que vocês acham desse poder de criar suas folhas de estilo mias dinamicas?

[felipefialho]

Acabei de ler, pra mim fica claro que o @chriscoyier anda lendo nosso fórum e escreveu o artigo para responder essa issue 😄

[diessica]

Além da dinamicidade, outra funcionalidade interessante é escopo. O efeito cascata também vale para as custom properties! Acho isso demais! Falei de forma aprofundada no artigo A Cascata das Variáveis do CSS.

Inclusive, é importante falar que o cssnext implementa imparcialmente as custom properties, suportando apenas declaração de variáveis no :root (ver docs). Teve uma issue sobre o assunto, e resolveram fazer um plugin separado, o
postcss-css-variables, que implementa custom properties como elas realmente funcionam.

Talvez por isso essa funcionalidade não seja tão popular. 😢

[raphaguasta]

Hahaha.. O cara responde muitas das nossas dúvidas mesmo! @afonsopacifer @lfeh

Bem legal o artigo @diessica ! Interessante poder mudar o nome das variáveis em determinado escopo! Não consegui imaginar um uso prático pra isso assim de cara, costumo manter o valor das variáveis globias. Mas eventualmente isso pode ser útil em alguma situação mesmo.

Porém poder declarar apenas no :root é uma deficiência na minha opinião. Nos meus arquivos sass/less/styl, quando repito algum valor durante o desenvolvimento as vezes crio pequenas variáveis de escopo para auxiliar no projeto.

Exemplo:

.thumb{
  $size: 10px;
  $color: #F0F0F0;
  width: $size;
  height: $size;
  border-color: $color;
  background-color: $color;
}

Isso, mais o fato de ainda precisar de fallback, maais o fato de que o pré-processador é necessário na maioria dos projetos me desencoraja um pouco a usar as variáveis nativas, pelo menos por enquanto... =/

[felipefialho]

Essa questão da cascata é interessante, mas na prática o Stylus ja oferece algo muito parecido com as variáveis dentro de escopos. Como disse o @raphaguasta

A maior vantagem pra mim é a possibilidade de controlar essas variaveis do CSS por JavaScript, ai sim o bagulho fica louco!

Sério, pensem nas possibilidades. Fantastico.

[bernardodiasc]

Uso postcss-css-variables aqui, as variaveis sao definidas num arquivo JS e inseridas no CSS pelo plugin. Uma vantagem muito conveniente que encontrei foi poder usa-las como dados pra alimentar o styleguide. O styleguide no caso é um component react que uso pra documentaçao dentro do storybook, tambem com capacidade para diferentes temas.

[felipefialho]

Sensacional @bernardodiasc

[afonsopacifer]

Revivendo de leve o post rsrsr, terminei recentemente uma série de videos explicando todos os pontos importantes para se trabalhar com Custom Properties (variables), se alguém ainda tiver duvida sobre o assunto ❤️

001 - Trabalhando com CSS Custom Properties:
https://youtu.be/NAp1FX9mGPU

002 - Fallback nativo em variáveis CSS:
https://youtu.be/3joOXJkSM58

003 - Criando mixins com CSS nativo:
https://youtu.be/hs1mASz6coA

004 - Construindo uma Style API com HTML e CSS:
https://youtu.be/KYym_KyiVm8

005 - Custom Properties Progressivas com Stylus (suporte para IE6+):
https://youtu.be/rPRTNMR2kgY

006 - Manipulando Custom Properties com Javascript:
https://youtu.be/SuidRypbtz4

007 - Design Responsivo e dinâmico com Style API (Parte 1):
https://youtu.be/djCoT_50h_A

008 - Design Responsivo e dinâmico com Style API (Parte 2):
https://youtu.be/92TCD25dOl0

009 - Design Responsivo e dinâmico com Style API (Parte 3):
https://youtu.be/JGJgdZ1_tBo

[felipefialho]

👏 👏 👏 👏