введение

За почти 20 лет CSS наконец-то реализовал нативный вложенный синтаксис во всех современных браузерах. Пришло время отказаться от препроцессоров, таких как less/sass

Проверка совместимости браузера с собственным вложением CSS

Голос веб-разработчиков

13 апреля 2012 года соучредитель CodePen Крис Койер пожаловался, что имена классов CSS не поддерживают пространства имен, что приводит к написанию большого количества повторяющихся селекторов.

2 февраля 2016 года руководитель программы Microsoft Кеннет Аукенберг заявил, что если CSS поддерживает переменные и вложенность, он больше не будет использовать препроцессоры.

8 декабря 2016 года Леа Веру, автор книги «Демистификация CSS», исследовала основные причины использования препроцессоров CSS (вопросы с одним вариантом ответа). В голосовании приняли участие 1838 человек, и две причины итоговой ничьей за первое место были вложенными и переменными. Она считает, что пришло время переосмыслить нативную вложенность CSS.

13 июля 2017 года Сара Суэйдан, фрилансер UI/UX, сочетающая таланты в дизайне и разработке, сказала, что вложение — ее самая востребованная функция CSS.

15 августа 2017 года Ян Олаф Кремс, автор node-inspect, сказал, что cssnext определяет вложенность как «CSS завтрашнего дня», но он по-прежнему хочет видеть нативную вложенность CSS, в конце концов, экосистема JS доказала, что избегает «каждый используя свой собственный полустандартный язык», безусловно, полезен.

23 февраля 2018 года Леа Веру снова выступила, заявив, что она все еще использует препроцессоры CSS для написания вложенности, и как только CSS поддержит нативную вложенность, она решительно откажется от предварительной обработки.

25 мая 2018 года Джонатан Нил, автор postcss-preset-env, в очередной раз предложил пересмотреть возможность поддержки CSS нативной вложенности (что является отправной точкой этой статьи), что вызвало волну бурных дискуссий.

Перед вложением каждый селектор необходимо объявить отдельно, без связи друг с другом. Это приводит к дублированию, избыточным таблицам стилей и фрагментированному процессу разработки.

пример