От автора: еще в 2013 году я написал одну из первых книг о Sass «Sass and Compass для дизайнеров». Хотя я считаю, что это лучшая техническая книга, написанная мною, она была гораздо менее популярна, чем другие мои книги, но это была именно та книга, которую мне хотелось написать. В то время, как разработчик CSS, я был в восторге от того, что Sass позволяет нам делать, и хотел, чтобы об этом знали другие.
Впоследствии, в 2014 году, я придумал «Устойчивый CSS» или «ECSS», как его еще называют. Методология, которая до сих пор лежит в основе CSS для крупнейшего в мире приложения для азартных игр и ежедневно используется множеством разработчиков.
Теперь, возможно, потому, что проблемы, которые решает ECSS, не так широко применимы, или, возможно, потому, что у меня просто нет социального влияния, чтобы вытащить его, но ECSS как бы исчез в относительной безвестности. Думаю, это позор, ибо я до сих пор вижу, как разработчики пытаются решить те же проблемы, которые были решены 7 лет назад!
Так или иначе. Одним из основных принципов ECSS является идея «единого источника истины» для каждого ключевого селектора в коде. Основная идея состоит в том, что все, что происходит с селектором, содержится в единственном наборе фигурных скобок. Вы бы написали это:
.key-Selector { width: 100%; @media (min-width: $M) { width: 50%; } .an-Override_Selector & { color: $color-grey-33; }
}И это даст следующее:
.key-Selector { width: 100%;
} @media (min-width: 768px) { .key-Selector { width: 50%; }
} .an-Override_Selector .key-Selector { color: #333;
}В результате мы получаем зависимость, позволяющую создавать CSS в необходимом формате. Даже в 2013–2014 годах, Sass и PostCSS были довольно распространены, но все равно возникали небольшие разногласия, если вы хотели просто передать что-то в HTML / CSS с помощью методологии ECSS. Или, если на то пошло, все, что вы сочли полезным делать — это вложение в пре / постпроцессоры.
Зачем мне вообще нужен Sass / PostCSS?
Итак, я полностью полагался на пре / пост процессоры для вложения. Тем не менее, даже тогда мне очень редко требовались сложные конструкции, и я никогда не использовал @extends и многие другие малоизвестные функции языка.
Стиль Sass $variables был очень полезен, но теперь я использую вместо него пользовательские свойства CSS. Потребовалось некоторое время и пользовательские свойства наверстали упущенное — как часть языка они намного мощнее, чем переменные в стиле Sass, а также работают с JS.
Итак, единственная часть Sass / PostCSS, без которой я не могу жить, это вложение. Вложение связанных селекторов для инкапсуляции полной «истории» селектора является для меня очень мощной концепцией.
Настоящее вложение CSS
Обсуждения включения в спецификацию CSS велись много лет назад. Волнение нарастало, а затем утихало, и я смирялся с тем, что возможно, никогда не произойдёт.
Представьте мое удивление, когда Адам Аргайл недавно опубликовал в Твиттере ссылку на последний черновик модуля вложенности CSS, Таб Аткинс также работает над этим.
Но не слишком радуйтесь. Пока нет реализаций, и в настоящее время, насколько я могу судить, это работает только в Chromium; и Адам, и Таб были сотрудниками Google.
В проекте прямо говорится: Он предназначен только для обсуждения и может быть изменён в любой момент. Его публикация здесь не означает одобрения его содержания со стороны W3C. Не цитируйте этот документ иначе, как незавершённый.
Однако не позволяйте этому ослабить наш энтузиазм по поводу практически той же функциональности, которую мы любим в пре/пост процессорах.
Синтаксис вроде того, к которому вы привыкли
В разделе 2 черновика описывается типичный синтаксис вложенности. Вы используете амперсанд ‘&’ как ссылку на родительский селектор, в котором он находится. Такой код работать не будет:
.key-Selector { width: 100%; .a-Selector_NowMoreSpecificThanItNeededToBe { color: #333; }
}Селектор должен иметь префикс с амперсандом. Итак, рабочий код:
.key-Selector { width: 100%; & .a-Selector_NowMoreSpecificThanItNeededToBe { color: #333; }
}Однако больше всего я хочу сделать в нашем CSS вот что:
.key-Selector { width: 100%; .an-Override_Selector & { color: #333; }
}И это также невозможно в данной спецификации. Эта цитата из черновика немного сложна для понимания, так что постарайтесь — мне нужно было прочитать ее всего 15 раз чтоб понять.
Чтобы иметь префикс вложенности, селектор вложенности должен быть первым простым селектором в первом составном селекторе селектора. Если селектор является списком селекторов, каждый сложный селектор в списке должен иметь префикс вложенности, чтобы селектор в целом был префиксом вложенности.
Итак, короткая версия, не возможно иметь свой амперсанд в конце, чтобы инкапсулировать вещи. Означает ли это, что мои надежды и мечты растворились в дыму?
Правило @Nest
К счастью, есть @nest. Поскольку он может действовать как недвусмысленный флаг для парсеров, он позволяет вам делать то, что я хотел бы:
.key-Selector { width: 100%; @nest .an-Override_Selector & { color: #333; }
}Это сработает нормально, но вам нужны как @nest так и &. В частности, для каждого вложенного селектора потребуется селектор вложенности (&). Необходимость в @nest — небольшая боль; я был бы в восторге, если бы в @nest не было необходимости, но если он вытащит нас за черту, это небольшая цена.
Может быть, разработчики могли бы сократить или позволить еще более короткое @n? Вряд ли, но это всего лишь мысль.
Условия
Другое важное применение вложенности — это закрепление условных выражений там, где они наиболее логичны. Проще говоря — возможность вкладывать медиа-запросы! Итак, хотя вы не можете делать именно так, как привыкли, примерно так:
.key-Selector { width: 100%; @media (min-width: 500px) { width: 50%; }
}Это очень близко к тому коду, который сработает:
.key-Selector { width: 100%; @media (min-width: 500px) { & { width: 50%; } }
}Обратите внимание на селектор вложенности амперсанда. Опять же, не мой стопроцентный идеал, но абсолютно практичный и разумный.
Заключение
Я с нетерпением жду возможности работать с вложениями в CSS. Не только из-за того, что они облегчают работу, но и из-за того, что это значит для языка. Такие инструменты, как Sass, так сильно повлияли на CSS, и я очень благодарен им за это. Но было бы очень здорово вообще не нуждаться в них.
Пройдет несколько лет после того, как вложения наконец-то появится в браузере, прежде чем кто-либо из нас сможет безопасно отключить свои пре- и постпроцессоры. Таким образом, хотя некоторые реализации этой спецификации не будут концом для пре / постпроцессоров, это может быть, по крайней мере, для меня, началом конца. Я понимаю, что не все будут так думать. Многие люди, которыми я восхищаюсь, делают с Sass вещи, которые не станут проще на обычном CSS только потому, что у него есть вложенность. Но для автора это может быть последний кусок головоломки.
И, на мой взгляд, это не будет печальным днем для пре / постпроцессоров, это будет в первую очередь подтверждение важности их существования.
Автор: Ben Frain
Источник: benfrain.com
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен