CSS, of Trapsgewijze stijlbladen, zijn de geaccepteerde manier van de webdesign-industrie om visuele stijlen aan een site toe te voegen. Met CSS kunt u de paginalay-out, kleuren, typografie, achtergrondafbeelding en nog veel meer. Kortom, als het een visuele stijl is, dan is CSS de manier om die stijlen naar uw website te brengen.
Als u CSS-stijlen aan een document toevoegt, merkt u misschien dat het document steeds langer begint te worden. Zelfs een kleine site met slechts een handvol pagina's kan eindigen met een omvangrijk CSS-bestand - en een zeer grote site met heel veel pagina's met unieke inhoud kan zeer grote CSS-bestanden hebben. Dit wordt verergerd door responsieve sites die veel hebben mediaquery's opgenomen in de stylesheets om te veranderen hoe de visuals eruitzien en hoe de pagina eruitziet voor verschillende schermen.
Ja, CSS-bestanden kunnen lang worden. Dit is geen groot probleem als het gaat om siteprestaties en downloadsnelheid, omdat zelfs een lang CSS-bestand waarschijnlijk vrij klein is (omdat het eigenlijk gewoon een tekstdocument is). Toch telt elk klein beetje als het gaat om paginasnelheid, dus als je je stylesheet slanker kunt maken, is dat een goed idee. Dit is waar de "komma" erg handig kan zijn in je stylesheet!
Komma's en CSS
Je hebt je misschien afgevraagd welke rol de komma speelt in de syntaxis van de CSS-selector. Net als in zinnen, brengt de komma duidelijkheid - geen code - voor de scheidingstekens. De komma in a CSS-kiezer scheidt meerdere selectors binnen dezelfde stijlen.
Laten we bijvoorbeeld eens kijken naar wat CSS hieronder.
de { kleur: rood; }
td { kleur: rood; }
p.rood { kleur: rood; }
div#firstred { kleur: rood; }
Met deze syntaxis zeg je dat je wilt dit labels, td tags, alineatags met de klasse rood en de div-tag met de ID eerstrood hebben allemaal de stijlkleur rood.
Dit is volkomen acceptabele CSS, maar er zijn twee belangrijke nadelen aan het op deze manier schrijven:
- Als u in de toekomst besluit om de letterkleur van deze eigenschappen naar blauw, moet je die wijziging vier keer doorvoeren in je stylesheet.
- Het voegt veel extra karakters toe aan je stylesheet die je niet nodig hebt. Deze 4 stijlen lijken misschien niet overdreven, maar als je dit over je hele stijlblad blijft doen, zullen de lijnen 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.
Komma's gebruiken om kiezers te scheiden
In plaats van 4 afzonderlijke CSS-selectors en 4 regels te schrijven, kunt u: combineren al deze stijlen in één regeleigenschap door de afzonderlijke selectors te scheiden met een komma. Hier is hoe dat zou gebeuren:
th, td, p.red, div#firstred { kleur: rood; }
De komma fungeert in feite als het woord "of" in de selector. Dit is dus van toepassing op dit tags OF td tags OF alinea-tags met de klasse rood OF de div-tag met de ID firstred. 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 doet in de selector, 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 u nu de kleur van rood naar blauw wilt veranderen, hoeft u de wijziging slechts op één locatie aan te brengen in plaats van de oorspronkelijke 4 stijlregels die we hadden! Denk eens na over deze tijdbesparing voor een heel CSS-bestand en u zult zien hoe dit u op de lange termijn zowel tijd als ruimte zal besparen!
Syntaxisvariatie
Sommige mensen kiezen ervoor om de CSS leesbaarder te maken door elke selector op zijn eigen regel te scheiden, in plaats van alles op één regel te schrijven zoals hierboven. Dit is hoe dat zou gebeuren:
de,
td,
p.red,
div#firstred
{
kleur rood;
}
Merk op dat u een komma achter elke selector plaatst en vervolgens "enter" gebruikt om de volgende selector op zijn eigen regel te splitsen. U voegt GEEN komma toe na de laatste selector.
Door komma's tussen uw selectors te gebruiken, creëert u een meer compact stylesheet dat is gemakkelijker te updaten in de toekomst en dat is vandaag gemakkelijker te lezen!