Мої найкращі практики – CSS
1. Передмова
Сьогодні можливості CSS використовують далеко не повністю. Між розробниками на Angular/React/Vue/... та UI-дизайнерами пролягає прірва.
UI-дизайнер вкладає тридцять <div> один в одного й навішує на них сорок CSS-класів, тоді як Angular-розробник кожні два тижні кайфує від найновішої бібліотеки, а його dependency
hell давно вже не збирається без npm i --force, бо peer-залежності конфліктують. CSS і HTML фанатика TypeScript мало цікавлять. Навіть для найпростіших полів введення
він бере Material, бо боїться, що інакше не впорається з валідацією. І вже точно не хоче гаяти час на винайдення велосипеда. Того, що при першій же
вимозі, яку бібліотека не покриває, він втратить увесь зекономлений час і зануриться в читання GitHub-issues цієї бібліотеки, він не усвідомлює.
Розробник у fullstack-проєкті рідко має змогу проявити себе як фронтенд-дизайнер. Він отримує макети екранів у Figma й мусить реалізувати їх точнісінько так. Більшість фронтенд-розробників такого типу навіть не підозрюють, що адаптивний макет можна зробити одним-єдиним рядком CSS. CSS потужніший, ніж будь-коли. Минули часи JS-хаків для стилів, численних media queries та обхідних рішень для IE 8. Ура!
2. Ідеальне центрування
На співбесідах це не завжди сприймали добре, але мені подобалося: на запитання, чи я добре знаюся на фронтенді, я любив відповідати: «О так. Я вмію вертикально центрувати <div>».
Відцентрувати div — горезвісно складне завдання.
Тепер уже ні:
.parent {
display: grid;
place-items: center
}3. Адаптивна сітка
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}4. Адаптивний 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. Макет сторінки
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}6. Бічна панель
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}