Je maintiens mon usage global (j’ajoute juste les « > » qu’ils expliquent sur le MDN).

Le lien http://oli.jp/2011/ids/ est intéressant, mais il oublie commence fonctionne un navigateur à un nouveau encore plus bas et ça rend son explication incomplète et qui ne me convainc pas.

Concernant le fait que « #id a » est plus lent : ça ne sera pas plus lent qu’un « .class a » : ça fonctionne de droite à gauche quelque soit le sélecteur.

Lors du parsage du document, un navigateur constitue 4 tableaux pour trier les éléments dom : les ID, les classes, les éléments eux mêmes (a, div…) et les pseudo éléments.
Utiliser les ID permet de se positionner directement dans l’arbre dom, sans avoir à tout parcourir.

Mettre des classes partout, c’est lourd au niveau du parsage ! Moins au niveau du rendu, mais plus au niveau du parsage : plus de classe augmente la taille des arbres dom.

Le DOM contient non seulement les éléments (div, a, p…) mais aussi les classes, ID ainsi que tous les attributs et les événements (côté JS). C’est pour ça que les sélecteurs « a[href="http…"] » sont si lent comparés au reste : ce sélecteur doit trouver non seulement l’élément, mais en plus ouvrir les branches contenant les attributs, puis les valeurs de ces attributs et parser ces derniers.

Certes on peut les utiliser en CSS, aucun problème, mais on doit juste savoir que c’est lent.

Pour en revenir aux ID, il y a une chose à retenir, c’est ce qu’il explique dans le dernier paragraphe : la spécificité d’un sélecteur.

Faire « #id .classe {} » sera prioritaire sur « .classa1 .classe1 », lui même prioritaire sur « div a ».
C’est tout… Mais ça c’est si basique qu’aucun cours sur le CSS en parle, même celui du SDZ n’en parlait pas à l’époque.
Ainsi, mettre « #id > #autreId ». Mais là encore, ça a une application pour les spécificités.

Pour le reste, l’ID n’est qu’une classe avec une spécificité plus grande et avec des règles en plus (unicité dans le document, syntaxe de la valeur…). C’est pas "mal" de l’utiliser.
Tout dépend de sa page web, et son application : si le élément possède un ID pour le JS ou pour créer une ancre dans le document (usage légitime), pourquoi ne pas les utiliser en CSS aussi ?


Pour l’usage que j’en fais, j’ai du CSS pour tout mon programme, avec les formulaires et tout le bordel : je préfère utiliser des ID pour chaque page plutôt que d’utiliser des classes en grand nombre et avec des noms à ralonges, ce qui alourdirait à la fois le chargement du fichier (plus de code), le parsage (plus de longueur de texte à parser + d’avantage de classes), le rendu et la maintenance.
J’utilise les classes aussi, mais je rajoute un couche avec les ID pour être plus précis.
— (permalink)