Moderne CSS

Drie dingen die je stylesheet leesbaar houden nu ze lang begint te worden.

Logical properties

In les 4 gebruikte je al margin-inline en padding-inline voor je container. Hier is waarom die bestaan.

Een opdracht: zet 1rem marge aan het begin van de zin.

margin-left: 1rem;

Dat klopt zolang de tekst van links naar rechts loopt. In het Arabisch en het Hebreeuws loopt ze van rechts naar links, en dan staat je marge aan het einde.

margin-inline-start: 1rem;

Deze versie redeneert vanaf het begin en het einde van de leesrichting, en volgt dus het dir attribuut van je document.

📖 inline volgt de leesrichting, block staat daar loodrecht op.

Van zowat elke richting bestaat een logische variant:

Fysiek	Logisch
margin-left, margin-right	margin-inline-start, margin-inline-end
margin-top, margin-bottom	margin-block-start, margin-block-end
padding-left en -right samen	padding-inline
width	inline-size
height	block-size
top, left bij positioning	inset-block-start, inset-inline-start

⚠️ Vanaf nu

Gebruik de logische varianten. In je labo's wordt erop gelet.

💡 Meer in CSS logical properties and values.

Custom properties

Je herhaalt dezelfde kleur op tien plaatsen in je stylesheet. Wil je ze aanpassen, dan moet je ze tien keer zoeken.

Een custom property is een waarde die je één keer bewaart onder een eigen naam.

💡 In de volksmond

een variabele

:root {
    --primary: oklch(0.45 0.18 264);
    --bg: oklch(0.99 0.003 325);
    --line-height: 1.6;
}

De naam begint altijd met twee streepjes. Je gebruikt hem met var():

body {
    background-color: var(--bg);
    color: var(--primary);
}

Scope en overerving

Een custom property geldt voor het element waar je hem zet, en voor alle kinderen, kleinkinderen en verder. Zet je hem op :root, dan geldt hij voor je hele document.

Je kan hem lager overschrijven:

:root {
    --primary: oklch(0.45 0.18 264);
}

footer {
    --primary: oklch(0.9 0.05 264);
}

Alles in de footer gebruikt vanaf dan de lichtere kleur, zonder dat je één var() hoeft aan te passen.

Fallback

var() neemt een tweede waarde mee voor het geval de eerste niet bestaat:

color: var(--accent, oklch(0.5 0 0));

Je startbestand

Zet je kleuren en je line-height vanaf nu in :root als custom properties.
Je startbestand groeit daarmee mee.

Nesting

Regels die bij elkaar horen stonden tot nu los van elkaar:

.parent { }
.parent .child { }

Je mag ze nu in elkaar schrijven:

.parent {
    .child { }
}

De combinators uit les 4 werken gewoon mee:

.parent {
    + .sibling { }
    > .direct-child { }
    descendant { }
}

Voor een combined selector gebruik je &, dat naar het huidige element verwijst:

/* zonder nesting */
/* de elementen met class parent EN class active, géén spatie */
.parent.active { }

/* met nesting */
.parent {
    /* leest als: .parent&.active, géén spatie */
    &.active { }
}

Een voorbeeld

Vier losse regels:

ul.square {
    margin: 0;
}

ul.square li {
    list-style-type: square;
}

ul.square li > a {
    color: var(--accent);
}

ul.square li > a.active {
    color: var(--primary);
}

Dezelfde regels, genest:

ul.square {
    margin: 0;

    li {
        list-style-type: square;

        > a {
            color: var(--accent);

            &.active {
                color: var(--primary);
            }
        }
    }
}

Oefening

Herschrijf de vier regels met nesting. Het resultaat op de pagina moet precies hetzelfde blijven.

Nest niet te diep

Drie niveaus is veel. Hoe dieper je nest, hoe hoger je specificity en hoe moeilijker het wordt om de regel later te overschrijven. Zie specificity.