Proprietà personalizzate ed ereditarietà

3.1 Proprietà personalizzate

Le variabili CSS, note anche come proprietà personalizzate, forniscono uno strumento potente per la gestione degli stili nello sviluppo web. Il loro uso influisce sulle prestazioni e sull'organizzazione del codice, migliorando il supporto e la flessibilità del CSS. Vediamo più in dettaglio come le proprietà personalizzate e l'ereditarietà possono influenzare questi aspetti.

Cosa sono le proprietà personalizzate?

Ricorda, le proprietà personalizzate (ossia le variabili CSS) sono valori che possono essere definiti nel CSS e quindi riutilizzati in tutto il file di stile. Vengono dichiarate con un doppio trattino (--) e possono essere usate con la funzione var().

Dichiarazione delle proprietà personalizzate:

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

Utilizzo delle proprietà personalizzate:

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

3.2 Impatto sulle prestazioni

1. Ottimizzazione del riutilizzo

L'utilizzo delle variabili CSS aiuta a evitare la duplicazione del codice, poiché lo stesso valore può essere utilizzato più volte, riducendo il volume di codice e facilitandone la manutenzione.

Esempio:

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

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

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

2. Caching e rendering

I browser possono effettuare efficacemente il caching e il rendering delle variabili CSS, il che ha un effetto positivo sulle prestazioni. Quando si cambia il valore di una variabile, il browser deve rifare i calcoli degli stili solo una volta, riducendo il carico di rendering.

3. Aggiornamento dinamico

Le variabili CSS possono essere modificate dinamicamente tramite JavaScript, consentendo di aggiornare stili senza dover ricalcolare l'intera pagina.

Esempio:

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

3.3 Impatto sull'organizzazione del codice

Gestione centralizzata degli stili

Definendo le variabili CSS in un unico luogo, si può gestire centralmente gli stili, il che ne semplifica la manutenzione e le modifiche.

Esempio

Modificare il valore di una variabile in :root aggiornerà automaticamente tutti gli stili collegati in tutto il documento:

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

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

Ereditarietà e contesto

Le variabili CSS vengono ereditate dagli elementi figli dagli elementi genitori. Questo permette di definire i valori a un livello superiore e usarli in contesti più specifici.

Esempio:

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

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

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

Migliorare la leggibilità

L'uso delle variabili CSS migliora la leggibilità del codice, poiché le variabili possono essere nominate in accordo con la loro funzione, rendendo il codice più comprensibile.

Esempio:

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

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

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

Variabili locali e globali

Le variabili possono essere dichiarate sia a livello globale (per esempio in :root) sia localmente per selettori specifici. Questo permette di creare stili flessibili e adattivi.

Esempio:

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

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

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

3.4 Esempio di implementazione completa

Ecco un esempio di utilizzo delle variabili per l'ereditarietà e la ridefinizione locale:

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

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

      .container .header {
        --primary-color: #e74c3c; /* Ridefinizione della variabile per uso locale */
        color: var(--primary-color);
      }

      .container .content {
        color: var(--primary-color); /* Usa il valore della variabile dalla radice */
      }
    
  

    
      <div class="container">
        <div class="header">This is the header</div>
        <div class="content">This is the content</div>
      </div>
    
  

Spiegazione:

• In questo esempio, --primary-color viene utilizzato per stilizzare il testo nell'elemento .content, ereditando il valore dalla radice
• Nell'elemento .header, la variabile --primary-color è ridefinita e usa il nuovo valore