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

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

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

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

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

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

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

.article {
  color: #333;

  &.popular {
    background: #DDD;
  }

  & .title {
    font-weight: bold;
  }
}

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

.article {
  color: #333
}
.article.popular {
  background: #DDD
}
.article .title {
  font-weight: bold
}

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

.article {
  color: #333;

  /* невложенный селектор */
  .popular {
    background: #DDD;
  }

  /* селектор вложенности расположен не первым в цепочке селекторов */
  .latest & {							
    border: 1px solid red;
  }
}

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

.article {
  color: #333;

  @nest .latest & {
    border: 1px solid red;
  }
}

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

.article {
  color: #333
}
.latest .article {
  border: 1px solid red
}

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

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

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

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

@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:--heading {
  font-weight: bold;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
} 

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

.article :--heading .author {
  color: blue;
}

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

.article h1 .author,
.article h2 .author,
.article h3 .author,
.article h4 .author,
.article h5 .author,
.article h6 .author {
  color: blue;
}

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

@custom-selector :--links a, a:focus, a:visited, a:hover, a:active;
article :--heading :--links {
  color: #333;
}

Результат:

article h1 a,
article h2 a,
article h3 a,
article h4 a,
article h5 a,
article h6 a,
article h1 a:focus,
article h2 a:focus,
article h3 a:focus,
article h4 a:focus,
article h5 a:focus,
article h6 a:focus,
article h1 a:visited,
article h2 a:visited,
article h3 a:visited,
article h4 a:visited,
article h5 a:visited,
article h6 a:visited,
article h1 a:hover,
article h2 a:hover,
article h3 a:hover,
article h4 a:hover,
article h5 a:hover,
article h6 a:hover,
article h1 a:active,
article h2 a:active,
article h3 a:active,
article h4 a:active,
article h5 a:active,
article h6 a:active {
  color: #333;
}

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

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

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

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

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

button:matches(:hover, :focus) {
  color: red;
}

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

button:hover, button:focus {
  color: red;
}

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

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

section:not(:first-child, :last-child) {
  background: white;
}

Результат:

section:not(:first-child):not(:last-child) {
  background: white;
}

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

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

a:any-link {
  color: blueviolet;
}

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

a:link,a:visited {
  color: blueviolet;
}

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

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

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

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

@custom-media --medium-viewport (min-width: 768px) and (max-width: 992px);

@media (--medium-viewport) {
  /* стили */
}

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

@media (min-width: 768px) and (max-width: 992px) {
  /* стили */
}

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

@custom-media --landscape (orientation: landscape);
@media (--medium-viewport) and (--landscape) {
  /* стили */
}

Результат:

@media (min-width: 768px) and (max-width: 992px) and (orientation: landscape) {
  /* стили */
}

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

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

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

@custom-media --medium-viewport (768px <= width <= 992px);

@media (--medium-viewport) {
  /* стили */
}

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

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

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

Автор: Pavels Jelisejevs

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

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

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

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

Получить

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree