Moje osvědčené postupy – CSS

1. Úvodem

CSS se dnes nevyužívá naplno. Mezi vývojáři pro Angular/React/Vue/... a UI designéry zeje propast.

UI designér do sebe vnoří třicet <div> a navěsí na ně čtyřicet CSS tříd, zatímco angularový vývojář se každé dva týdny vzrušuje nad nejnovější knihovnou a jeho dependency hell se už dávno nesestaví bez npm i --force, protože peer závislosti jsou v konfliktu. CSS a HTML fanatika přes TypeScript moc nezajímají. I na ty nejjednodušší vstupy musí použít Material, protože se bojí, že jinak validaci nezvládne. A rozhodně nechce ztrácet čas vynalézáním kola. Že při prvním požadavku, který knihovna nepokrývá, všechen ušetřený čas zase ztratí a skončí u čtení GitHub issues té knihovny, mu nedochází.

Jako vývojář ve fullstackovém projektu má člověk málokdy příležitost uplatnit své schopnosti frontendového designéra. Dostane mockupy obrazovek ve Figmě a musí je přesně tak implementovat. Většina frontendových vývojářů tohoto typu si vůbec neuvědomuje, že responzivní layout lze vytvořit jediným řádkem CSS. CSS je silnější než kdy dřív. Pryč jsou časy stylových hacků v JS, nesčetných media queries a obezliček pro IE 8. Hurá!

2. Dokonale vycentrováno

U pohovorů to nebylo vždy dobře přijato, ale já to miloval: na otázku, jestli jsem dobrý ve frontendu, jsem rád odpovídal: „Ale jo. Umím vertikálně vycentrovat <div>.“

Vycentrovat div je pověstně obtížné.

Teď už ne:

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

3. Responzivní grid

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

4. Responzivní 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. Rozvržení stránky

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

6. Postranní panel

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

7. Zdroje

1-Line Layouts