CSS, ou Feuilles de style en cascade, sont la méthode acceptée par l'industrie de la conception Web pour ajouter des styles visuels à un site. Avec CSS, vous pouvez contrôler la mise en page, les couleurs, typographie, image de fond et bien plus encore. Fondamentalement, s'il s'agit d'un style visuel, alors CSS est le moyen d'apporter ces styles à votre site Web.
Au fur et à mesure que vous ajoutez des styles CSS à un document, vous remarquerez peut-être que le document commence à devenir de plus en plus long. Même un petit site avec seulement une poignée de pages peut se retrouver avec un fichier CSS volumineux - et un très grand site avec beaucoup, beaucoup de pages de contenu unique peut avoir de très gros fichiers CSS. Ceci est aggravé par sites réactifs qui ont beaucoup de requêtes multimédias inclus dans les feuilles de style pour modifier l'apparence des visuels et la présentation de la page pour différents écrans.
Oui, les fichiers CSS peuvent être longs. Ce n'est pas un problème majeur lorsqu'il s'agit de
performances du site et vitesse de téléchargement, car même un long fichier CSS est susceptible d'être assez petit (puisqu'il ne s'agit en réalité que d'un document texte). Pourtant, chaque petit geste compte en ce qui concerne 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 s'avérer 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 de la clarté - pas du 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.rouge { couleur: rouge; }
div#firstred { couleur: rouge; }
Avec cette syntaxe, vous dites que vous voulez e Mots clés, td les balises, les balises de paragraphe avec la classe rouge et la balise div avec l'ID firstred toutes pour avoir la couleur de style rouge.
C'est un CSS parfaitement acceptable, mais il y a deux inconvénients importants à l'écrire de cette façon:
- À l'avenir, si vous décidez de modifier le couleur de la police de ces propriétés au bleu, vous devez effectuer ce changement quatre fois dans votre feuille de style.
- Il ajoute beaucoup de caractères supplémentaires à votre feuille de style dont vous n'avez pas besoin. Ces 4 styles peuvent ne pas sembler exagérés, mais si vous continuez à le faire sur l'ensemble de votre feuille de style, les lignes s'additionneront et cette feuille sera beaucoup, beaucoup plus grande qu'elle ne devrait l'être.
Pour éviter ces inconvénients et rationaliser votre fichier CSS, nous allons essayer d'utiliser des virgules.
Utiliser des virgules pour séparer les sélecteurs
Au lieu d'écrire 4 sélecteurs CSS séparés et 4 règles, vous pouvez combiner tous ces styles dans une propriété de règle en séparant les sélecteurs individuels par une virgule. Voici comment cela se ferait:
th, td, p.red, div#firstred { couleur: rouge; }
Le caractère virgule agit essentiellement comme le mot "ou" à l'intérieur du sélecteur. Cela s'applique donc à e balises OU td balises OU balises de paragraphe avec la classe rouge OU 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, elle nous permet d'avoir plusieurs sélecteurs dans une seule règle.
Non seulement cette approche permet de créer des fichiers CSS plus légers et plus propres, mais elle facilite également les futures mises à jour. Maintenant, si vous vouliez changer la couleur du rouge au bleu, vous n'avez qu'à faire le changement à un endroit au lieu des 4 règles de style d'origine 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 à long terme!
Variation de syntaxe
Certaines personnes choisissent de rendre le 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 se ferait:
e,
td,
p.rouge,
div#firstred
{
La couleur rouge;
}
Notez que vous placez une virgule après chaque sélecteur, puis utilisez "enter" pour séparer le sélecteur suivant sur sa propre ligne. Vous n'ajoutez PAS de virgule après le sélecteur final.
En utilisant des virgules entre vos sélecteurs, vous créez un feuille de style compacte c'est plus facile à mettre à jour à l'avenir et c'est plus facile à lire aujourd'hui!