Bevált gyakorlataim – CSS
1. Előszó
A CSS-t manapság alulhasznosítják. Szakadék tátong az Angular/React/Vue/...-fejlesztők és a UI-designerek között.
A UI-designer harminc <div>-et ágyaz egymásba, negyven CSS-osztállyal, miközben az Angular-fejlesztő kéthetente rágerjed a legújabb libre, és közben a dependency
hellje már rég nem buildel npm i --force nélkül, mert ütköznek a peer dependencyk. A CSS és a HTML kevéssé érdekli a TypeScript-fanatikust. A legegyszerűbb inputokhoz is
Materialt kell használnia, mert attól fél, hogy különben nem boldogul a validációval. És végképp nem akar időt veszíteni azzal, hogy újra feltalálja a kereket. Azt viszont nem látja, hogy az első
olyan követelménynél, amelyet a library nem fed le, az egész megspórolt időt újra elveszíti, és azon kapja magát, hogy a lib GitHub-issue-it olvasgatja.
Fullstack projektben fejlesztőként ritkán van alkalmad kiélni a frontend-designer tudásodat. Megkapod a képernyőterveket a Figmában, és pontosan úgy kell megvalósítanod őket. Az ilyen frontendfejlesztők többsége nincs is tisztában azzal, hogy egyetlen sor CSS-sel is lehet reszponzív layoutot készíteni. A CSS erősebb, mint valaha. Elmúltak a JS-es stílushackek, a számtalan media query és az IE 8-as workaroundok ideje. Hurrá!
2. Szuper középre igazítás
Az állásinterjúkon nem mindig aratott sikert, de én imádtam: arra a kérdésre, hogy jó vagyok-e frontendben, szívesen feleltem azt, hogy „Ó, igen. Függőlegesen középre tudok igazítani egy <div>-et.”
Közismerten nehéz középre igazítani egy divet.
Már nem az:
.parent {
display: grid;
place-items: center
}3. Reszponzív grid
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}4. Reszponzív 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. Oldalelrendezés
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}6. Oldalsáv
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}