Comment ajouter des commentaires en CSS pour vous-même ou votre développeur


En CSS, vous pouvez ajouter des commentaires pour expliquer ou organiser différentes sections de votre feuille de style. Cela peut sembler être une étape superflue dans le processus de codage, mais les commentaires peuvent être extrêmement utiles lors du débogage ou de la refonte de votre site Web.

deux concepteurs de sites Web apprennent à commenter en css

Pourquoi? Parce qu’ils indiquent au lecteur ce que certaines lignes de votre code sont censées faire. Ces notes sont particulièrement utiles si plusieurs développeurs travaillent sur un site Web ou si vous avez hérité du site d’un autre propriétaire.

Télécharger maintenant : 25 hacks HTML et CSS (guide gratuit)

Si vous avez déjà parcouru une feuille de style ou lu suffisamment d’articles de blog avec des extraits de code, vous avez peut-être déjà vu des commentaires. Ils sont reconnaissables par le /* */ marques qui les entourent.

Dans cet article, nous verrons comment créer des commentaires en CSS. Ensuite, nous verrons ce que signifie “commenter” en CSS et comment le faire. Enfin, nous aborderons une autre méthode de commentaire CSS que vous devriez éviter. Commençons.

Vous pouvez ajouter des commentaires à votre feuille de style de deux manières. Le format le plus courant est un commentaire sur une seule ligne, illustré ci-dessous :


/* Ceci est un commentaire en CSS */

p {

Couleur blanche;

couleur de fond : #2594A4 ;

}

Un commentaire d’une seule ligne peut avoir sa propre ligne, ou il peut être placé sur une ligne avec du code actif, comme illustré ici :


p {

Couleur blanche; /* définit la couleur du texte sur blanc */

}

Vous pouvez également les formater en tant que commentaires multilignes :


/* Ces mots…

…sont à l’intérieur…

… le même commentaire. */

Les commentaires en CSS sont ignorés par le navigateur et n’ont aucun effet sur la façon dont les styles sont rendus sur le front-end.

Les commentaires fonctionnent à la fois dans les CSS internes et externes, ainsi qu’avec les frameworks CSS comme Bootstrap CSS.

En plus d’expliquer des sections de code, les commentaires sont également fréquemment utilisés pour « commenter » un morceau de code CSS.

Commenter est une astuce pratique à utiliser lors du test et du débogage du code CSS. Il vous permet d’essayer diverses combinaisons de styles, car le fait de placer une déclaration dans un commentaire le rend invisible pour le navigateur.

Avant de continuer, clarifions ce qu’est un ensemble de règles. Un ensemble de règles est un sélecteur CSS et toutes les déclarations entre parenthèses. Vous trouverez ci-dessous un ensemble de règles pour tous les éléments de paragraphe d’une page Web (que nous avons utilisé dans les exemples ci-dessus).


p {

Couleur blanche;

couleur de fond : #FF5C35 ;

rembourrage : 10px ;

}

Maintenant, examinons plusieurs exemples et cas d’utilisation pour commenter CSS et quand vous voudrez peut-être l’utiliser.

Commentez les exemples CSS

1. Désactiver les déclarations CSS

Comme mentionné, l’un des cas d’utilisation les plus populaires pour commenter CSS consiste à désactiver les règles et déclarations CSS, ce qui vous permet de tester des alternatives ou de déboguer du code.

Voyons comment commenter une déclaration CSS individuelle dans un ensemble de règles.

Voir le stylo Commentaires CSS : commenter 1 par HubSpot (@hubspot) sur CodePen.

La déclaration Couleur blanche ne s’applique plus car il a été commenté.

Examinons maintenant un autre exemple dans lequel l’ensemble de règles complet est commenté :

Voir le stylo Commentaires CSS : commenter 2 par HubSpot (@hubspot) sur CodePen.

Comme vous pouvez le voir, aucun style n’est appliqué à l’élément de paragraphe.

2. Ajouter des notes et des explications au CSS

Un autre cas d’utilisation populaire pour les commentaires CSS consiste à ajouter des notes pour vous-même ou d’autres développeurs. L’exemple ci-dessous montre comment les commentaires peuvent être utilisés pour indiquer à tout développeur lisant le code ce que fait chaque ligne.

Voir le stylo Commentaires CSS : exemple par HubSpot (@hubspot) sur CodePen.

Vous pouvez également l’utiliser pour expliquer une règle CSS entière et ce qu’elle affecte ou modifie sur la page.

3. Indiquez le début et la fin des règles CSS

Si vous avez un document CSS long et peu maniable, vous pouvez également utiliser des commentaires CSS pour indiquer le début et la fin d’ensembles de règles entiers. Cela fonctionne particulièrement bien si vous disposez d’une vaste collection de classes CSS pour des éléments HTML spécifiques.

Voir le stylo Exemple de commentaires CSS : début et fin de style par HubSpot (@hubspot) sur CodePen.

4. Fournir des instructions d’édition

En plus d’expliquer ce que fait chaque déclaration CSS, comme dans le deuxième exemple, vous pouvez également utiliser des commentaires CSS pour fournir des instructions d’édition aux autres développeurs.

En supposant que vous travaillez activement sur un site Web, vous pouvez indiquer ce qu’il faut modifier ou ne pas modifier, ou spécifier d’autres paramètres et modifications.

Voir le stylo Exemple de commentaires CSS : instructions d’édition par HubSpot (@hubspot) sur CodePen.

Comment commenter CSS : Essayez-le vous-même

Il est maintenant temps d’essayer les commentaires en CSS. C’est simple et facile, mais si vous travaillez sur un site Web en direct, cela peut être intimidant au début, car commenter accidentellement une règle ou une déclaration entière peut faire mal tourner les choses.

Vous trouverez ci-dessous une page Web simple avec un arrière-plan vidéo codé en CSS. Les arrière-plans vidéo sont délicats et peuvent rapidement sembler faux si une déclaration est commentée. Jouez et voyez ce que le commentaire de chaque ligne fait à la page.

Voir le stylo Exemple de commentaires CSS : essayez-le vous-même par HubSpot (@hubspot) sur CodePen.

Le module de code ci-dessus est modifiable ! Basculez entre les onglets HTML et CSS, modifiez le code et cliquez sur réexécuter dans le coin inférieur droit.

Voici quelques autres choses que vous pouvez essayer :

  • Commentez la couleur de la police du titre
  • Commentez la déclaration z-index de la vidéo
  • Commentez l’intégralité de la règle @media
  • Ajoutez des notes sur la règle @media et ce qu’elle fait
  • Fournir des instructions d’édition pour le contenu de la page

Commentaire CSS sur une seule ligne

Techniquement, il existe un autre moyen de commenter des lignes simples en CSS dans certains navigateurs, en plaçant une double barre oblique (//) devant le code que vous souhaitez commenter au lieu d’utiliser le standard /* … */ méthode.


/* Cette ligne est commentée. */

// Cette ligne est commentée, mais vous ne devriez pas utiliser cette méthode !

Cependant, il est fortement recommandé d’éviter cette méthode dans votre code. La méthode de commentaire à double barre oblique n’est pas standardisée en CSS (alors que la /* … */ méthode est), ce qui signifie qu’il n’est pas garanti de fonctionner sur tous les navigateurs.

Oui, cela peut fonctionner sur certains navigateurs modernes. Mais, ces navigateurs pourraient désactiver cette fonctionnalité à tout moment, ce qui signifie que vos commentaires ne seront plus des commentaires, votre CSS se cassera et vos visiteurs seront confus.

Pour plus de sécurité, respectez les /* … */ commentant la méthode dont nous avons discuté car c’est fermement la norme, fonctionne sur tous les navigateurs et systèmes d’exploitation, et ne sera pas obsolète de si tôt.

Commentaires CSS vs commentaires HTML

Vous avez peut-être également remarqué que les commentaires CSS fonctionnent de la même manière que les commentaires HTML. La différence entre eux est que les commentaires CSS sont désignés par les symboles /* … */tandis que les commentaires HTML sont inclus dans Mots clés.

La différence est illustrée dans l’exemple ci-dessous :

Voir le stylo Commentaires CSS vs commentaires HTML par HubSpot (@hubspot) sur CodePen.

Faire des commentaires en CSS

Si vous souhaitez ajouter des notes explicatives ou empêcher le navigateur d’afficher des parties spécifiques de votre feuille de style, vous pouvez utiliser des commentaires. Les commentaires n’affecteront pas l’interprétation des autres parties de votre feuille de style ou la mise en page de votre site Web sur le front-end. Ils sont également faciles à créer, même si vous commencez tout juste à apprendre le HTML et le CSS.

Note de l’éditeur : cet article a été initialement publié en juillet 2020 et a été mis à jour pour être complet.

codage-hacks



Vous pouvez lire l’article original (en Anglais) sur https://blog.hubspot.com/website/comment-out-in-css

Leave a Reply

Your email address will not be published. Required fields are marked *