Bunele mele practici – CSS

1. Cuvânt înainte

Astăzi, CSS este subutilizat. Există o prăpastie între dezvoltatorii Angular/React/Vue/... și designerii UI.

Designerul UI imbrică treizeci de <div> cu patruzeci de clase CSS pe ele, în timp ce dev-ul Angular se dă în vânt la fiecare două săptămâni după cea mai nouă bibliotecă, iar dependency hell-ul lui de mult nu mai compilează fără npm i --force, pentru că peer dependencies sunt în conflict. CSS-ul și HTML-ul îl interesează prea puțin pe fanaticul TypeScript. Pentru cele mai simple inputuri trebuie să folosească Material, pentru că se teme că altfel nu va reuși validarea. Și în niciun caz nu vrea să piardă timp reinventând roata. Că la prima cerință pe care biblioteca n-o acoperă pierde din nou tot timpul acela și ajunge să citească issue-urile bibliotecii pe GitHub nu-i trece prin cap.

Ca dezvoltator într-un proiect fullstack ai rareori ocazia să-ți pui în valoare cunoștințele de designer frontend. Primești machetele ecranelor în Figma și trebuie să le implementezi exact așa. Cei mai mulți dezvoltatori frontend de acest fel nici nu-și dau seama că un layout responsive se poate obține cu o singură linie de CSS. CSS-ul este mai puternic ca oricând. Au trecut vremurile hackurilor de stil în JS, ale nenumăratelor media queries și ale workaroundurilor pentru IE 8. Ura!

2. Super centrat

Nu a fost primit mereu bine la interviuri, dar mie mi-a plăcut la nebunie: la întrebarea dacă mă pricep la frontend, răspundeam cu plăcere „O, da. Pot să centrez vertical un <div>.”

E notoriu de greu să centrezi un div.

Acum nu mai e:

.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. Layoutul paginii

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

6. Bară laterală

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

7. Credite

1-Line Layouts