Précisions sur les sélecteurs et bonnes pratiques CSS

Rappels

Conjonction de sélecteurs

Une façon de combiner les sélecteurs que l'on n'a pas encore vue est la conjonction (qui correspond à l'opérateur logique « et »)

Permet de sélectionner des éléments qui doivent satisfaire plusieurs sélecteurs à la fois

Pour obtenir cette combinaison, il suffit de regrouper les sélecteurs ensemble, sans espaces

Ex: img#toto.intro sélectionne les éléments de type img ayant l'identifiant toto et la classe intro.

Association de différents types de sélecteurs

• Il peut être utile d'associer un sélecteur de classe avec un sélecteur de type d'élément
• Exemple : j'ai une page sur des opérations mathématiques. Je veux mettre en valeur les noms des opérations dans le texte. Chaque opération a également un encadré avec plus d'informations. Je peux utiliser le CSS suivant :

  span.operation {
      font-weight: bold;
  }
  
  aside.operation {
      border: 2px solid black;
      float: right;
  }
  

• Intérêt : pas besoin d'une classe différente pour les deux utilisations, on s'appuie sur la structure du document.
• En pratique, c'est rarement utile et c'est même une assez mauvaise idée, pour des raisons de maintenance :
  1. c'est plus facile de s'y retrouver dans son CSS si les noms de classes ne sont utilisés que pour un seul usage précis
  2. il faut éviter de rendre le CSS trop dépendant du HTML : si on décide de remplacer le aside par un autre élément, on casse tout alors que les classes ne servent que pour le CSS, pas de raison de les changer

Classes multiples

• On peut mettre plusieurs classes sur un élément HTML. Syntaxe :

  <div class="foo bar">je suis de classe foo et de classe bar!</div>

  ⇒ on sépare les classes par des espaces dans l'attribut class
• Avec le CSS suivant

  .foo { color: yellow; }
  .bar { border: solid 4px red; }
  

  l'élément sera en jaune avec une bordure rouge.
• C'est une bonne chose : on peut mutualiser davantage de code. Exemple d'utilisation Trouver un meilleur exemple, qui montre davantage la notion d'orthogonalité + ne donne pas d'exemple de classes co-dépendantes…
• Note : rien n'empêche de sélectionner les éléments qui ont plusieurs classes à la fois

   .foo.bar { border-style: dashed; }

  Peut être utile, mais pas évident à maintenir : en général on essaie plutôt d'éviter que les classes dépendent les unes des autres.

Spécificité des sélecteurs

• Plusieurs sélecteurs peuvent donner des valeurs différentes à une même propriété
• Règle de base en CSS : c'est le dernier qui gagne
• En réalité, ce n'est pas toujours le cas : c'est le plus spécifique qui gagne
• On calcule la spécificité d'un sélecteur comme indiqué ici (voir aussi cet article plus visuel sur CSS-Tricks et cet article qui explique le calcul avec des personnages de Star Wars).
• Une astuce : en utilisant le sélecteur [id="toto"] plutôt que #toto, on vise le même élément mais avec une spécificité moindre
• Plus d'explications dans cette démo : Illustration des effets inattendus de la spécificité exemple plus concret et plus court ?
• Au passage, on peut forcer une propriété à s'appliquer avec !important. Ne pas le faire dans du vrai code : ça complique (encore plus) le débogage et la maintenance. Ça peut être utile pour tester ou déboguer (ou dans les cas où on doit ajouter des styles par-dessus du CSS qu'on ne contrôle pas).

Annuler une propriété CSS

Parfois on a spécifié une propriété CSS pour un cas général, et on a besoin de l'« annuler » pour un cas particulier

Cela arrive notamment avec les media queries

On peut utiliser les valeurs spéciales initial, inherit et surtout unset

• initial revient à la valeur « par défaut » de la propriété : par exemple pour color, c'est black
• inherit force à hériter de la valeur du parent : typiquement plus approprié justement pour color, mais pas pour d'autres
• unset remet la propriété dans l'état où elle aurait été si on n'avait rien modifié. Pour color, ça reviendra à faire inherit, mais pour background ça reviendra à faire initial

De façon générale, il vaut mieux toujours utiliser unset, sauf si vous savez vraiment ce que vous faites ou si le résultat ne vous convient pas…

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
  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.

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 !
• É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 pluseiurs <link rel="stylesheet"> dans le HTML : les fichiers peuvent être chargés en parallèle.