Chaque site Web est composé d'éléments structurels, fonctionnels et stylistiques. Feuilles de style en cascade dicter l'apparence (le "look and feel") d'un site Web. Ces styles sont séparés de la structure HTML pour faciliter la mise à jour et le respect des normes Web.
Le problème avec les feuilles de style
Avec la taille et la complexité de nombreux sites Web aujourd'hui, les feuilles de style peuvent devenir assez longues et encombrantes. Ce problème est devenu plus complexe maintenant que requêtes multimédias pour styles de sites Web réactifs sont une partie essentielle de la conception, garantissant qu'un site Web se présente comme il se doit, quel que soit l'appareil. À elles seules, ces requêtes multimédias peuvent ajouter un nombre important de nouveaux styles à un document CSS, ce qui le rend encore plus difficile à utiliser. La gestion de cette complexité est l'endroit où les commentaires CSS peuvent devenir une aide inestimable pour les concepteurs et les développeurs de sites Web.
Les commentaires ajoutent de la structure et de la clarté
L'ajout de commentaires aux fichiers CSS d'un site Web organise les sections de ce code pour un lecteur humain qui examine le document. Cela garantit également la cohérence lorsqu'un professionnel du Web reprend là où un autre s'arrête, ou lorsque des équipes de personnes travaillent sur un site.
Des commentaires bien formatés communiquent des aspects importants de la feuille de style aux membres d'une équipe qui ne connaissent peut-être pas le code. Ces commentaires sont également utiles pour les personnes qui ont déjà travaillé sur le site mais ne l'ont pas fait récemment; Les concepteurs de sites Web travaillent généralement sur de nombreux sites, et il est difficile de se souvenir des stratégies de conception de l'un à l'autre.
Uniquement pour les yeux des professionnels
Les commentaires CSS ne sont pas affichés lorsque la page s'affiche dans navigateurs Web. Ces commentaires sont uniquement informatifs, tout comme Commentaires HTML sont (bien que la syntaxe soit différente). Ces commentaires CSS n'affectent en aucun cas l'affichage visuel d'un site.
Ajout de commentaires CSS
L'ajout d'un commentaire CSS est assez simple. Réservez votre commentaire avec les balises de commentaire d'ouverture et de fermeture correctes:
Commencez votre commentaire en ajoutant /* et fermez-le avec */.
Tout ce qui apparaît entre ces deux balises est le contenu du commentaire, visible uniquement dans le code et non rendu par le navigateur.
Un commentaire CSS peut prendre n'importe quel nombre de lignes. Voici deux exemples:
/* exemple de bordure rouge */
div#border_red {
bordure: rouge uni fin ;
}
/***************************
****************************
Style pour le texte du code
****************************
***************************/
Découper des sections
De nombreux concepteurs organisent les feuilles de style en petits morceaux faciles à digérer et faciles à numériser lors de la lecture. En règle générale, vous verrez les commentaires précédés et suivis d'une série de traits d'union qui créent de grandes coupures évidentes dans la page qui sont faciles à voir. Voici un exemple:
/* Styles d'en-tête */
Ces commentaires indiquent le début d'une nouvelle section de codage.
Code de commentaire
Étant donné que les balises de commentaire indiquent au navigateur d'ignorer tout ce qui se trouve entre elles, vous pouvez les utiliser pour désactiver temporairement certaines parties du code CSS. Cette astuce peut être pratique lors du débogage ou lors de l'ajustement de la mise en forme de la page Web. En fait, les concepteurs les utilisent souvent pour « commenter » ou « désactiver » des zones de code pour voir ce qui se passe si cette section ne fait pas partie de la page.
Ajoutez la balise de commentaire d'ouverture avant le code que vous souhaitez commenter (désactiver); placez la balise de fermeture à l'endroit où vous souhaitez que la partie désactivée se termine. Rien entre ces balises n'affectera l'affichage visuel d'un site, vous aidant à déboguer le CSS pour voir où se produit un problème. Vous pouvez ensuite entrer et corriger ce problème, puis supprimer les commentaires du code.
Conseils pour les commentaires CSS
De nombreux codeurs incluent des blocs de commentaires en haut de tout nouveau fichier contenant du code. Imitez cette stratégie en incluant un bloc de commentaires avec votre nom, les dates pertinentes et des informations connexes pour vous aider les gens comprennent le contexte d'un projet et pas seulement les décisions sur ce qui se passe par rapport à un code spécifique bloquer.