Votre troisième exemple concerne l’enchaînement de sélecteurs simples via le combinateur descendant, qui est comme une version plus floue et plus lente du combinateur enfant. Si vous ne supportez pas IE6, vous devriez plutôt utiliser le combinateur enfant à la place.

Par exemple, #twitter p vs #twitter>p. D’abord, le navigateur rassemble tous les éléments p, puis il remonte d’un niveau et vérifie si cet élément a l’id « twitter ». Si ce n’est pas le cas, le navigateur s’arrêtera ici si vous avez utilisé le combinateur enfant. Avec le combinateur descendant, il ira jusqu’au nœud racine (s’il ne trouve pas d’éléments #twitter sur son chemin). Donc, les faux positifs sont toujours légèrement plus lents avec le combinateur descendant.

Le plus gros problème avec le combinateur descendant est son caractère flou, qui augmente la possibilité de collisions. Comme effet secondaire, la création de structures arbitrairement emboîtables devient beaucoup plus délicate.

.container #twitter p est également trop spécifique. Voulez-vous vraiment que les éléments p à l’intérieur de #twitter aient un aspect différent si #twitter n’est pas à l’intérieur de .container?

Un autre problème est que .container est un emplacement et non une partie de la structure. Donc, oui… cette règle n’est pas réutilisable.

CSS évolutive = code réutilisable = classes. Les règles basées sur l’Id ne sont, par définition, pas réutilisables.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.