Aan de slag

De start van elk CSS-bestand

Dit staat vanaf nu bovenaan elk CSS-bestand dat je schrijft.

/* 1. zodat width betekent wat je verwacht */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 2. font en kleur voor de hele site, via inheritance */
:root {
    font-family: "Jouw Font", sans-serif;
    color: oklch(0.25 0.01 325);
    background-color: oklch(0.99 0.003 325);
    line-height: 1.6;
}

/* 3. de browser zet hier standaard 8px, en dat wil je niet */
body {
    margin: 0;
}

/* 4. zodat je inhoud niet van rand tot rand loopt */
.container {
    max-width: 90rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

• regel 1 is de oplossing uit box sizing
• regel 2 werkt dankzij inheritance
• regel 3 is een margin, en marges ken je nu
• regel 4 is nieuw

En normalize staat in je HTML, niet hier, als eerste link-tag vóór je eigen stylesheet.

Best practices

Een paar vuistregels die je vanaf nu kan toepassen:

• gebruik zelden id-selectors. Je krijgt ze later niet meer overschreven. Een class doet in negen van de tien gevallen hetzelfde en is veel soepeler.
• gebruik de context in plaats van een class voor alles. nav li:first-child leest beter dan een class .first die je overal moet gaan plakken.
• maar hou je selectors kort. body header nav ul > li:first-child is zo specifiek dat je er later niets meer aan verandert. Twee of drie niveaus volstaat bijna altijd.