Porquê usar variáveis CSS porquê um profissional

As variáveis CSS, também conhecidas porquê propriedades personalizadas, ajudam a minimizar a repetição em suas folhas de estilo. Isso, por sua vez, ajuda você a forrar tempo e esforço ao fazer alterações em seu design. Você também pode ter certeza de que não perderá nenhum valor que precise atualizar.

O entrada ao DOM permite gerar variáveis, armazená-las e reutilizá-las em toda a sua folha de estilo.

Porquê definir e usar variáveis CSS

Para tornar suas folhas de estilo mais organizadas, sustentáveis e reutilizáveis, você pode utilizar variáveis CSS em qualquer propriedade que aceite um valor.

Veja o exemplo a seguir de um registro HTML e um registro CSS que não usa variáveis CSS.

HTML:

 <!DOCTYPE html>
<html lang="en">
  <head>
    <title>CSS Variables - Button Variations</title>
    <link rel="stylesheet" href="Variables.css" />
  </head>
  <body>
    <div>
      <h1>CSS Variables</h1>
      <div>
        <button class="btn sub-primary">Primary</button>
        <button class="btn">Secondary</button>
      </div>
    </div>
  </body>
</html>

CSS:

 .btn {
  padding: 1rem 1.5rem;
  background: transparent;
  font-weight: 700;
  color: red;
}

É mal sua página deve permanecer:

o .btn A classe usada na folha de estilo supra não é dinâmica e faz com que você crie uma classe separada para personalizar botões individuais. A geração de sites bonitos exige que você seja dinâmico com seu estilo de front-end. A implementação de botões dessa maneira simplesmente tornará essa tarefa difícil de ser realizada.

Porquê a maioria das linguagens de programação, você precisa inicializar e substituir as variáveis CSS.

Para inicializar uma variável CSS, prefixe o nome da variável com hífens duplos:

 :root{
}

Você pode inicializar uma variável em qualquer lugar, mas observe que só poderá usar essa variável dentro do seletor inicializado. Por desculpa disso, as variáveis CSS são inicializadas convencionalmente dentro do seletor raiz. Isso visa o elemento de nível mais cume do DOM e permite que as variáveis sejam acessíveis por todo o documento HTML em graduação global.

Para substituir a variável em seu estilo CSS, você usará o var() propriedade:

 :root {
  
  --primary: 
  --secondary: 
}.btn {
  padding: 1rem 1.5rem;
  background: transparent;
  font-weight: 700;
  color: var(--primary);
  background-color: var(--secondary);
}
.sub-primary {
  color: var(--secondary);
  background-color: var(--primary);
}

O seletor raiz contém duas variáveis: –primário e –secundário. Ambas as variáveis são portanto substituídas no .btn class porquê uma cor e cor de fundo, respectivamente.

Usando as variáveis, você pode estilizar elementos individuais com muito mais facilidade. Ao reutilizar variáveis, você pode modificar rapidamente um valor uma vez para atualizá-lo em todas as instâncias.

captura de tela de dois botões com cores diferentes e variáveis CSS

o var() propriedade também pode receber um segundo argumento. Esse argumento atua porquê um valor de fallback para o primeiro argumento em uma situação em que o primeiro não está definido ou é irrito.

Por exemplo:

 :root {
  --primary: 
  --secondary: 
}.btn {
  padding: 1rem 1.5rem;
  background: transparent;
  font-weight: 700;
  color: var(--primary, blue);
}

Neste exemplo, substitua o –primário variável em cor estilo. Se, por qualquer motivo, esse valor falhar, a folha de estilo usará o segundo valor porquê substituto. Você também pode usar outra variável CSS porquê um valor mútuo.

Manipulando e substituindo variáveis CSS com JavaScript

A manipulação de variáveis CSS usando JavaScript pode ser uma maneira poderosa de modificar a semblante do seu site rapidamente. Usando JavaScript, você pode atualizar os valores dessas variáveis e ver as alterações refletidas em seu site.

É importante observar que as alterações feitas com JavaScript serão aplicadas unicamente à sessão atual. Você deve atualizar a manadeira original ou armazenar o novo valor no cliente, porquê em um cookie, para manter as alterações.

Cá está um exemplo de porquê usar JavaScript para atualizar o valor de uma variável CSS.

HTML:

 <!DOCTYPE html>
<html lang="en">
  <head>
    <title>CSS Variables - Button Variations</title>
    <link rel="stylesheet" href="Variables.css" />
    <script>
    function changeColor() {
      
      const myElement = document.querySelector(":root");      
      let currentValue = getComputedStyle(myElement).getPropertyValue(
        "--secondary"
      );
      // Set the new value for the variable
      myElement.style.setProperty("--secondary"https://www.makeuseof.com/css-variables-how-use-pro/,"#DAF7A6");
    }
    </script>
  </head>
  <body>
    <div>
      <h1>CSS Variables</h1>
      <div>
        <button class="btn sub-primary" onclick="changeColor()">
         Primary
       </button>
        <button class="btn">Secondary</button>
      </div>
    </div>
  </body>
</html>

CSS:

 :root {
  --primary: 
  --secondary: 
}.btn {
  padding: 1rem 1.5rem;
  background: transparent;
  font-weight: 700;
}
.sub-primary {
  color: var(--primary);
  background-color: var(--secondary);
}

Neste código JavaScript, o mudar cor() A função atualiza a cor do primeiro botão quando o usuário clica nele.

Usando métodos de travessia do DOM, você pode acessar as classes ou seletores aplicados em seu documento HTML e manipular os valores.

Antes de clicar no botão:

Captura de tela de dois botões. Um deles estilizado com variáveis CSS

Depois clicar no botão:

captura de tela de dois botões. Um deles estilizou a cor branca usando variáveis JavaScript e CSS

Você também pode usar JavaScript para gerar novas variáveis CSS ou removê-las completamente.

Por exemplo:

 // Create a new variable
document.documentElement.style.setProperty('--new-color', 'blue');
document.documentElement.style.removeProperty('--new-color');

Usando variáveis CSS com pré-processadores

O uso de variáveis na tecnologia de front-end foi inicialmente obtido com pré-processadores CSS porquê SASS, MENOS e Stylus.

O propósito dos pré-processadores CSS é desenvolver código que estenda as capacidades fundamentais do CSS padrão. Em seguida, tenha esse código compilado em CSS padrão para o navegador entender, da mesma forma porquê o TypeScript funciona com JavaScript.

Com o desenvolvimento de variáveis CSS, os pré-processadores não são mais tão importantes, mas ainda podem oferecer alguma utilidade se combinados com variáveis CSS em seu projeto.

Você pode definir uma variável SASS $ cor principal e use-o para definir o valor de uma variável CSS. Em seguida, use a variável CSS em uma classe de estilo regular.

Você também pode usar funções SASS para manipular os valores das variáveis CSS.

Por exemplo:

 :root {
  --primary: $main-color;
  --secondary: lighten(var(--primary), 20%);
}.btn {
  color: var(--primary);
  background-color: var(--secondary);
}

Cá, a função SASS clarear() manipula o valor de –primário obter um valor para –secundário.

Observe que as variáveis SASS não são acessíveis por JavaScript. Portanto, se você precisar manipular os valores de suas variáveis em tempo de realização, use variáveis CSS.

Usando variáveis CSS e pré-processadores juntos, você pode aproveitar ambos os benefícios, porquê usar recursos poderosos de pré-processador, porquê loops e funções, e recursos de variáveis CSS, porquê CSS em cascata.

Dicas para usar variáveis CSS no desenvolvimento da Web

Cá estão algumas dicas importantes a serem observadas que ajudarão você a utilizar melhor as variáveis CSS.

Comece com uma convenção de nomenclatura clara

Escolha uma convenção de nomenclatura para suas variáveis que as torne fáceis de entender e usar. Por exemplo, use um prefixo porquê –cor- para variáveis de cor ou –espaçamento- para variáveis de espaçamento.

Use variáveis em consultas de mídia

Use variáveis em consultas de mídia para facilitar o ajuste de seu design para diferentes tamanhos de tela.

Aproveite a natureza em cascata do CSS

Lembre-se de que as variáveis CSS estão em cascata, o que significa que, se você definir uma variável em um elemento pai, ela afetará todos os seus filhos.

Use variáveis CSS com desvelo

O uso de muitas variáveis CSS pode ocasionar confusão, portanto, use-as com cautela e somente quando fizer sentido e melhorar a capacidade de manutenção do seu código.

Teste suas variáveis

As variáveis CSS são uma maneira única de ortografar um código evidente e sustentável em sua folha de estilo.

É importante observar que eles ainda não são totalmente suportados em todos os navegadores. Portanto, você deve testar suas variáveis quanto à compatibilidade do navegador para prometer que elas estejam funcionando conforme o esperado e que quaisquer valores alternativos funcionem conforme o esperado.