Mijn best practices – CSS

1. Voorwoord

CSS wordt tegenwoordig onderbenut. Er gaapt een kloof tussen Angular-/React-/Vue-/...-ontwikkelaars en UI-designers.

De UI-designer nest dertig <div>-elementen en hangt er veertig CSS-klassen aan, terwijl de Angular-dev om de twee weken helemaal lyrisch wordt van de nieuwste lib, ook al bouwt zijn dependency hell allang niet meer zonder npm i --force, omdat de peer dependencies met elkaar in conflict zijn. CSS en HTML interesseren de TypeScript-fanaat weinig. Voor de eenvoudigste inputs moet hij Material gebruiken, want hij is bang dat hij de validatie anders niet voor elkaar krijgt. En tijd verliezen door het wiel opnieuw uit te vinden wil hij al helemaal niet. Dat hij bij de eerste eis die de library niet afdekt al die tijd weer kwijt is en zich terugvindt tussen de GitHub-issues van die lib, ziet hij niet.

Als ontwikkelaar in een fullstackproject krijg je zelden de kans om je kennis als frontenddesigner echt te benutten. Je krijgt de schermontwerpen in Figma en moet ze precies zo bouwen. De meeste frontendontwikkelaars van dit type beseffen niet eens dat je met één regel CSS al een responsive layout voor elkaar krijgt. CSS is krachtiger dan ooit. Voorbij zijn de tijden van JS-stijlhacks, talloze media queries en workarounds voor IE 8. Hoera!

2. Perfect gecentreerd

Viel niet altijd goed tijdens sollicitatiegesprekken, maar ik vond het geweldig: op de vraag of ik goed ben in frontend antwoordde ik graag met “O ja. Ik kan een <div> verticaal centreren.”

Het is berucht lastig om een div te centreren.

Nu niet meer:

.parent {
    display: grid;
    place-items: center
}

3. Responsive grid

.parent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

4. Responsive flex

.parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.box {
    flex: 1 1 150px; /*  Stretching: */
    flex: 0 1 150px; /*  No stretching: */
    margin: 5px;
}

5. Paginalayout

.parent {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

6. Zijbalk

.parent {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
}

7. Bronnen

1-Line Layouts