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

Alexandre Niveau
GREYC — Université de Caen
  • TODO: pas mal de choses à revoir, les démos ne sont pas toujours claires
  • ajouter revert et all? (voir slide)

Rappels

On a vu trois sortes de sélecteurs
  • Sélectionner les élements d'un certain type : le sélecteur est simplement le nom du type. Exemples : nav, em
  • Sélectionner les éléments d'une certaine classe : le sélecteur est un point (.) suivi du nom de la classe. Exemples : .info-complementaire, .photo
  • Sélectionner les éléments d'un certain identifiant : le sélecteur est un « croisillon » (#) suivi du nom de l'identifiant. Exemples : #pied-de-page, #item-actif
On a aussi vu deux façons de combiner des sélecteurs
  • Avec des virgules, on peut appliquer une règle aux éléments qui satisfont un sélecteur parmi plusieurs (disjonction). Exemple : h1,p,.toto sélectionne les éléments de type h1, les éléments de type h2, et les éléments de classe toto.
  • En séparant deux sélecteurs par une espace, on met une contrainte sur l'élément sélectionné ainsi que sur ses parents. Exemple : .toto p sélectionne les paragraphes dont au moins un parent est de classe toto.

Exemple de combinaison de sélecteurs

Si on met des éléments strong dans les titres, on ne voit pas la différence dans le résultat

On voudrait donc mettre les strong en couleur dans les titres (mais pas ailleurs)

Solution : la combinaison de sélecteurs permet de sélectionner des « éléments qui sont dans des éléments »

Pour combiner deux sélecteurs, on les sépare par une espace :
h2 strong {
    color: tomato;
}
⇒ sélectionne tous les éléments strong qui ont un ancêtre de type h2

N.B. : la règle est appliquée aux éléments sélectionnés par le dernier sélecteur de la combinaison

Attention : ici le caractère « espace » est très important, contrairement à (quasiment) partout ailleurs en CSS ! Ce choix de syntaxe est contre-intuitif à tous les niveaux !

Remarque : pour que ça marche avec tous les niveaux de titre, il faut utiliser un groupe de sélecteurs :
h1 strong, h2 strong, h3 strong {
    color: tomato;
}

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.

NB: on ne peut pas faire la conjonction de sélecteurs d'éléments, mais c'est pas grave

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.

Combiner id et class

  • Utiliser id pour les propriétés uniques d'un élément
  • Utiliser class pour des propriétés partagées (ou s'il y a une sémantique derrière la présentation)
Exemple : montrer du code
  • Page avec 2 menus (d'identifiants #menu1 et #menu2), de style identique, sauf que l'un est en bleu et l'autre en rouge.
  • On leur met une classe menu, pour ce qui est commun, et on utilise les identifiants pour changer simplement les couleurs
  • D'autre part, on utilise .menu a pour styler les liens des menus
    ⇒ pas besoin de nouvelle classe lienMenu
    ⇒ inutile de dupliquer les propriétés avec 2 sélecteurs #leftMenu a et #rightMenu a

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…

La valeur revert est utilisable partout maintenant. et le shorthand all aussi

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.

parler des valeurs par défaut : initial, inherit, et surtout unset ; voir aussi revert (pas encore très supporté)

il y a aussi la propriété all.

https://www.w3.org/TR/css-cascade-4/