Руководство по улучшению селекторов и медиа запросов в PostCSS

Руководство по улучшению селекторов и медиа запросов в PostCSS

От автора: с последними изменениями в спецификации CSS появилось довольно много новых возможностей. Но к сожалению, некоторые из них находятся в форме черновика, а другие не поддерживаются браузерами. И как обычно, прежде чем новые предложения будут рассмотрены, приняты и реализованы, пройдет какое-то время. Однако мы можем не ждать так долго и попробовать некоторые из этих свойств в PostCSS.

В PostCSS есть множество плагинов, предназначенных для создания полифилов для самых новых свойств CSS. Плагинов очень много, и рассказать про все в одной статье будет сложно. Поэтому мы сосредоточим внимание на плагинах по добавлению новых возможностей селекторам и медиа запросам. Многие из этих плагинов существенно улучшат структуру стилей, а другие просто добавят новые функции. В статье мы не будем показывать, как настраивать и устанавливать PostCSS. На PostCSS и GitHub можно быстро ознакомиться с тематикой.

Вложение правил

Начнем с самых основ, того, что знакомо всем работающим с препроцессорами – вложение. Плагин postcss-nesting реализует вложение по спецификации W3C nesting module proposal.

В спецификации описан новый селектор вложенности &, указывающий на родительский селектор. По спецификации данный селектор, в отличие от Less или Sass, обязательный и должен располагаться первым в цепи вложенности селекторов. Селекторы без селектора вложенности будут игнорироваться. К примеру:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Будет переведено в:

Обратите внимание: код ниже неправильный, в нем не используется селектор &.

Чтобы располагать родительский селектор в любом месте (а не только в начале), в спецификации прописан альтернативный синтаксис – правило @nest. Мы можем исправить селектор .latest & из предыдущего примера:

Что будет переведено в:

Синтаксис @nest чуть-чуть выразительнее селектора &.

Пользовательские селекторы

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

В PostCSS есть плагин postcss-custom-selectors, в котором реализована данная функция. Простой пример объявления селектора для всех заголовков:

Код будет переведен в:

Странный синтаксис пользовательских селекторов :— объясняется тем, что они реализованы через псевдоклассы. Пользовательские селекторы можно использовать в паре с обычными селекторами. К примеру:

Компилируется в:

Можно объединить несколько пользовательских селекторов в один для более сложных записей.

Результат:

Пример слегка раздут, зато он дает четкое представление того, на что способна данная функция.

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

В спецификации Selectors Level 4 была представлена целая куча новых псевдоклассов, но из-за динамичности только некоторые из них были реализованы в виде PostCSS плагинов.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Псевдокласс :matches()

В плагине postcss-selector-matches реализована работа нового псевдокласса :matches(). Это функциональный класс, который фильтрует элементы по указанному аргументу. Если в аргумент передать несколько селекторов, то элемент совпадет хотя бы с одним из них. Если коротко:

Будет переведено в:

Псевдокласс :not()

Псевдокласс :not() фильтрует элементы, не совпадающие с заданным аргументом. Его работа реализована в плагине postcss-selector-not.

Результат:

Псевдокласс :any-link

В плагине postcss-pseudo-class-any-link реализована работа псевдокласса :any-link. Данный псевдокласс был создан для решения проблем с псевдоклассом :link. В отличие от последнего, псевдокласс :any-link используется для выбора всех ссылок – в том числе посещенных.

Переводится в:

Улучшения медиа запросов

В арсенале PostCSS есть парочка плагинов, облегчающих работу с медиа запросами — postcss-custom-media и postcss-media-minmax.

Пользовательские медиа запросы

У медиа запросов те же проблемы, что и у обычных селекторов – они часто повторяются. Может быть, даже чаще обычных селекторов. К счастью для нас, есть решение, похожее на пользовательские селекторы. В плагине postcss-custom-media реализована спецификация custom media query, в которой описан способ сохранения медиа запросов в переменные. Синтаксис сильно напоминает синтаксис пользовательских селекторов. Пример:

Компилируется в:

Можно также использовать несколько пользовательских медиа запросов за раз:

Результат:

Теперь намного проще изменить размер для «среднего размера экрана», а также искать другой CSS код.

Синтаксис min и max

Медиа запросы это отлично, но вот синтаксис min- и max- получил массу нареканий со стороны сообщества. W3C выпустили более интуитивный синтаксис на основе операторов сравнения. Плагин postcss-media-minmax добавляет поддержку операторов >, >=, < и <=. Плагин также позволяет использовать синтаксис «значение посередине», т.е. min-value < property < max-value. С помощью нового синтаксиса можно упростить примеры выше и получить тот же результат.

Плагин будет работать и без пользовательских медиа запросов.

Не останавливайтесь на достигнутом

К сожалению, из-за динамичности новых свойств и их зависимости с DOM большую часть свойств нельзя реализовать в виде плагинов PostCSS. Придется подождать, пока появится родная поддержка у большинства свойств. Но все же в сети есть достаточно много плагинов, на которых можно изучать и тестировать работу новых свойств. В этой статье был сделан упор на плагины для селекторов и медиа запросов, но мы хотим вам показать и другой новый функционал. Особо нетерпеливые могут посмотреть другие плагины на postcss.parts. Изучайте новые возможности!

Автор: Pavels Jelisejevs

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree