Propriétés personnalisées et héritage

3.1 Propriétés personnalisées

Les variables CSS, aussi connues sous le nom de propriétés personnalisées, offrent un outil puissant pour gérer les styles en développement web. Leur utilisation affecte la performance et l'organisation du code, améliorant le support et la flexibilité du CSS. Voyons plus en détail comment les propriétés personnalisées et l'héritage peuvent influencer ces aspects.

C'est quoi les propriétés personnalisées ?

Pour rappel, les propriétés personnalisées (ou variables CSS) sont des valeurs que l'on peut définir dans le CSS et utiliser ensuite plusieurs fois dans tout le fichier de styles. Elles sont déclarées avec un double tiret (--) et peuvent être utilisées avec la fonction var().

Déclaration des propriétés personnalisées :

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

Utilisation des propriétés personnalisées :

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

3.2 Impact sur la performance

1. Optimisation de la réutilisation

L'utilisation des variables CSS aide à éviter la duplication de code, car une même valeur peut être utilisée à plusieurs reprises, ce qui réduit la taille du code et simplifie son maintien.

Exemple :

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

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

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

2. Mise en cache et rendu

Les navigateurs peuvent mettre en cache et traiter efficacement les variables CSS, ce qui a un effet positif sur la performance. Lorsqu'une variable change de valeur, le navigateur ne doit recalculer les styles qu'une seule fois, réduisant ainsi la charge sur le rendu.

3. Mise à jour dynamique

Les variables CSS peuvent être modifiées dynamiquement avec JavaScript, ce qui permet de mettre à jour les styles sans recalculer toute la page.

Exemple :

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

3.3 Impact sur l'organisation du code

Gestion centralisée des styles

En définissant des variables CSS à un seul endroit, on peut gérer les styles de manière centralisée, ce qui facilite leur entretien et leur modification.

Exemple

La modification de la valeur d'une variable dans :root met à jour automatiquement tous les styles associés à travers le document :

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

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

Héritage et contexte

Les variables CSS sont héritées par les éléments enfants de leurs parents. Cela permet de définir des valeurs à un niveau supérieur et de les utiliser dans des contextes plus spécifiques.

Exemple :

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

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

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

Amélioration de la lisibilité

Utiliser des variables CSS améliore la lisibilité du code, car les variables peuvent être nommées en fonction de leur utilisation, rendant le code plus compréhensible.

Exemple :

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

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

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

Variables locales et globales

Les variables peuvent être déclarées tant à un niveau global (par exemple, dans :root) que localement pour des sélecteurs spécifiques. Cela permet de créer des styles flexibles et adaptatifs.

Exemple :

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

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

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

3.4 Exemple de mise en œuvre complète

Voici un exemple d'utilisation des variables pour l'héritage et la redéfinition 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; /* Redéfinition de la variable pour une utilisation locale */
        color: var(--primary-color);
      }

      .container .content {
        color: var(--primary-color); /* Utilise la valeur de la variable à partir de la racine */
      }
    
  

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

Explication :

• Dans cet exemple, --primary-color est utilisé pour styliser le texte dans l'élément .content, héritant la valeur depuis la racine
• Dans l'élément .header, la variable --primary-color est redéfinie, et une nouvelle valeur est utilisée