Mina best practices – CSS
1. Förord
CSS är i dag underutnyttjat. Det finns en klyfta mellan Angular/React/Vue/...-utvecklare och UI-designer.
UI-designern nästlar trettio <div> med fyrtio CSS-klasser på, medan Angular-utvecklaren varannan vecka hetsar upp sig över det senaste biblioteket – samtidigt som hans dependency
hell sedan länge inte bygger utan npm i --force, eftersom peer-beroendena krockar. CSS och HTML bryr sig TypeScript-fanatikern inte mycket om. För de enklaste inputfälten
måste han använda Material, eftersom han är rädd att han annars inte får till valideringen. Och tid vill man absolut inte förlora genom att uppfinna hjulet på nytt. Att man sedan, vid det första
kravet som biblioteket inte täcker, förlorar all den tiden igen och sitter och läser bibliotekets GitHub-issues – det inser han inte.
Som utvecklare i ett fullstackprojekt får man sällan chansen att leva ut sina kunskaper som frontenddesigner. Man får skärmskisserna i Figma och ska bygga dem exakt så. De flesta frontendutvecklare av det här slaget vet inte ens att man kan få till en responsiv layout med en enda rad CSS. CSS är kraftfullare än någonsin. Borta är tiden med JS-stilhack, otaliga media queries och workarounds för IE 8. Hurra!
2. Supercentrerat
Det gick inte alltid hem på anställningsintervjuer, men jag älskade det: På frågan om jag var bra på frontend svarade jag gärna ”Åh ja. Jag kan centrera en <div> vertikalt.”
Det är ökänt svårt att centrera en div.
Inte längre:
.parent {
display: grid;
place-items: center
}3. Responsivt grid
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}4. Responsiv flexbox
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
flex: 1 1 150px; /* Stretching: */
flex: 0 1 150px; /* No stretching: */
margin: 5px;
}5. Sidlayout
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}6. Sidofält
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}