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.
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.
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;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.
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.
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.
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.
Sass Variables e CSS Variables são duas bestas diferentes, cada uma com seus próprios prós e contras.
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.
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.
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.
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.
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.