CSS, of Cascading Style Sheets, is de geaccepteerde manier om visuele stijlen aan een site toe te voegen. Met CSS kunt u de paginalay-out, kleuren, typografie, achtergrondafbeelding en nog veel meer beheren. Kortom, als het een visuele stijl is, dan is CSS de manier om die stijlen naar je website te brengen.
Wanneer u CSS-stijlen aan een document toevoegt, merkt u mogelijk dat het document steeds langer wordt. Zelfs een kleine site met slechts een handvol pagina's kan eindigen met een aanzienlijk CSS-bestand - en een zeer grote site met heel veel pagina's met unieke inhoud kan zeer grote CSS-bestanden bevatten. Dit wordt nog verergerd door responsieve sites die veel mediaquery's hebben opgenomen in de stijlbladen om te veranderen hoe de beelden er uitzien en de pagina legt uit voor verschillende schermen.
Ja, CSS-bestanden kunnen lang duren. Dit is geen groot probleem als het gaat om de prestaties van de site en de downloadsnelheid, omdat zelfs een lang CSS-bestand waarschijnlijk vrij klein is (omdat het eigenlijk alleen maar een tekstdocument is). Toch telt elk klein beetje als het gaat om paginasnelheid, dus als u uw stylesheet slanker kunt maken, is dat een goed idee. Dit is waar de "komma" erg handig kan zijn in uw stylesheet!
Komma's en CSS
Je hebt je misschien afgevraagd welke rol de komma speelt in CSS-selectorsyntaxis. Net als in zinnen, brengt de komma duidelijkheid - geen code - naar de scheidingstekens. De komma in een CSS-selector scheidt meerdere selectors binnen dezelfde stijlen.
Laten we bijvoorbeeld eens naar een aantal CSS kijken.
th {kleur: rood; }td {kleur: rood; }p.red {kleur: rood; }div # firstred {color: red; }
Met deze syntaxis zegt u dat u wilt th markeringen, td tags, alineatags met de klasse rood en de div-tag met de ID als eerste alle om de stijlkleur rood te hebben.
Dit is perfect acceptabele CSS, maar er zijn twee belangrijke nadelen aan het schrijven op deze manier:
- Als u in de toekomst besluit de letterkleur van deze eigenschappen in blauw te veranderen, moet u die wijziging vier keer in uw stylesheet aanbrengen.
- Het voegt veel extra tekens toe aan je stylesheet die je niet nodig hebt. Deze 4 stijlen lijken misschien niet overdreven, maar als je dit blijft doen in je hele stylesheet, zullen de regels optellen en dat blad zal veel, veel groter zijn dan het zou moeten zijn.
Om deze nadelen te vermijden en om uw CSS-bestand te stroomlijnen, zullen we proberen komma's te gebruiken.
Gebruiken van komma's om selecteurs te scheiden
In plaats van vier afzonderlijke CSS-kiezers en vier regels te schrijven, kunt u al deze stijlen combineren tot één regeleigenschap door de afzonderlijke selectors te scheiden met een komma. Hier is hoe dat zou worden gedaan:
th, td, p.red, div # firstred {color: red; }
Het komma-teken fungeert in principe als het woord "en" in de selector. Dus dit is van toepassing op th tags ANDtd tags EN alineatags met de klasse rood EN de div-tag met de ID als eerste. Dat is precies wat we eerder hadden, maar in plaats van 4 CSS-regels nodig te hebben, hebben we een enkele regel met meerdere selectors. Dit is wat de komma in de selector doet, het stelt ons in staat om meerdere selectors in één regel te hebben.
Deze aanpak zorgt niet alleen voor slankere, schonere CSS-bestanden, het maakt toekomstige updates ook zo veel gemakkelijker. Als je nu de kleur van rood naar blauw wilt veranderen, hoef je de wijziging maar op één locatie te maken in plaats van de oorspronkelijke 4 stijlregels die we hadden! Denk aan deze tijdwinst in een heel CSS-bestand en u kunt zien hoe u hiermee zowel tijd als ruimte bespaart in de lange run!
Syntaxisvariatie
Sommige mensen kiezen ervoor om de CSS leesbaarder te maken door elke selector op een eigen regel te scheiden, in plaats van alles op één regel te schrijven zoals hierboven. Dit is hoe dat zou gebeuren:
th,td,p.red,div # firstred{kleur rood;}
Merk op dat u na elke selector een komma plaatst en vervolgens "enter" gebruikt om de volgende selector op zijn eigen regel te breken. Je voegt GEEN komma toe na de laatste selector.
Door komma's te gebruiken tussen uw selectors, maakt u een compacter stijlblad dat in de toekomst gemakkelijker te updaten is en dat vandaag gemakkelijker te lezen is!
Origineel artikel door Jennifer Krynin. Bewerkt door Jeremy Girard op 8-08-17
