Опубликованы результаты масштабного опроса разработчиков State of CSS 2020. Респонденты отвечали на вопросы о ЦСС. Результаты исследования получились довольно интересными.
Исследование проводится второй год подряд, и сравнить результаты в динамике особенно интересно. Вероятно, опрос проходили самые прогрессивные разработчики — те, кому больше всех надо, поэтому результаты могут несколько опережать настоящее положение дел.
Тем не менее предлагаю посмотреть, что произошло с ЦСС‑экосистемой за год и к чему готовиться в следующем году, чтобы не отставать.
Модули ЦСС
В стандарте ЦСС постоянно появляются новые модули, значительно расширяющие возможности. Уследить за всеми трудно, поэтому полезно периодически заглядывать в документацию, например в MDN. В отчёте State of CSS тоже можно найти много интересных и новых для себя вещей.
Grid. С 55 до 73% выросла доля использующих ЦСС‑грид в работе. Популярность гридов будет только расти, а значит, пора их осваивать.
Мультиколоночная раскладка. Автоматическая раскладка текста на колонки уже работает во многих браузерах, но разработчики не очень торопятся её использовать. Скорее всего, из‑за проблем с дроблением абзацев и отступами.
Свойство aspect‑ratio. Позволяет задать пропорции блока при расчёте его размеров. К сожалению, пока плохо поддерживается в браузерах. Этого свойства иногда очень сильно не хватает, стоит следить за его поддержкой браузерами.
«Прилипание» прокрутки. Этот модуль ЦСС позволяет делать прокрутку залипающей в определённых местах. Осведомлённость о технологии растёт, как и поддержка браузерами.
object‑fit. Управление кадрированием элементов внутри контейнера. Доля использующих это свойство разработчиков выросла c 43 до 60%. Поддерживается прогрессивными браузерами.
CSS custom properties. Популярность выстраивания дизайн‑систем с помощью ЦСС‑переменных растёт. Нужно обязательно разобраться в этой теме. Тем более многие фреймворки используют ЦСС‑переменные для кастомизации.
Технологии
В разделе «Пре/Постпроцессоры» по степени удовлетворённости второй год подряд лидирует PostCSS, хотя SASS всё ещё остаётся более узнаваемым препроцессором. Я думаю, что SASS со временем отомрёт, а его место займёт PostCSS, потому что это гораздо более мощная и гибкая система.
Настоящий прорыв года среди ЦСС‑фреймворков совершил Tailwind CSS. Он стал узнаваемым, его хотят использовать и хотят изучать. По степени удовлетворённости он занимает первое место второй год подряд.
Как называть классы в ЦСС:
Tailwind CSS предлагает утилитарный подход, при котором стиль элементов описывается несколькими базовыми классами, в противоположность классическому подходу к написанию ЦСС‑кода, когда стили элемента объединены в одном специфичном классе. Это значительно уменьшает дублирование ЦСС‑правил и избавляет от необходимости думать о семантике.
Как называть классы в ЦСС:
Этот подход работает, потому что никто уже не пишет ЦСС без препроцессоров и не хочет тратить время на придумывание имён классов «по старинке».
Бутстрап всё ещё остаётся самым используемым и узнаваемым фреймворком, но удовлетворённость им и желание изучать его упали в 2020 году.
Как и среди фреймворков, среди методологий растёт интерес к утилитарному Atomic CSS, а к БЭМу — падает.
ЦСС‑модули завоёвывают внимание и интерес разработчиков. Styled components по‑прежнему популярны.
В отчёте ещё много интересного, рекомендую изучить.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.