Bonnes pratiques CSS

Factorisation du code

Comme toujours en informatique, on cherche à factoriser au maximum son code CSS, c'est-à-dire à éviter les répétitions (principe DRY).

Objectif visé : principalement la facilité de maintenance

Voir le tutoriel sur la factorisation CSS de Jean-Marc Lecarpentier

Éviter les sélecteurs trop génériques

De façon générale, on essaie d'éviter que le CSS dépende trop de la structure du HTML

Notamment, il faut faire attention aux sélecteurs trop génériques

Vous utilisez souvent directement les éléments suivants comme sélecteurs, parce qu'il n'y a pas d'ambiguïté dans vos pages :

header { /* ... */ }
footer { /* ... */ }
nav { /* ... */ }
article { /* ... */ }
section { /* ... */ }
aside { /* ... */ }

Longueur des sélecteurs

• Il ne faut pas utiliser des sélecteurs trop « longs », qui suivent de trop près la structure du HTML
• Exemple : #entete .menu ul li a
• il suffit a priori de mettre .menu a (on sélectionne les liens du menu). S'il y a plusieurs sortes de liens dans le menu, alors il vaut mieux leur donner des classes distinctes.
• Les sélecteurs trop longs posent encore une fois des problèmes de maintenabilité
  1. le CSS est très dépendant de la structure du HTML : si on change le HTML, on risque de casser le CSS c'est une autre catégorie de sélecteur pas très robuste
  2. plus les sélecteurs sont longs, plus leur spécificité est grande : leurs effets sont donc plus difficiles à « annuler » si besoin
• Il n'y a pas de règle absolue, mais trois « étages » pour un sélecteur est a priori un maximum. S'il y a besoin de plus, se poser la question de l'ajout d'une classe.

Ne pas s'appuyer que sur les classes

Une stratégie pour éviter ces problèmes peut être de n'utiliser que des classes, c'est-à-dire de créer une classe à chaque fois qu'on a besoin de styler un élément, et de n'avoir que des sélecteurs avec une seule classe.

On évite effectivement la dépendance à la structure du HTML, mais cela devient vite très lourd à maintenir, et le CSS est moins facile à lire puisqu'il donne peu d'indications sur la structuration de la page et les éléments à styler. Exemple :

  .lien-bibliographie {
      color: pink;
      text-decoration: none;
  }

pourquoi préciser ici text-decoration: none ? Il serait probablement plus approprié de mettre une classe au bloc englobant et d'utiliser celle-ci dans le CSS :

  .bibliographie a {
      color: pink;
      text-decoration: none;
  }

Ici il est plus clair que l'on enlève le soulignement par défaut de l'élément a.

Il n'est pas toujours évident de trouver un bon équilibre, et les critères peuvent être assez subjectifs ! Mais dans tous les cas il faut éviter les deux extrêmes (aucune classe / que des classes).

Structurer ses fichiers CSS

• Créer des fichiers CSS séparés selon des catégories
• Le but est d'utiliser une même feuille de style sur un maximum de pages
• Ordre des déclarations : plusieurs choix sont possibles, à condition de rester cohérent et facile à comprendre. Exemple : en largeur d'abord, càd d'abord la mise en page des gros blocs, puis les détails de chaque bloc, et ce récursivement.
• Dans tous les cas, commenter le code pour faciliter la maintenance !
  Le minimum absolu est de séparer les règles en groupes logiques avec des sortes de catégories ou sections :

  /**** BANNIÈRE ****/
  
  .banniere {
    background-color: black;
  }
  
  .logo {
    color: white;
    background-color: blue;
  }
  
  /**** MENU ****/
  
  .menu {
    border-radius: 1em;
    display: grid;
    grid-template-columns: 15em 15em 15em;
  }
  
  .menu a {
    border: 1px solid red;
  }
  
  /**** PRODUITS ****/
  
  .produit {
    font-style: italic;
  }
  
  .produit h2 {
    font-family: YoupiSans;
  }
  
  .price-tag {
    color: red;
  }
  

• Éviter les CSS très longues : essayer de diviser en modules indépendants.

Utiliser plusieurs fichiers CSS

• Si on a bien divisé son CSS en modules, on a besoin d'utiliser plusieurs fichiers CSS pour chaque page HTML.
• Pour ce faire, il suffit de mettre plusieurs <link rel="stylesheet"> dans le head
• Une autre possibilité offerte par CSS : la règle @import…
  • @import url("mystyle.css"); pour importer une CSS
  • Permet d'avoir une seule feuille de style pilote qui appelle toutes les CSS du site, divisées en modules
  • Attention : les imports doivent être faits avant toute autre déclaration dans les CSS !
  Mais il est très déconseillé d'utiliser @import : empêche le téléchargement des CSS en parallèle, ce qui bloque le rendu
• Ce problème n'arrive pas si on met plusieurs <link rel="stylesheet"> dans le HTML : les fichiers peuvent être chargés en parallèle.