Comment ajouter des commentaires à des feuilles de style en cascade (CSS)

Chaque site Web est composé d'éléments structurels (dictés par HTML), fonctionnels et stylistiques. Les feuilles de style en cascade (CSS) sont utilisées pour dicter l'apparence (le "look and feel") d'un site Web. Ces styles sont séparés de la structure HTML afin de faciliter la mise à jour et de respecter les normes Web.

Le problème avec les feuilles de style

Compte tenu de la taille et de la complexité de nombreux sites Web actuels, les feuilles de style peuvent devenir relativement longues et encombrantes. Cela est particulièrement vrai maintenant que les requêtes des médias pour les styles de sites Web réactifs constituent une partie essentielle de la conception, garantissant ainsi que le site Web a l'apparence qu'il convient, quel que soit le périphérique. Ces requêtes multimédia à elles seules peuvent ajouter un nombre important de nouveaux styles à un document CSS, ce qui rend encore plus difficile le travail avec celui-ci. C’est là que les commentaires CSS peuvent devenir une aide précieuse pour les concepteurs et les développeurs de sites Web.

Commentaires Ajouter structure et clarté

L'ajout de commentaires aux fichiers CSS d'un site Web est un excellent moyen d'organiser des sections de ce code pour un lecteur humain qui examine le document. Cela garantit également la cohérence lorsqu'un professionnel du Web reprend ses activités ou qu'un groupe de personnes travaille sur un site.

Des commentaires bien formatés peuvent communiquer des aspects importants de la feuille de style aux membres d'une équipe qui ne sont peut-être pas déjà familiarisés avec le code. Ces commentaires sont également très 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 les unes des autres.

Pour les yeux des professionnels seulement

Les commentaires CSS ne sont pas affichés lors du rendu de la page dans les navigateurs Web. Ces commentaires sont uniquement informatifs, tout comme les commentaires HTML (bien que la syntaxe soit différente). Ces commentaires CSS n'affectent en aucune manière l'affichage visuel d'un site.

Ajout de commentaires CSS

Ajouter un commentaire CSS est assez facile. Il vous suffit de réserver votre commentaire avec les balises de commentaire appropriées pour l’ouverture et la fermeture:

• Commencez votre commentaire en ajoutant

  /*

• Fermez votre commentaire en ajoutant

  */

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: mince rouge uni; }/*******************************************************Style pour le texte de code*******************************************************/

Breaking Out Sections

De nombreux concepteurs organisent des feuilles de style en petits morceaux faciles à digérer et faciles à numériser lors de la lecture. En règle générale, les commentaires sont précédés et suivis d'une série de traits d'union qui créent des coupures importantes et é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 "Commentaires"

Étant donné que les balises de commentaire indiquent au navigateur de tout ignorer, vous pouvez les utiliser pour désactiver temporairement certaines parties du code CSS. Cela peut être utile lors du débogage ou lors de l'ajustement du formatage d'une page Web. En fait, les concepteurs les utilisent souvent pour "commenter" ou "désactiver" des zones de code afin de voir ce qui se passe si cette section ne fait pas partie de la page.

Pour ce faire, ajoutez simplement 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, ce qui vous permettra de déboguer le CSS pour voir où un problème survient. Vous pouvez ensuite résoudre ce problème et supprimer les commentaires du code.

CSS Commenting Tips

En résumé, voici quelques conseils à retenir pour utiliser des commentaires dans votre code CSS:

1. Les commentaires peuvent s'étendre sur plusieurs lignes.
2. Les commentaires peuvent inclure des éléments CSS que vous ne souhaitez pas afficher par un navigateur, mais que vous ne souhaitez pas supprimer complètement. N'oubliez pas de supprimer les styles inutilisés (au lieu de les laisser commentés) si vous décidez de ne pas en avoir besoin sur le site Web.
3. Utilisez des commentaires chaque fois que vous écrivez des CSS complexes pour ajouter de la structure, clarifier les décisions de conception et informer (ou rappelez-vous) les futurs développeurs des considérations importantes. Cela fait gagner du temps à l'avenir pour toutes les personnes concernées.
4. Les commentaires peuvent également inclure des méta-informations telles que:
   1. Auteur
   2. Date créée
   3. droits d'auteur

Performance

Bien que l'ajout de trop de commentaires puisse affecter la vitesse et les performances de téléchargement d'un site, vous ne devez pas hésiter à les utiliser. Il faudrait plusieurs lignes de commentaires pour avoir un impact négatif significatif. Comme dans de nombreux aspects de la conception Web, tout se résume.