IDs et Classes CSS

Parmi les sélecteurs les plus communs, on trouve "id" et "class". Cet article engagé de Louis Lazaris décrit leurs différences et les effets potentiels de l'utilisation de l'un ou l'autre.

Par

Pour appliquer vos styles CSS à un élément , vous utilisez les sélecteurs CSS. Parmi les sélecteurs les plus communs, on trouve "id" et "class". Cet article décrira leurs différences et les effets potentiels de l'utilisation de l'un ou l'autre.

Le sélecteur ID est très spécifique

Un ID est défini de la manière suivante dans votre HTML :

<div id="element">
    <!-- votre code... -->
</div>

Et dans votre CSS, vous pouvez cibler l'élément et lui appliquer un style :

#element {
    background: blue;
}

Les styles CSS sont appliqués en fonction de règles relatives à la cascade et à la spécificité. Si vous voulez mieux comprendre ces règles, vous pouvez vous référer à cet article.

La spécificité d'un sélecteur peut avoir un impact important sur la maintenance et le debuggage de votre code. Soyez bien conscients que si vous choisissez d'utiliser le sélecteur ID, vous pouvez créer des problèmes de spécificité qui vous obligeront plus tard à utliser des sélecteurs encore plus forts.

Dans un fichier CSS, les styles sont supposés "en cascade", donc en théorie un style déclaré plus tard dans votre feuille de styles doit primer sur un style déclaré en amont. Mais il faut compter aussi avec la spécificité des sélecteurs.

Par exemple, si vous aviez le HTML suivant :

<div id="element">
    <!-- votre code... -->
</div>

Et le CSS :

#element {
    background: blue;
}

body div.element {
    background: green;
}    

Même si le sélecteur body div.element apparaît après le sélecteur ID #element, et bien que l'élément "body" soit intégré dans le sélecteur, votre background restera obstinément blue parce que le sélecteur ID est plus spécifique que le deuxième sélecteur, et l'emportera sur la logique de cascade.

À première vue, avoir un sélecteur très spécifique peut sembler avantageux, mais à long terme, ce n'est pas une bonne chose. De plus, un ID ne peut être utilisé qu'une seule fois dans une page HTML, vous ne pourrez donc pas réutiliser le style de votre sélecteur, ce qui vous oblige à écrire plus de lignes de code.

Les Classes sont plus pratiques

Une classe est définie de la manière suivante dans votre HTML :

<div class="element">
    <!-- votre code... -->
</div>

Et dans votre CSS, comme précédemment, vous pouvez cibler l'élément et lui appliquer un style :

.element {
    background: blue;
}

Le sélecteur class est plus "propre" et plus facile à utiliser pour appliquer des styles à des éléments.

Les classes peuvent être réutilisées (vous n'êtes pas restreints à une seule classe par page, contrairement aux ID), cela vous permet d'éviter la répétition de styles. Vous pouvez également inclure des classes multiples (séparées par un espace) dans un seul attribut :

<div class="element elm2 elm3">
    <!-- votre code... -->
</div>

Dans votre CSS, vous pouvez enchaîner les classes ainsi : .element.elm2.elm3 (pas d'espace entre les classes). On a longtemps évité cette manière d'écrire à cause d'un bug dans IE6, mais ce navigateur n'est quasiment plus utilisé aujourd'hui.

Et surtout, le sélecteur class n'est pas extrêmement spécifique, donc une classe .element primera sur un élément moins spécifique (tel que span ou div) mais il ne primera pas sur d'autres classes - sauf s'il apparaît après, dans le processus naturel de la cascade.

C'est beaucoup plus pratique pour assurer la maintenance de votre site, lorsque vous ajouterez de nouvelles classes vous n'aurez pas à vous gratter la tête pour savoir si les styles que vous appliquez prendront réellement effet.

Notes finales

Mon conseil est donc de ne pas utiliser d'ID comme sélecteurs CSS, sauf si avez une excellente raison de le faire. Utilisez les classes et laissez la cascade opérer sa magie.

Cela ne signifie pas que vous n'utiliserez pas d'ID : vous en aurez toujours besoin pour vos liens à l'intérieur d'une même page, ainsi que pour JavaScript et jQuery.

Vous vous dites peut-être : Ok, mais si j'ai un élément dont je sais qu'il sera unique, pourquoi pas un ID ? Eh bien à mon avis, même dans ce cas, il n'y a aucune raison de préférer un ID et vous devriez quand même utiliser une classe.

Si vous les prenez comme deux sélecteurs autonomes, sans tenir compte des styles ni des autres sélecteurs, il n'y a aucune différence entre #element et .element. Mais lorsque vous prenez en compte tous les effets négatifs d'un sélecteur ID (non-réutilisable, hautement spécifique, non-respect de la cascade), il est clair que le sélecteur class est plus puissant et devrait être choisi.

Enfin, si vous voulez encore d'autres bonnes raisons d'utiliser les classes sans restriction, vous pouvez jeter un coup d'oeil à mon article sur le CSS Orienté Objet.


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur CSS parus dans la Cascade.

Tous les articles sur les bases de CSS parus dans la Cascade.


Ressources complémentaires en français

Petite intro à Classes et ID sur mamouthland.net

Différence entre class et id, par alsacréations.

Un article très clair sur la cascade CSS et les priorités de sélecteurs, par OpenWeb.


original paru le dans Impressive Webs.

Sur l'auteur : est un développeur freelance de Toronto, auteur de nombreuses publications. Il écrit régulièrement à propos de CSS sur Impressive Webs et dans d'autres blogs sur le design web. On peut le suivre sur Twitter.

Traduit avec l'aimable permission de Impressive Webs et de l'auteur.
Copyright Impressive Webs © 2011.