Met Cascading Style Sheets (CSS) kunt u het uiterlijk van een element definiëren door in te loggen op de kenmerken die u op dat element toepast. Deze kenmerken kunnen een ID en een klasse zijn en, net als alle kenmerken, voegen ze nuttige informatie toe aan de elementen waaraan ze zijn gekoppeld.
Afhankelijk van welk attribuut u aan een element toevoegt, kunt u een CSS-selector schrijven om de noodzakelijke visuele stijlen toe te passen die nodig zijn om het uiterlijk en het gevoel voor dat element en de website als geheel te bereiken.
Hoewel ID's of klassen werken met CSS-regels, geven moderne webontwerpmethoden de voorkeur aan klassen boven ID's, deels omdat ze minder specifiek zijn en gemakkelijker in het algemeen werken. Ja, u zult nog steeds veel sites vinden die ID's gebruiken, maar deze kenmerken worden spaarzamer toegepast dan in het verleden, terwijl klassen moderne webpagina's hebben overgenomen.
Enkele of meerdere klassen in CSS?
In de meeste gevallen zou u een enkel klassenattribuut aan een element toewijzen, maar u bent niet beperkt tot slechts één klasse zoals u bent met ID's. Hoewel een element slechts één ID-kenmerk kan hebben, kunt u absoluut een element meerdere klassen geven en in sommige gevallen zal het maken van uw pagina gemakkelijker te stylen en veel flexibeler zijn!
Als u meerdere klassen aan een element moet toewijzen, kunt u de aanvullende klassen toevoegen en deze eenvoudig van elkaar scheiden met een spatie in uw kenmerk.
Deze paragraaf heeft bijvoorbeeld drie klassen:
Dit zou de tekst van de alinea zijn
Dit stelt de volgende drie klassen in op de alinea-tag:
- Pullquote
- Uitgelicht
- Links
Let op de spaties tussen elk van deze klassewaarden. Die ruimtes is wat ze opstelt als verschillende, individuele klassen. Dit is ook de reden waarom klassamen geen spaties in zich kunnen hebben, omdat ze daarmee als afzonderlijke klassen worden ingesteld. Als u bijvoorbeeld 'pullquote-featured-left' zonder spatie hebt gebruikt, is dit één klassenwaarde, maar het bovenstaande voorbeeld, waarin deze drie woorden van elkaar worden gescheiden door een spatie, stelt ze in als afzonderlijke waarden. Het is belangrijk om dit concept te begrijpen terwijl u beslist welke klassenwaarden u op uw webpagina's wilt gebruiken.
Zodra u uw klassenwaarden in HTML hebt, kunt u deze als klassen in uw CSS toewijzen en de stijlen toepassen die u zou willen toevoegen. Bijvoorbeeld.
.pullquote {…}.featured {…}p.left {…}
In deze voorbeelden bevinden de CSS-declaraties en -waardenparen zich binnen de accolades, en zo zouden die stijlen op de juiste selector worden toegepast.
Als u een klasse instelt op een specifiek element (bijvoorbeeldp.left), je kunt het nog steeds gebruiken als onderdeel van een lijst met klassen; Houd er echter rekening mee dat dit alleen van invloed is op de elementen die in de CSS zijn opgegeven. Met andere woorden, de p.left stijl is alleen van toepassing op alinea's met deze klasse, omdat uw selector eigenlijk zegt om het toe te passen op "alinea's met een klassenwaarde van 'links'". Daarentegen specificeren de andere twee selectors in het voorbeeld geen bepaald element, dus zouden ze van toepassing zijn op elk element dat die klassenwaarden gebruikt.
Voordelen van meerdere klassen
Meerdere klassen kunnen het gemakkelijker maken om speciale effecten aan elementen toe te voegen zonder een geheel nieuwe stijl voor dat element te hoeven maken.
U wilt bijvoorbeeld de mogelijkheid hebben om elementen snel naar links of rechts te zweven. Je zou twee klassen kunnen schrijven
links en
rechts met slechts
float: left; en
float: right; in hen. Als je dan een element hebt dat je naar links moet zweven, voeg je de klasse 'links' toe aan de klassenlijst.
Er is echter een fijne lijn om hier te lopen. Bedenk dat webstandaarden de scheiding van stijl en structuur dicteren. Structuur wordt afgehandeld via HTML, terwijl stijl zich in CSS bevindt. Als uw HTML-document is gevuld met elementen die allemaal klassennamen hebben zoals "rood" of "links", wat namen zijn die dicteren hoe elementen eruit moeten zien in plaats van wat ze zijn, kruist u die lijn tussen structuur en stijl. Ik probeer mijn niet-semantische klassennamen om deze reden zo veel mogelijk te beperken.
Meerdere klassen, semantiek en JavaScript
Een ander voordeel van het gebruik van meerdere klassen is dat het u veel meer interactiviteitsmogelijkheden biedt.
U kunt nieuwe klassen toepassen op bestaande elementen met JavaScript zonder een van de eerste klassen te verwijderen. U kunt ook klassen gebruiken om de semantiek van een element te definiëren. Dit betekent dat u extra klassen kunt toevoegen om te definiëren wat dat element semantisch betekent. Dit is hoe Microformats werkt.
Nadelen van meerdere klassen
Het grootste nadeel van het gebruik van meerdere klassen voor uw elementen is dat het ze een beetje onhandig maakt om te zien en te beheren in de loop van de tijd. Het kan moeilijk worden om te bepalen welke stijlen een element beïnvloeden en of er scripts een effect op hebben. Veel van de frameworks die vandaag beschikbaar zijn, zoals Bootstrap, maken veelvuldig gebruik van elementen met meerdere klassen. Die code kan snel uit de hand lopen en is moeilijk om mee te werken als je niet voorzichtig bent.
Wanneer u meerdere klassen gebruikt, loopt u ook het risico dat de stijl voor één klasse de stijl van een ander overschrijft, zelfs als u dit niet van plan was. Dit maakt het dan moeilijk om erachter te komen waarom je stijlen niet worden toegepast, zelfs als het lijkt dat ze dat zouden moeten doen. Je moet op de hoogte zijn van specificiteit, zelfs met de attributen die op dat ene element zijn toegepast!
Door een tool als de Webmasterhulpprogramma's in Google Chrome te gebruiken, kunt u gemakkelijker zien hoe uw klassen uw stijlen beïnvloeden en dit probleem van conflicterende stijlen en kenmerken vermijden.
