Les CSS, ou feuilles de style en cascade, constituent le moyen reconnu par l'industrie de la conception Web d'ajouter des styles visuels à un site. Avec CSS, vous pouvez contrôler la mise en page, les couleurs, la typographie, l'image d'arrière-plan et bien plus encore. Fondamentalement, s’il s’agit d’un style visuel, le CSS est le moyen d’intégrer ces styles à votre site Web.
Lorsque vous ajoutez des styles CSS à un document, vous remarquerez peut-être que le document commence à s'allonger. Même un petit site avec seulement quelques pages peut se retrouver avec un fichier CSS assez volumineux - et un très grand site avec beaucoup, beaucoup de pages de contenu unique peut avoir de très gros fichiers CSS. À cela s’ajoute le fait que les sites Web réactifs contiennent de nombreuses requêtes multimédia incluses dans les feuilles de style afin de modifier l’aspect des éléments visuels et la présentation de la page sur différents écrans.
Oui, les fichiers CSS peuvent être longs. Ce n'est pas un problème majeur en ce qui concerne les performances du site et la vitesse de téléchargement, car même un long fichier CSS risque d'être assez petit (puisqu'il ne s'agit en réalité que d'un document texte). Néanmoins, chaque petit geste compte pour la vitesse de la page, donc si vous pouvez alléger votre feuille de style, c'est une bonne idée. C'est là que la "virgule" peut être très utile dans votre feuille de style!
Virgules et CSS
Vous vous êtes peut-être demandé quel rôle la virgule joue dans la syntaxe du sélecteur CSS. Comme dans les phrases, la virgule apporte plus de clarté - pas de code - aux séparateurs. La virgule dans un sélecteur CSS sépare plusieurs sélecteurs dans les mêmes styles.
Par exemple, regardons quelques CSS ci-dessous.
th {couleur: rouge; }td {couleur: rouge; }p.red {couleur: rouge; }div # firstred {couleur: rouge; }
Avec cette syntaxe, vous dites que vous voulez th Mots clés, td les balises, les balises de paragraphe avec la classe red, et la balise div avec le ID ID, le tout ayant la couleur de style rouge.
C'est parfaitement acceptable CSS, mais il y a deux inconvénients importants à l'écrire de cette façon:
- À l'avenir, si vous décidez de changer la couleur de police de ces propriétés en bleu, vous devez effectuer ce changement quatre fois dans votre feuille de style.
- Il ajoute à votre feuille de style de nombreux caractères supplémentaires dont vous n’avez pas besoin. Ces 4 styles peuvent ne pas sembler excessifs, mais si vous continuez de le faire sur l’ensemble de votre feuille de style, les lignes s’additionneront et cette feuille sera bien plus grande qu’elle n’aurait dû l'être.
Pour éviter ces inconvénients et rationaliser votre fichier CSS, nous allons essayer d'utiliser des virgules.
Utilisation de virgules pour séparer les sélecteurs
Au lieu d'écrire 4 sélecteurs CSS distincts et 4 règles, vous pouvez combiner tous ces styles en une propriété de règle en séparant les sélecteurs individuels par une virgule. Voici comment cela serait fait:
th, td, p.red, div # firstred {couleur: rouge; }
La virgule agit essentiellement comme le mot "et" dans le sélecteur. Donc, cela s'applique à th balises ETtd balises ET balises de paragraphe avec la classe rouge ET la balise div avec l'ID firstred. C’est exactement ce que nous avions auparavant, mais au lieu d’avoir besoin de 4 règles CSS, nous avons une seule règle avec plusieurs sélecteurs. C'est ce que fait la virgule dans le sélecteur, cela nous permet d'avoir plusieurs sélecteurs dans une règle.
Cette approche rend non seulement les fichiers CSS plus légers et plus propres, mais facilite également les futures mises à jour. Maintenant, si vous voulez changer la couleur du rouge au bleu, il vous suffit de faire le changement dans un seul endroit plutôt que dans les 4 règles de style originales que nous avions! Pensez à ces gains de temps sur l’ensemble d’un fichier CSS et vous verrez comment cela vous fera gagner du temps et de l’espace dans le long terme!
Variation de syntaxe
Certaines personnes choisissent de rendre le code CSS plus lisible en séparant chaque sélecteur sur sa propre ligne, au lieu de tout écrire sur une seule ligne comme ci-dessus. Voici comment cela serait fait:
etd,p.red,div # firstred{La couleur rouge;}
Notez que vous placez une virgule après chaque sélecteur, puis utilisez "enter" pour placer le sélecteur suivant sur sa propre ligne. Vous n’ajoutez PAS de virgule après le dernier sélecteur.
En utilisant des virgules entre vos sélecteurs, vous créez une feuille de style plus compacte, facile à mettre à jour dans le futur et plus facile à lire aujourd'hui!
Article original de Jennifer Krynin. Édité par Jeremy Girard le 08/05/17
