Les commentaires en CSS permettent d’ajouter des notes, des explications ou de désactiver temporairement une ligne de code sans la supprimer. Ils ne sont pas pris en compte par le navigateur, mais sont très utiles pour organiser et comprendre son code, surtout dans les projets complexes ou à plusieurs.
1. Syntaxe d’un commentaire CSS
Un commentaire CSS commence par /* et se termine par */. Il peut se placer sur une ligne seule ou à la fin d’une ligne de code.
/* Ceci est un commentaire CSS */
body {
background-color: black; /* fond sombre */
}
2. Utiliser un commentaire pour organiser son code
Les commentaires servent aussi à séparer visuellement les parties d’une feuille de style. C’est utile pour la lisibilité.
/* ========================
Typographie
======================== */
body {
font-family: Arial, sans-serif;
}
/* ========================
Couleurs principales
======================== */
h1 {
color: red;
}
3. Désactiver une ligne temporairement
Tu peux commenter une règle CSS pour qu’elle ne s’applique plus sans la supprimer. Pratique pour faire des tests.
/* border: 2px solid red; */
background-color: white;
4. Ne pas utiliser de // comme en JavaScript
Contrairement au JavaScript ou au PHP, les commentaires avec // ne fonctionnent pas en CSS et provoqueront une erreur.
// Ceci est invalide en CSS
Bonnes pratiques
- Utilise les commentaires pour documenter ton code, surtout quand il est complexe ou temporaire
- Structure tes fichiers CSS avec des commentaires visuels pour mieux t’y retrouver
- N’en abuse pas non plus — garde un code clair et concis
Conclusion
Les commentaires CSS sont invisibles pour l’utilisateur, mais essentiels pour le développeur. Ils rendent ton code plus clair, plus maintenable, et facilitent la collaboration. En combinant une bonne organisation avec des outils comme Prismatic dans WordPress, tu peux rédiger des tutoriels professionnels et accessibles.