Мои Best Practices — 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;
}

7. Источники

1-Line Layouts