x
 
Юрий Мазурский
24 декабря 2020
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Разбор результатов опроса разработчиков State of CSS 2020


Опуб­ли­ко­ваны резуль­таты мас­штаб­ного опроса раз­ра­бот­чи­ков 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Как вы оцените с технической точки зрения новый редактор публикаций в «Деле Модульбанка»? Как переключить тему оформления на сайте в зависимости от настройки ОС Как в аврале уделять время росту? 2 Как вы понимаете, что интерфейс будет хорошо смотреться на «неретинах»?




Недавно всплыло

Давайте соберём в одном посте студии и фрилансеров, которые работают по принципам ФФФ 48 8 9 Есть ли шрифты, которые можно использовать в логотипе без лицензии? 2