Des CSS lisibles

 

Cette page aborde le style et la grammaire du langage CSS lui-même.

Vous modifierez l'aspect de votre fichier CSS pour le rendre plus lisible.

Information : des CSS lisibles

Vous pouvez ajouter des blancs et des commentaires à vos feuilles de style pour les rendre plus lisibles. Vous pouvez également grouper des sélecteurs ensemble, lorsque les même règles s'appliquent à des éléments sélectionnés de manière différente.

Insertion de blancs

Les feuilles de style peuvent être aérées à l'aide d'espaces, de tabulations et de retours à la ligne. Elles deviendront ainsi plus lisibles.

Votre fichier CSS d'exemple a actuellement une règle par ligne, et à peu près le minimum possible d'espaces blancs. Dans une feuille de style complexe, ce type de mise en page devient rapidement difficile à lire, et rend la feuille difficile à maintenir.

La mise en page à utiliser est généralement une question de préférence personnelle, mais si vos feuilles de style font partie de projets partagés, ceux-ci peuvent avoir leurs propres conventions.

Exemples
Certaines personnes aiment la mise en page compacte que nous avons utilis√©e jusqu'√† pr√©sent, ne coupant une ligne que lorsqu'elle devient tr√®s longue :
.carotte {color: orange; text-decoration: underline; font-style: italic;}

D'autres pr√©f√®rent un couple propri√©t√©-valeur par ligne :

.carotte
{
color: orange;
text-decoration: underline;
font-style: italic;
}

Certains utilisent une indentation ‚ÄĒ deux espaces, quatre espaces, ou encore une tabulation :

.carotte {
  color: orange;
  text-decoration: underline;
  font-style: italic;
}

D'autres appr√©cient que tout soit align√© verticalement (mais ce type de mise en page est difficile √† maintenir) :

.carotte
    {
    color           : orange;
    text-decoration : underline;
    font-style      : italic;
    }

Par ailleurs, si certains utilisent des tabulations, d'autres utiliseront uniquement des espaces.

Commentaires

Les commentaires en CSS commencent avec /* et se terminent par */.

Vous pouvez utiliser les commentaires pour ajouter vos remarques dans la feuille de style, mais aussi pour mettre en commentaire temporairement certaines parties à des fins de tests.

Pour mettre en commentaire une partie de feuille de style, placez les marques de commentaire de part et d'autre de celle-ci afin que le navigateur l'ignore. Veillez à commencer et à terminer le commentaire à des endroits appropriés, le reste de la feuille de style doit conserver une syntaxe correcte.

Exemple
/* style pour la lettre C initiale dans le premier paragraphe */
.carotte {
  color:            orange;
  text-decoration:  underline;
  font-style:       italic;
  }

Sélecteurs groupés

Lorsque beaucoup d'éléments ont le même style, vous pouvez spécifier un groupe de sélecteurs en les séparant par des virgules. La déclaration s'applique à chacun des éléments sélectionnés.

Ailleurs dans votre feuille de style, vous pouvez spécifier à nouveau les mêmes sélecteurs individuellement, pour leur appliquer des règles de style uniques.

Exemple
Cette règle rend les éléments H1, H2 et H3 de la même couleur.

Il est pratique de sp√©cifier la couleur en un seul endroit, au cas o√Ļ celle-ci doit √™tre chang√©e par la suite.

/* couleur pour les titres */
h1, h2, h3 {color: navy;}

Action : ajout de commentaires et am√©lioration de la mise en page

√Čditez votre fichier CSS, et assurez-vous qu'il comporte les r√®gles suivantes (dans n'importe quel ordre) :

strong {color: red;}
.carotte {color: orange;}
.epinard {color: green;}
#premier {font-style: italic;}
p {color: blue;}

Rendez-le plus lisible en le r√©arrangeant d'une mani√®re que vous trouvez logique, et en ajoutant des blancs et des commentaires o√Ļ vous les trouvez appropri√©s.

Enregistrez le fichier et actualisez l'affichage de votre navigateur pour v√©rifier que vos changements n'ont pas affect√© le fonctionnement de la feuille de style :

Cascading Style Sheets
Cascading Style Sheets

 

Challenge
Mettez en commentaire une partie de votre feuille de style, sans rien changer d'autre, afin de rendre la toute premi√®re lettre de votre document rouge :
Cascading Style Sheets
Cascading Style Sheets

(Il existe plusieurs manières de faire.)

 

Pour continuer

Votre feuille de style d'exemple mettait du texte en italique et soulign√©. La page suivante d√©taillera d'autres mani√®res de sp√©cifier l'apparence du texte dans votre document : Styles de texte