Le mie best practice – CSS

1. Premessa

Oggi il CSS è sottoutilizzato. C’è un abisso tra gli sviluppatori Angular/React/Vue/... e i designer UI.

Il designer UI annida trenta <div> con sopra quaranta classi CSS, mentre lo sviluppatore Angular ogni due settimane si esalta per l’ultima lib, anche se il suo dependency hell da un pezzo non compila più senza npm i --force, perché le peer dependency sono in conflitto. CSS e HTML interessano poco al fanatico di TypeScript. Anche per gli input più semplici deve usare Material, perché ha paura di non riuscire altrimenti a gestire la validazione. E soprattutto non vuole perdere tempo a reinventare la ruota. Che poi, al primo requisito che la libreria non copre, tutto quel tempo lo perda di nuovo e si ritrovi a leggere le issue della lib su GitHub, non gli è chiaro.

Come sviluppatore in un progetto full stack si ha raramente l’occasione di mettere a frutto le proprie competenze da designer frontend. Si ricevono i mockup delle schermate in Figma e vanno implementati esattamente così. La maggior parte degli sviluppatori frontend di questo tipo non sa nemmeno che basta una sola riga di CSS per ottenere un layout responsive. Il CSS è più potente che mai. Finiti i tempi degli hack di stile in JS, delle innumerevoli media query e dei workaround per IE 8. Evviva!

2. Centratura perfetta

Ai colloqui non sempre è stata accolta bene, ma io me la godevo: alla domanda se fossi bravo nel frontend rispondevo volentieri con «Oh sì. So centrare verticalmente un <div>.»

È notoriamente difficile centrare un div.

Adesso non più:

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

3. Grid responsive

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

4. Flex responsive

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

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

5. Layout di pagina

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

6. Sidebar

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

7. Crediti

1-Line Layouts