Moje dobre praktyki – CSS
1. Wstęp
CSS jest dziś niedoceniany. Między programistami Angulara/Reacta/Vue/... a projektantami UI zieje przepaść.
Projektant UI zagnieżdża trzydzieści <div> i nakłada na nie czterdzieści klas CSS, a programista Angulara co dwa tygodnie podnieca się najnowszą biblioteką, podczas gdy jego dependency
hell już dawno nie buduje się bez npm i --force, bo peer dependencies wchodzą sobie w konflikt. CSS i HTML mało obchodzą fanatyka TypeScriptu. Nawet do najprostszych pól formularza
musi użyć Materiala, bo boi się, że inaczej nie ogarnie walidacji. A już na pewno nie chce tracić czasu na wymyślanie koła na nowo. Że przy pierwszym wymaganiu, którego biblioteka nie obsługuje,
i tak straci cały zaoszczędzony czas i skończy na czytaniu issues tej biblioteki na GitHubie – tego sobie nie uświadamia.
Jako programista w projekcie fullstackowym rzadko masz okazję wykazać się umiejętnościami frontendowego projektanta. Dostajesz makiety ekranów w Figmie i musisz je odwzorować co do piksela. Większość takich frontendowców nawet nie wie, że responsywny layout da się zrobić jedną linijką CSS. CSS jest potężniejszy niż kiedykolwiek. Minęły czasy hacków stylów w JS, niezliczonych media queries i obejść dla IE 8. Hurra!
2. Idealnie wyśrodkowane
Na rozmowach rekrutacyjnych nie zawsze to dobrze wypadało, ale sam miałem z tego frajdę: na pytanie, czy dobrze radzę sobie z frontendem, chętnie odpowiadałem: „O tak. Potrafię wyśrodkować
<div> w pionie”.
Wyśrodkowanie diva jest notorycznie trudne.
Już nie:
.parent {
display: grid;
place-items: center
}3. Responsywny Grid
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}4. Responsywny 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. Układ strony
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}6. Pasek boczny
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}