Já não é de se notar que hoje podemos fazer muita coisa no CSS que antes só era possível com JavaScript, mas antes de mostrar exemplos quero deixar claro que mesmo com as super novidades que o CSS nos trouxe, o uso de JavaScript em seu site não pode ser ignorado! A questão sobre o uso do JavaScript hoje quando falamos parte totalmente Front-end é simplesmente fazer com que a informação possa ser Visualizada por todos. E antes que você fique com a tradicional dúvida “A mas é possível fazer um site com somente HTML e CSS?”, sim é possível! Mas esteja ciente que seu site pode ficar na metade do caminho.
Se você já conhece o JavaScript certamente já sabe sobre o uso de var, caso não conheça confira o link. Continuando nosso assunto durante muito tempo a var foi usada por muitos desenvolvedores, como mostrei no exemplo ela é bem simples não é nada de tão misterioso o seu uso! Só que ela também tem suas partes ruins que seria: hoisting, afinal do que se trata? O hoisting explicando em poucos detalhes faz com que tenhamos que trabalhar com nossas variáveis no topo e dentro de uma função. Se você é um velho desenvolvedor deve está se perguntando “Mas o hoisting não faz que minha variável fique global?”, Sim de fato ela fica global! Só que isso também pode nos trazer pequenas dores de cabeça, fora que você ficará muito confuso com a questão do escopo.
Qual a solução para isso?
Substituindo var por let
Let surgiu no ECMAScript 6 que tem como objetivo solucionar esse problema de hoisting, não se preocupe com flexibilidade, pois, é a mesma de var! Substituir a var pelo let nos possibilita trabalhar em escopo de bloco, não tendo assim aquele probleminha de variável indefinida e tendo que colocar ao topo, evitamos assim uma dor de cabeça e garantimos nosso escopo da aplicação, caso queira ver um exemplo de uso let acesse aqui
Usando var no CSS e tendo organização
Hoje o nosso CSS nos possibilita trabalhar com variáveis, isso é ter uma organização no seu código e deixa-lo simples de dar suporte. Imagine você tendo um grande números de cores ou estilos de fontes e que reaproveitar elas em outros elementos do seu css?! Então para isto usamos variáveis que também não é um bicho de sete de cabeças para aprender! Para ver um exemplo de uso acesse este link.
Se você reparou bem nosso exemplo funciona corretamente com as variáveis, mas porém não conseguimos reaproveitar essas variáveis globalmente em nossa folha de estilo. Para isto é aconselhado que você coloque o nome das variáveis e seus valores dentro do :root, isso irá permitir que você reaproveite essas variáveis em outros elementos caso queira reutilizar cores, fontes e outras propriedades. Só uma coisinha antes de encerrar eu realizei alguns testes e não consegui (por hora) fazer com variáveis possam ser usadas em mídias queryes no puro CSS, mas caso queira usar para manter seu código mas simples de dar suporte você pode recorrer aos pré-processadores como Sass e Stylus. Bom espero que tenha gostado desse post e até a próxima.
