Je hebt na de Sprint Planning in Figma een styleguide gemaakt en een gezamenlijke stylesheet met de huisstijl van de opdrachtgever.
Vandaag ga je leren hoe je een gestructureerd CSS file kan maken met classes en Custom Properties.
Eerst ga je analyseren wat voor CSS strategie grote websites gebruiken. Daarna ga je met behulp van Custom Properties jullie gezamenlijke stylesheet structuren. Tot slot ga je het gezamenlijke stylesheet inladen en leren hoe je de styles kan toepassen op je project.
Naarmate er meer CSS in je project komt, bijvoorbeeld als je gaat samenwerken aan een project, wordt het steeds belangrijker om een CSS strategie (met elkaar) te bepalen.
Onderzoek op 3 verschillende websites hoe CSS is toegepast voor een h2 en button element.
Met behulp van de Devtools kun je onderzoeken wat de CSS strategie van een website is.
- Welke element-selectoren en class-selectoren zijn gebruikt?
- Welke properties staan er in welke selectoren?
- Wat valt op aan de naamgeving van classes en eventuele custom properties?
Met Custom Properties kun je zelf een CSS property bedenken, daar een value in bewaren, en die op meerdere plekken gebruiken. Hiermee zorg je voor DRY code, wat de code beter leesbaar, makkelijker onderhoudbaar en sneller maakt. Dit is fijn voor de developers én de gebruikers.
.card {
--spacing: 1.2rem;
padding: var(--spacing);
margin: var(--spacing);
}Sterker nog, je kunt de waardes dynamisch aanpassen, en op die manier slimme styling schrijven, zoals:
.button {
--lightness: 30%;
background: hsl(200 100% var(--lightness));
&:hover, &:focus {
--lightness: 25%;
}
}Veel tutorials gebruiken de :root selector (het hoogste element in de DOM; het <html> element bij een webpagina, het <svg> element bij een SVG bestand) om custom properties op te zetten. Door inheritance in CSS zijn die properties in de hele onderliggende DOM bekend, maar custom properties zijn dus veel krachtiger dan alleen 'globale variabelen'. Je kunt hiermee snel verschillende stijlen voor bijvoorbeeld een knop maken:
.button {
--hue: 200;
--lightness: 30%;
background: hsl(var(--hue) 100% var(--lightness));
color: #fff;
&:hover, &:focus {
--lightness: 25%;
}
&:active {
--lightness: 20%;
}
}
.button-ok {
--hue: 100;
}
.button-cancel {
--hue: 20;
}Waarmee je bijvoorbeeld dit soort HTML kunt schrijven:
<button class="button">Knop</button>
<button class="button button-ok">OK</button>
<button class="button button-cancel">Annuleren</button>Jullie hebben een gezamenlijke stylesheet gemaakt met de styling voor de kleuren, typografie en formulier elementen.
Bekijk welke elementen in de gezamenlijke stylesheet geschreven kunnen worden met custom properties. Denk bijvoorbeeld aan kleuren, font-sizes, borders, breedtes en/of hoogtes van elementen. Als waardes vaker voorkomen, kun je custom properties gebruiken.
Bespreek met een mentor de custom properties, classnames en code conventies die jullie hebben toegepast. Schets het 'ontwerp' van jullie stylesheet op het whiteboard en noteer zo nodig aanpassingen over bijvoorbeeld classnames en code conventies.
Als je al ervaring hebt met custom properties kun je proberen een Light & Dark mode te maken. Een Light & Dark mode op de website helpt gebruikers om de website beter te kunnen bekijken in verschillende omstandigheden.
Implementeer een Dark Theme met custom properties die werkt op basis van de voorkeuren van de gebruiker. Custom properties kunnen hierbij helpen om onnodige herhaling van bijvoorbeeld CSS values voor kleuren te voorkomen.
Gebruik het artikel Dark Mode in CSS.
Voor nog meer tips en tricks kun je het artikel Dark Mode in 3 Lines of CSS and Other Adventures lezen.
Nu je met je team een gezamenlijke stylesheet hebt gemaakt, kan je deze gebruiken in jouw eigen project.
Voeg deze toe aan de <head> van je html document.
Dan heb je dus twee CSS files gelinkt, dat ziet er dan zo uit.
<link rel="stylesheet" href="url-gezamenlijke-stylesheet.css">
<link rel="stylesheet" href="style.css">Maar welke styling wordt nu uitgevoerd als je classes gebruikt uit de huisstijl en uit je eigen stylesheet?
<h2 class="heading-red green">Welke kleur krijgt deze heading?<h2>Voor het uitvoeren van CSS gebruikt de browser de CSS principes Cascade, Specificity, en Inheritance. De Cascade betekent dat de volgorde van de CSS bepalend is voor welke style wordt uitgevoerd. Specificity betekent dat een browser bepaalt welke styling het meest belangrijk is. Inheritance betekent dat (sommige) styles worden doorgegeven van parent aan geneste-elementen.
"Cascade" betekent letterlijk "waterval".
Hiermee wordt bedoeld dat, als er meerdere stijlen van toepassing zijn op een element, de volgorde bepaalt hoe styles worden toegepast.
Het idee is dat stijlen in een bepaalde volgorde "vallen", en dat bepaalt welke stijl het laatste is en dus wordt uitgevoerd.
Browsers berekenen welke style het belangrijkst is en wordt uitgevoerd.
Een element selector is het minst specifiek en krijgt een weight van 0 0 0 1.
Een class selector krijgt 0 0 1 0.
Een ID selector krijgt 0 1 0 0.
En een inline-style krijgt een weight van 1 0 0 0, die style krijgt dus voorang op de id-, class- en element-selectors.
Browsers berekenen welke styling belangrijk is. Hoe specifieker de styling hoe hoger de specificity. Bron Specifics on CSS Specificity
Hoe kan je de specificity uitrekenen? Stel je hebt deze HTML:
<ul id="web-technologies">
<li>HTML</li>
<li class="favorite">CSS</li>
<li>JS</li>
</ul>De <li> items zijn zwart door deze gecombineerde element en id selector:
ul#web-technologies li {
font-weight: normal;
font-size: 12px;
color: black;
}Nu wil je een <li> een andere kleur geven met de class favorite.
Wordt de kleur nu rood?
.favorite {
color: red;
font-weight: bold;
}De <li> blijft zwart want de selector ul#web-technologies li is specifieker dan de class selector .favorite.
De weight van de class selector is 0 0 1 0, de weight van de gecombineerde selector is 0 1 0 2. 10 < 102 ...
Voor deze opdracht ga je spelen met de CSS principes Cascade en Specificity om te leren hoe dat werkt. Je gaat 4 experimenten doen. Beantwoord de bijhorende vragen in je Learning log en probeer uit te leggen wat er gebeurt.
Open je code editor en maak een blanco HTML pagina, noem het file specificity.html, en sla deze op in jouw i-love-web repo.
Maak een leeg CSS file, noem het specificity.css, sla het op in dezelfde map als het HTML file.
Voeg de gemeenschappelijke stylesheet toe in de <head> van het HTML file en daaronder het lege CSS file.
Dat ziet er dan zo uit in de HTML:
<link rel="stylesheet" href="url-gezamenlijke-stylesheet.css">
<link rel="stylesheet" href="specificity.css">Maak een <h2> element aan in het HTML file en geef het een bijhorende class uit de gezamenlijke stijlesheet. Maak nog een <h2> element aan zonder class. Nu staat er zoiets in het HTML file:
<h2 class="heading-medium">Ik ben een heading, welke kleur krijg ik?</h2>
<h2>Ik ben ook een heading, welke kleur krijg ik?</h2>Maak nu een element selector in specificity.css met een andere kleur dan in de huisstijl staat.
h2 {
color: purple;
}Wordt de heading nu paars? Of wordt de huisstijl uitgevoerd? Kan je bedenken waarom dit gebeurt?
Voeg nog een <h2> element toe met een class uit de gezamenlijke stijlesheet en voeg een tweede class toe.
<h2 class="heading-medium green">Ik ben een heading met twee classes</h2>Maak de class aan in specificity.css en geeft het een andere kleur.
.green {
color: green;
}Welke kleur krijgt de heading met twee classes? Krijgt het de kleur van de huisstijl of wordt de andere class uitgevoerd? Waarom krijgt de heading die kleur?
Voeg nu aan specificity.css een class toe met dezelfde naam als al in de gezamenlijke stylesheet staat.
Geef de class een andere kleur. Dat ziet er dan zo uit:
.heading-medium {
color: pink;
}Welke kleur hebben de headings nu? Probeer te beschrijving waarom de heading die kleur heeft?
Voeg nog een <h2> element toe met de class uit de gezamenlijke stijlesheet en voeg een ID toe
<h2 class="heading-medium test" id="heading">Ik ben een heading met een ID</h2>Maak een id selector in specificity.css met een andere kleur.
#heading {
color: yellow;
}Welke kleur krijgt de heading? De kleur van de id-selector of 'wint' de class uit de gezamenlijke stylesheet? Waarom is dat?
Als je meer wil leren over het principe Specificity van CSS kun je hier meer lezen: