7 PostCSS плагинов, которые помогут вам изучить PostCSS

7 PostCSS плагинов, которые помогут вам изучить PostCSS

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

Людей смущает:

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

PostCSS вполне может заменить препроцессор. Есть плагины, в которых реализованы такие конструкции, как переменные, вложенность, миксины и наследование.

Препроцессор можно сделать и самому, но зачем. Причиной может послужить только, если вы хотите уменьшить функционал и ускорить время компиляции. Лично я использую Sass и потом PostCSS.

Как работать с PostCSS?

PostCSS может работать, как в независимых JS файлах, так и при помощи таскраннеров Gulp, Grunt, Broccoli, Brunch и еще масса, о которых я даже не слышал!

Сам по себе PostCSS всего лишь парсит CSS файл на JS объекты и токены. Настоящая магия творится с плагинами, которые анализируют, манипулируют, добавляют или изменяют свойства и значения еще до того, как конечный CSS файл будет написан.
Для работы с PostCSS в Gulp необходимо создать проект и установить оба модуля:

npm init
npm install --save-dev gulp gulp-postcss

Потом можно добавить нужные вам плагины, к примеру, autoprefixer и cssnano:

npm install --save-dev autoprefixer cssnano

Можно создать файл gulpfile.js – в нем прописывается задача по загрузке исходного CSS и прогонке его в PostCSS. Плагины и любые опции передаются в PostCSS в массиве. И в конце CSS код выводится в конечный файл:

// Gulp.js настройки
var gulp = require('gulp'),
    postcss = require('gulp-postcss');

// подключение PostCSS плагинов
gulp.task('css', function() {
  return gulp.src('src/main.css')
    .pipe(postcss([
      require('autoprefixer')({}),
      require('cssnano')
    ]))
    .pipe(gulp.dest('dest/main.css'));
});

Задачу можно запустить через консоль:

gulp css

Теперь осталось рассмотреть PostCSS плагины…

Autoprefixer

Если вы ничем не пользуетесь, установите Autoprefixer:

npm install --save-dev autoprefixer

Вендорные префиксы -webkit-, -moz- и -ms- постепенно отмирают с увеличением поддержки, и производители браузеров переходят на другой способ введения новых свойств – активация свойств при помощи флагов. К сожалению, отказаться от вендорных префиксов пока не представляется возможным, но и знать все случаи, где они нужны, тоже нереально (например, user-select), где они нужны, но не везде (3D трансформации) или вообще не нужны (border-radius).

С Autoprefixer вы забудете о вендорных префиксах. От вас нужно только указать свойства, к которым не нужно добавлять префиксы и задать браузеры. Autoprefixer проверит поддержку свойств на caniuse.com прежде, чем добавлять префиксы. Код ниже описывает 2 последние версии любого известного браузера, или браузера с долей на рынке больше 2%:

.pipe(postcss([
  require('autoprefixer')({
    browsers: ['last 2 versions', '> 2%']
  })
]))

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

Autoprefixer настолько полезный инструмент, что из-за его большой распространенности вы могли его уже использовать и не знать, что это PostCSS плагин.

PostCSS Assets

PostCSS Assets – набор полезных функций по обработке изображений:

npm install --save-dev postcss-assets

Среди возможностей:

Замена URL: Учитывая имя файла, PostCSS заменяет resolve(image) на корневой путь или полный URL.

Обработка разрешения: PostCSS Assets заменяет width(image), height(image) или size(image) на их пиксельные эквиваленты.

Обработка изображений: PostCSS Assets заменяет inline(image) на строку в кодировке Base64.

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

cssnext

С cssnext вы можете пользоваться новейшим синтаксисом CSS уже сегодня.

npm install --save-dev postcss-cssnext

В плагине длинный список возможностей, среди которых поддержка:

Var переменные

#rrggbbaa цвета

Цветовые функции

Фильтры

Фолбэки

Во время работы cssnext переводит код на синтаксис, который сегодня используется в браузерах.

Rucksack

Rucksack предлагает ряд функций, которые по словам разработчиков делают CSS разработку снова веселой!

npm install --save-dev rucksack-css

Адаптивная типографика, в которой размер шрифта и высота строки настраиваются всего одной строкой font-size: responsive.

Количественные псевдоселекторы типа li:at-least(4), рассчитанные на любые списки с 4 или более пунктами.

Псевдонимы свойств. К примеру, объявление свойства background через bg.

Набор готовых функций анимации.

Stylelint

На основе 140 правил Stylelint сообщает об ошибках в CSS. Плагин создан для сообщения об ошибках, применения стилей и общего усиления лучших практик. Stylelint можно настроить по-разному – статья от Pavels Jelisejevs Повышаем качество вашего CSS кода с помощью PostCSS проведет вас по всему процессу настройки.

CSS MQPacker

По возможности MQPacker оптимизирует медиа запросы в одно правило:

npm install --save-dev css-mqpacker

Препроцессоры типа Sass позволяют легко использовать медиа запросы внутри объявлений.

.widget1 {
  width: 100%;

  @media (min-width: 30em) {
    width: 50%;
  }

  @media (min-width: 60em) {
    width: 25%;
  }
}

.widget2 {
  width: 100px;

  @media (min-width: 30em) {
    width: 200px;
  }
}

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

.widget1 { width: 100%; }

@media (min-width: 30em) {
  .widget1 { width: 50%; }
}

@media (min-width: 60em) {
  .widget1 { width: 25%; }
}

.widget2 { width: 100px; }

@media (min-width: 30em) {
  .widget2 { width: 200px; }
}

Для уменьшения размера файла и повышения скорости парсинга (возможно) MQPacker запаковывает несколько медиа запросов в одно правило @media, т.е.

.widget1 { width: 100%; }
.widget2 { width: 100px; }

@media (min-width: 30em) {
  .widget1 { width: 50%; }
  .widget2 { width: 200px; }
}

@media (min-width: 60em) {
  .widget1 { width: 25%; }
}

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

cssnano

Плагин cssnano максимально сжимает CSS файл. Установка:

npm install --save-dev cssnano

Плагин удаляет комментарии, пробелы, одинаковые правила, устаревшие вендорные префиксы, а также проводит другие меры по оптимизации, что экономит как минимум 50% веса. Есть и другие плагины для оптимизации, но cssnano самый лучший.

Мало?

Найти PostCSS плагины можно на postcss.parts, в документации PostCSS описаны все рекомендуемые опции. По ссылкам выше вы найдете плагины для автоматизации любой CSS задачи, которую можно представить. Некоторые из плагинов выполняют несколько функций, к примеру, в cssnext есть Autoprefixer.

Если и этого мало, можно разработать свой собственный PostCSS плагин в JS. В документации PostCSS объясняется, как написать плагин, а также там есть API.

Пользуетесь ли вы препроцессорами или нет, PostCSS упрощает вам разработку. Сэкономленное время на разработке с лихвой окупает время, затраченное на установку и настройку.

Редакция: Craig Buckler

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

Комментарии 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