Propriedades personalizadas e herança

3.1 Propriedades personalizadas

Variáveis CSS, também conhecidas como propriedades personalizadas, são uma ferramenta poderosa para gerenciar estilos no desenvolvimento web. O uso delas afeta o desempenho e a organização do código, melhorando o suporte e a flexibilidade do CSS. Vamos dar uma olhada mais de perto em como as propriedades personalizadas e a herança podem afetar esses aspectos.

O que são propriedades personalizadas?

Lembrando, propriedades personalizadas (também chamadas de variáveis CSS) são valores que podem ser definidos no CSS e, em seguida, reutilizados em todo o arquivo de estilo. Elas são declaradas com um duplo hífen (--) e podem ser usadas com a função var().

Declaração de propriedades personalizadas:

    
      :root {
        --main-color: #3498db;
        --padding: 10px;
      }
    
  

Uso de propriedades personalizadas:

    
      background-color: var(--main-color);
      padding: var(--padding);
    
  

3.2 Impacto no desempenho

1. Otimização de reutilização

Usar variáveis CSS ajuda a evitar a duplicação de código, já que o mesmo valor pode ser usado várias vezes, o que reduz o tamanho do código e simplifica sua manutenção.

Exemplo:

    
      :root {
        --main-color: #3498db;
      }

      .header {
        background-color: var(--main-color);
      }

      .footer {
        background-color: var(--main-color);
      }
    
  

2. Cache e renderização

Os navegadores podem armazenar em cache e processar variáveis CSS de forma eficaz, o que tem um impacto positivo no desempenho. Ao mudar o valor de uma variável, o navegador só precisa recalcular os estilos uma vez, reduzindo a carga de renderização.

3. Atualização dinâmica

As variáveis CSS podem ser alteradas dinamicamente com JavaScript, permitindo atualizar os estilos sem recalcular a página inteira.

Exemplo:

    
      document.documentElement.style.setProperty('--main-color', '#e74c3c');
    
  

3.3 Impacto na organização do código

Gerenciamento centralizado de estilos

Definindo variáveis CSS em um único local, é possível gerenciar centralizadamente os estilos, facilitando sua manutenção e alteração.

Exemplo

Mudar o valor de uma variável no :root atualiza automaticamente todos os estilos associados em todo o documento:

    
      :root {
        --font-size: 16px;
        --line-height: 1.5;
      }

      body {
        font-size: var(--font-size);
        line-height: var(--line-height);
      }
    
  

Herança e contexto

As variáveis CSS são herdadas por elementos filhos dos pais. Isso permite definir valores no nível superior e usá-los em contextos mais específicos.

Exemplo:

    
      :root {
        --base-font-size: 16px;
      }

      .container {
        font-size: var(--base-font-size);
      }

      .container .heading {
        font-size: calc(var(--base-font-size) * 1.5);
      }
    
  

Melhoria na legibilidade

O uso de variáveis CSS melhora a legibilidade do código, pois as variáveis podem ser nomeadas de acordo com sua função, tornado o código mais compreensível.

Exemplo:

    
      :root {
        --primary-color: #3498db;
        --secondary-color: #2ecc71;
      }

      .primary-button {
        background-color: var(--primary-color);
      }

      .secondary-button {
        background-color: var(--secondary-color);
      }
    
  

Variáveis locais e globais

As variáveis podem ser declaradas tanto em nível global (por exemplo, no :root) quanto localmente para seletoras específicas. Isso permite criar estilos flexíveis e adaptáveis.

Exemplo:

    
      :root {
        --global-padding: 10px;
      }

      .section {
        --section-padding: 20px;
        padding: var(--section-padding);
      }

      .item {
        padding: var(--global-padding);
      }
    
  

3.4 Exemplo de implementação completa

Aqui está um exemplo de uso de variáveis para herança e sobreposição local:

    
      :root {
        --main-padding: 10px;
        --main-margin: 20px;
        --primary-color: #3498db;
      }

      .container {
        padding: var(--main-padding);
        margin: var(--main-margin);
      }

      .container .header {
        --primary-color: #e74c3c; /* Sobrescreve a variável para uso local */
        color: var(--primary-color);
      }

      .container .content {
        color: var(--primary-color); /* Usa o valor da variável da raiz */
      }
    
  

    
      <div class="container">
        <div class="header">Aqui está o cabeçalho</div>
        <div class="content">Aqui está o conteúdo</div>
      </div>
    
  

Explicação:

• Neste exemplo, --primary-color é usado para estilizar o texto no elemento .content, herdando o valor da raiz
• No elemento .header, a variável --primary-color é sobrescrita e um novo valor é usado