Зачем нужны постпроцессоры при живых препроцессорах...

Зачем нужныпостпроцессоры при

живых препроцессорахАлексей Иванов, компания JetStyle

О чем этот доклад

1.  Почему чистого css мало для счастливой жизни.

2.  Плюсы и минусы препроцессоров.

3.  Что такое постпроцессы и чем они хороши.

4.  Почему постпроцессоры становятся популярны именно сейчас.

5.  Как сделать свой постпроцессор.

Появление CSS

Появление Ruby-программистов

Ruby-программистысмотрят на css-код

Ruby-программисты создают SASS

1.  Переменные

2.  Вложенные селекторы

3.  Простая математика

К SASS добавляются LESS и Stylus

1.  Переменные

2.  Вложенные селекторы

3.  Простая математика

Возможности препроцессоровначинают бурно развиваться

1. Переменные 6. Примеси

2. Вложенные селекторы 7. Функции

3. Простая математика 8. Циклы for

4. Массивы 9. Условные операторы if .. else

5. Наследование селекторов 10. Ссылки на свойства

Наконец-то настал Золотой Век css!

1. Переменные 6. Примеси

2. Вложенные селекторы 7. Функции

3. Простая математика 8. Циклы for

4. Массивы 9. Условные операторы if .. else

5. Наследование селекторов 10. Ссылки на свойства

Наконец-то настал Золотой Век css!…или нет?

1. Переменные 6. Примеси

2. Вложенные селекторы 7. Функции

3. Простая математика 8. Циклы for

4. Массивы 9. Условные операторы if .. else

5. Наследование селекторов 10. Ссылки на свойства

Какие из-за этого возникаютпроблемы?

1.  Возможности препроцессоров можно применять только через их

специальный синтаксис.

2.  Собственный язык, который браузеры не понимают.

3.  Невозможность модификации обычных css-файлов (кроме Stylus’а).

4.  Скорость рендеринга.

5.  На большинстве проектов используется только маленький процент

возможностей препроцессоров.

Новая надежда!Rework

Ну а сейчас-тоЗолотой Век?

Ну…

Что такое постпроцессор?

Постпроцессор – это библиотека а) принимающая на вход css, б)

преобразующая его тем или иным образом и в) сохраняющая на

диск снова как css.

Примеры постпроцессоров

1.  CSSO – минификация css.

2.  CSSComb – изменение порядка выбора правил.

3.  cssrb – библиотека для замены ссылок на ресурсы в css файлах.

4.  Autoprefixer – автоматическое добавление префиксов.

Что изменил Rework?

Появился простой, быстрый и удобный фреймворк для создания

постпроцессоров:

1.  Автоматический парсинг и сборка css.

2.  Удобный JavaScript API для работы с разобранным кодом.

3.  Куча дополнительной информации о коде – номера строк, имена

файлов, типы селекторов.

4.  Поддержка карт кода.

.icon {

background: url('a.png')

}

.icon {

background: url('a.png')

}

.webp .icon {

background: url('a .webp ')

}

Пример: grunt-webpcss

Пример кода из доклада PostCSS: будущее после Sass и LESS

.box {

flex-shrink: 0;

flex-basis: 300px;

}

.box {

-webkit-flex-shrink: 0;

-ms-flex-negative: 0;

flex-shrink: 0;

-webkit-flex-basis: 300px;

-ms-flex-preferred-size: 300px;

flex-basis: 300px;

}

Пример: autoprefixer

Пример кода из доклада PostCSS: будущее после Sass и LESS

a {

left : 10px;

text-align: left ;

}

a {

right : 10px;

text-align: right ;

}

Пример: rtlcss

Изменяет дизайн для арабского и иврита

Пример кода из доклада PostCSS: будущее после Sass и LESS

Другие способы использования

1.  Создание спрайтов.

2.  Группировка селекторов по медиавыражениям.

3.  Объединение файлов.

4.  Тысячи других.

Rework – первый,но не единственный

1.  Rework – самый старый, больше всего плагинов.

2.  PostCSS – лучше поддержка карт кода, сохраняет форматирование,

много дополнительных хелперов, более надежный парсер.

3.  CSSComb-core – самый быстрый и универсальный парсер,

поддержка синтаксиса SASS и LESS, нет карт кода.

Как использовать

1.  Отдельные библиотеки с CLI.

2.  grunt и gulp плагины.

3.  Через node.js.

Свой постпроцессор. Проблема

Современные браузеры:

a :: after { }

Для IE 8:

a : after { }

Свой постпроцессор. Код

var coloner = postcss(function (css) {

css.eachRule(function (rule) {

if ( rule.selector.match(/::/) )

rule.selector += ', ' +

rule.selector.replace('::', ':');

});

});

Вход: Выход:

a::after {

content: "→"

}

a::after, a:after {

content: "→"

}

Свой постпроцессор. Результат

var fixed = coloner.process(css).css;

Резюме

1.  Препроцессоры это хорошо – но не для всех задач.

2.  Многое из того что сейчас делаются через препроцессоры

или руками, гораздо проще делать через постпроцессоры.

3.  Есть множество готовых постпроцессоров на все случаи жизни.

4.  Свои постпроцессоры писать очень просто и быстро.

5.  Пробуйте, пишите, экспериментируйте, выкладывайте на Github.

6.  Задавайте вопросы если вам что-то непонятно – вам обязательно

помогут!

Вопросы?

Twitter: @iadramelk

Почта: stupidlogin@gmail.com

Github: github.com/iAdramelk