La classe est probablement le sélecteur que vous utiliserez le plus souvent en CSS. Elle permet de rattacher un style à un ou plusieurs éléments, sans toucher à leur position dans la page ni à leur balise HTML.
Contrairement à un identifiant, une classe peut être posée sur autant d'éléments que nécessaire, et un même élément peut en porter plusieurs à la fois. C'est ce qui en fait l'outil de base de toute feuille de style bien organisée.
Définition
Le sélecteur de classe cible tout élément HTML dont l'attribut class contient le nom indiqué, précédé d'un point dans la feuille de style. Un élément <div class="carte"> est ciblé par le sélecteur .carte.
Syntaxe et classes multiples
Un même élément HTML peut recevoir plusieurs classes, séparées par un espace dans l'attribut class. En CSS, on peut alors cibler cette combinaison précise en accolant les points, sans espace entre eux.
/* cible tout élément avec la classe "bouton" */
.bouton {
padding: 10px 20px;
border-radius: 6px;
}
/* cible uniquement un élément qui a À LA FOIS les classes "bouton" et "danger" */
.bouton.danger {
background-color: #e63946;
}Le HTML correspondant pourrait ressembler à <button class="bouton danger">Supprimer</button>. La classe bouton pose la base commune à tous les boutons, et la classe danger vient ajouter une variante par-dessus, sans dupliquer les règles de base.
Pourquoi préférer la classe à l'id
Le Sélecteur d'ID ne peut cibler qu'un seul élément par page, puisqu'un id doit rester unique dans le document. La classe, elle, est faite pour être réutilisée : le même style peut s'appliquer à dix boutons, cent cartes ou toute une liste d'articles, sans copier la règle à chaque fois. C'est aussi une question de Spécificité : un id pèse beaucoup plus lourd qu'une classe dans le calcul qui départage deux règles concurrentes, ce qui rend un style basé sur un id plus difficile à surcharger plus tard. En s'en tenant aux classes, on garde une feuille de style où toutes les règles ont un poids comparable et prévisible.
Organiser ses classes
Sur un projet qui grandit, le nommage des classes devient vite un sujet à part entière. Des méthodologies comme BEM proposent une convention de nommage qui évite les collisions entre composants et rend le rôle de chaque classe lisible rien qu'en la regardant, par exemple carte__titre pour le titre à l'intérieur d'un composant carte.
| Situation | Sélecteur |
|---|---|
| Tous les boutons | .bouton |
| Boutons en variante danger | .bouton.danger |
| Élément unique de la page | #en-tete |
Classes utilitaires ou classes sémantiques
Deux philosophies coexistent pour nommer les classes. Les classes sémantiques décrivent un rôle, comme .carte-produit ou .menu-principal, et restent lisibles même sans connaître le style associé. Les classes utilitaires décrivent un effet visuel isolé, comme .mt-4 pour une marge en haut ou .text-center pour un texte centré, et se combinent librement sur un même élément pour composer une mise en page sans écrire une seule ligne de CSS supplémentaire. Aucune des deux approches n'est universellement meilleure : les classes sémantiques favorisent la lisibilité du HTML, tandis que les classes utilitaires favorisent la rapidité d'exécution et limitent la taille de la feuille de style au fil du temps. De nombreux projets finissent par mélanger les deux, en réservant les classes utilitaires aux ajustements ponctuels.
Questions fréquentes
Techniquement oui, mais les styles des deux composants entrent alors en conflit puisqu'ils partagent le même sélecteur. Une convention de nommage claire évite ce genre de collision au fil du projet.
Oui, un nom de classe peut contenir des lettres, des chiffres, des tirets et des underscores, à condition de ne pas commencer par un chiffre. Le tiret reste la convention la plus répandue en CSS.
Non, ce n'est pas un problème en soi. Empiler plusieurs classes courtes et spécialisées est souvent plus lisible et plus flexible qu'une seule classe géante qui mélange trop de responsabilités différentes.