Quelle est la différence entre une classe et un id ?
Le 25-02-2005 par Raphael dans Bases et indispensables.
Chaque terme permet de créer des propriétés CSS personnalisées, que vous pouvez appliquer à vos balises, mais il existe des différences entre une classe (.toto) et un id (#toto)
Différence fondamentale
On peut utiliser indifféremment id et class, mais...
- un id s'applique à un objet unique : il ne peut pas y avoir deux mêmes id dans une page
- une classe peut désigner plusieurs objets identiques.
Par exemple, il est possible d'avoir ce code :
<div class="toto"></div> <div class="toto"></div>
Mais il n'est pas correct d'avoir ce code :
<div id="toto"></div> <div id="toto"></div>
En effet, l'id ne doit désigner qu'un seul objet du document. On peut bien sûr définir autant d'id que l'on veut dans la feuille de style, mais il faut qu'ils soient uniques dans la page html.
Pour du code "rigoureux", ce qui est syntaxiquement le plus juste doit être privilégié. Utilisez les id en priorité lorsque vous le pouvez et les class lorsque vous ne pouvez pas...
Par exemple : commencez à utiliser id systématiquement pour les objets unique pour faciliter la lecture du code. Par exemple, donnez un id à votre body (pour ancre), à votre bloc en-tête, votre bloc gauche, droit... Par contre pour les paragraphes ou listes de menu utilisez les classes puisqu'il y'a plusieurs objets de ce type.
Avantages et inconvénients
Quelle peut etre l'utilité d'un id qui ne sert qu'une fois alors qu'il existe la classe ?
Il y a plusieurs raisons à cela, voici mes préférées :
- L'id est pratique car il remplace peu à peu "name" en javascript : en DHTML, on appelle dorénavant les objets et calques avec getElementById, ce qui facilite la compatibilité entre tous les navigateurs depuis IE5, NN6, Opera et Mozilla. C'est grâce à cette méthode que l'on oubliera les document.layer, document.all, ... et autres codes multiples pour être compatible.
- L'id peut servir d'ancre nommée, puisque là aussi il remplace name. On pourra donc aller en haut de page comme ça :
<body id="top">... <a href="#top">aller en haut</a>
Note : En suivant quelques tutoriels d'Alsacréations, vous remarquerez sans-doute quelques incohérences par rapport à cet article, notamment des utilisations de class alors qu'un id aurait été plus approprié. Vous mettrez ces incohérences sur le compte de la jeunesse : quelques tutoriels sont un peu vieillots ! :)
