Com toda a conversa ultimamente de finalmente ser capaz de usar CSS Grid, isso me fez pensar: Que outros incríveis recursos de CSS eu posso usar agora? Variáveis ​​CSS foi o que instantaneamente veio à mente.

Já faz um tempo que eu não ouvi nada sobre as variáveis ​​CSS e acrescenta um novo conjunto de ferramentas e uma maneira de pensar no desenvolvimento de front-end que me entusiasma.

Um refrescante nas variáveis ​​CSS

Variáveis ​​CSS estão surgindo há alguns anos, mas não parecem estar em uso amplo. Com a popularidade dos pré-processadores, como o Sass, os desenvolvedores frontend arranharam essa variável há muito tempo.

Fiquei animado pela primeira vez pelas variáveis ​​CSS em 2014 e desde então elas entraram e saíram da minha área de interesse. Só agora estou pensando em colocá-los em sites de produção e vou mostrar a você como eles são simples e fáceis de usar.

Declarando a Variável

Declarar a propriedade customizada é simples: precisamos apenas criar a propriedade desejada e acrescentar dois traços ao início dela. Elas podem ser declaradas em qualquer lugar, mas adicionadas a: root parece ser uma boa abordagem no momento.

--my-reusable-value: 20px;

Acessando a Variável

Usando a propriedade é bem simples também. Nós o acessamos através da função var () e usamos a propriedade que declaramos acima.

padding: var(--my-reusable-value);

Isso não é simples e glorioso?

Variáveis ​​CSS são simples de usar e muito fáceis de lembrar. O maior desafio com as variáveis ​​CSS (como na maioria das CSS) é saber a hora e o local certos para usá-las. Jogá-los ao acaso é uma maneira segura de criar uma confusão de uma folha de estilo e, com essas variáveis ​​lançadas na depuração, provavelmente se tornará mais difícil.

Casos de uso apropriados e estratégias para usá-los devem ser considerados e é aí que a maioria de seus esforços deve ser focada.

Um caso de uso interessante: módulos responsivos

No exemplo a seguir, vou mostrar um exemplo básico de como atualmente construo um componente responsivo usando variáveis ​​Sass. Então, mostrarei como isso poderia ser melhorado com as variáveis ​​CSS de uma maneira que não seria possível com um pré-processador. Este é um caso de uso específico que não se aplica a todas as variáveis ​​usadas, mas é para mostrar como as variáveis ​​CSS podem ser usadas de maneira diferente.

Exemplo de Sass

Veja a caneta Variáveis ​​CSS - caso de uso responsivo sem Variáveis ​​CSS por Adam Hughes ( @lostmybrain ) em CodePen .

Ao usar o Sass, existem algumas metodologias diferentes que eu tentei. Meu atual ir para a versão está colocando as consultas de mídia dentro dos blocos CSS que eu quero mudar. Aqui eu posso usar uma variável, CSS padrão, mixin ou uma extensão para modificar este elemento sem espalhar os estilos para o componente em todos os lugares.

Um problema com isso é ter várias consultas de mídia e muitas variáveis ​​que são relacionadas, mas não. Eu poderia usar mapas para as variáveis ​​que dariam mais organização, mas acho que o principal problema é que estamos usando várias variáveis ​​para definir uma propriedade. Isso só parece errado.

Variáveis ​​Sass são usadas antes do tempo, o que significa que temos que planejar todas as maneiras de usá-las. Eles tornam o desenvolvimento mais fácil, mas tecnicamente não nos fornecem novos superpoderes.

Variáveis ​​CSS para o Rescue

Veja a caneta Variáveis ​​CSS - caso de uso responsivo por Adam Hughes ( @lostmybrain ) em CodePen .

Variáveis ​​CSS não precisam ser declaradas antecipadamente, elas são dinâmicas. Isso é útil de uma maneira muito diferente. Agora podemos alterar variáveis ​​de maneira condicional de qualquer lugar e em contextos específicos, como consultas de mídia.

Ao servir nossos estilos de consulta de mídia, podemos reduzir a quantidade de consultas de mídia espalhadas por um estilo responsivo. Ele também oferece uma maneira realmente agradável e limpa de ver o espaçamento geral e o estilo de tipografia em diferentes formatos.

Eu acho que projetos responsivos e temas são dois excelentes casos de uso para variáveis ​​CSS, mas existem muitas possibilidades.

Como as variáveis ​​CSS são diferentes das variáveis ​​SASS?

Sass Variables e CSS Variables são duas bestas diferentes, cada uma com seus próprios prós e contras.

Variáveis ​​Sass podem ser melhor organizadas

Devido à popularidade do Sass e à natureza mais programática do Sass, os padrões de organização mais aprofundados evoluíram ao longo do tempo. Eu particularmente gosto de mapas sass e combina variáveis ​​de tipo semelhantes nos mapas. Cores, tamanhos e atalhos para caminhos parecem ser escolhas populares para incluir em mapas.

Devido ao uso relativamente menor de variáveis ​​CSS, as melhores práticas ainda precisam evoluir. Mapas e arrays não são possíveis da mesma forma no CSS, então esses novos padrões organizacionais terão que inovar e resolver os problemas de uma maneira diferente do Sass.

Variáveis ​​CSS podem ser dinamicamente alteradas

As variáveis ​​CSS são tratadas dinamicamente pelo navegador no tempo de execução, enquanto as variáveis ​​Sass são usadas quando o CSS é compilado.

Este é o principal ponto de venda de variáveis ​​CSS para mim. Será interessante ver como as pessoas usam esse recurso ao longo do tempo e se ele estará de acordo com seu potencial.

Variáveis ​​CSS são um recurso de navegador padrão

Pessoalmente, sou da opinião de que quanto mais coisas pudermos remover do Webpack , do Gulp e de qualquer novo framework agora , melhor. Ter novos recursos interessantes no navegador significa que não precisamos depender de estruturas de compilação e JavaScript para fazer as coisas que os desenvolvedores consideram essenciais. Eu diria que uma alta porcentagem de desenvolvedores front-end usam variáveis ​​em seu CSS de uma maneira ou de outra, então todos usando esse recurso central parecem ser uma coisa sensata a fazer. Isso significa que uma coisa a menos na etapa de criação (que, na minha opinião, todos podemos concordar é ficar bastante imensa atualmente) e mais consistência na web.

Qual é a aparência do suporte?

O suporte está parecendo muito bom com uma exceção gritante: IE 11. A maioria dos navegadores modernos suportam CSS Variables com Edge tendo alguns bugs.

Em 78.11% isto é maior de CSS Grid (no momento em que este artigo foi escrito), mas o suporte ao IE11 pode ser um problema.

Então, podemos usar variáveis ​​CSS ainda?

Eu acho que a hora é agora. Esse suporte ao IE11 não melhorará, e sabemos de versões anteriores do Windows que leva muito tempo para algumas pessoas atualizarem. Mas o suporte em navegadores modernos é excelente, o que significa que devemos estar olhando para variáveis ​​CSS e experimentando as possibilidades.

Isso não significa que não devemos esquecer nossa responsabilidade pelo suporte a navegadores mais antigos. Um sistema de fallback básico usando uma tag de suporte, ou até mesmo um polyfill, para navegadores mais antigos deve ser considerado, ainda mais se o uso real do site for muito mais inclinado para navegadores mais antigos.

É um momento empolgante para o desenvolvimento do front-end, e eu não posso esperar para usar mais dessas tecnologias em meus sites de produção.