Иногда смотришь на современный CSS и ловишь странное чувство: неужели дожили? Без препроцессора можно вкладывать селекторы, контейнерные запросы уже не выглядят как эксперимент из лаборатории, переменные давно стали нормой, Grid не пугает даже людей, заставших табличную верстку.
Красота. Только есть нюанс: инструментов стало больше, а думать за верстальщика они всё равно не начали.
Вложенность в CSS
CSS nesting — штука приятная. Раньше для вложенности тащили Sass или Less. Не потому что хотелось плодить сборку, а потому что писать длинные цепочки селекторов руками — занятие для людей с крепкой психикой.
.card {
padding: 24px;
& h3 {
margin-top: 0;
}
&:hover {
box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
}
Стало удобнее. Но вложенность — не разрешение строить CSS-матрёшку до седьмого колена. Если селектор похож на маршрут до дачи через три пересадки — что-то пошло не так.
Container queries
Контейнерные запросы — действительно полезная штука. Долгие годы мы делали вид что адаптивность зависит только от ширины окна. Хотя один и тот же блок может жить в широкой колонке, узком сайдбаре, карточке, модальном окне и ещё неизвестно где.
Теперь блок реагирует не на экран целиком, а на размер своего контейнера. Для компонентной верстки — большой шаг.
.teaser {
container-type: inline-size;
}
@container (min-width: 480px) {
.teaser__inner {
display: grid;
grid-template-columns: 160px 1fr;
}
}
В старые времена для такого городили классы, медиазапросы, особые состояния и танцы с бубном. Сейчас браузер можно попросить сделать нормальную работу — и он делает.
Чего не будет
Новые свойства CSS не спасают от плохого макета, тяжёлых картинок, странной структуры HTML и желания заказчика «сделать как на сайте Apple, только завтра и за три копейки». Новые возможности легко превращаются в новые костыли. Можно так увлечься вложенностью что через месяц сам не поймёшь почему кнопка синяя только на странице каталога, только в Firefox и только если рядом блок с акцией.
И ещё — опыт старой верстки до сих пор выручает. Когда ты помнишь как страница грузилась через модем и как лишний spacer.gif мог испортить вечер, начинаешь бережнее относиться к разметке. Современный CSS мощнее, да. Но хорошая верстка начинается не с модного свойства, а с вопроса: что это за блок, где он будет жить и как он должен себя вести при нормальной эксплуатации.
CSS в 2024 радует. Многое из того ради чего раньше подключали препроцессоры становится частью языка. Но верстка не стала автоматической. Костыли стали красивее, легче и местами официально одобрены. А голова, как ни странно, всё ещё обязательна к установке.