PostCSS: будущее после Sass и Less

Андрей Ситник, Злые марсиане

PostCSS Будущее после Sass и Less

logo.pngАндрей Ситник, Злые марсиане

План

  1. Зачем обрабатывать CSS
  2. Чем плохи препроцессоры
  3. Что такое постпроцессоры
  4. Как их использовать?
  5. Как их использовать на полную мощь?

Часть 1 Проблема

covers/problem.jpg

Части веб‑проекта

CSS
72 КБ
JS
25 КБ
Бэкенд
43 КБ
Источник: проекты Злых марсиан

Хороший код DRY

format_links(announce);
format_links(text);

Хороший код DSL

count.should.eql(1);

Хороший код Метапрограммирование

User = modelByTable('users');
User.findByLogin('ai');

CSS

.logo {
    -webkit-transition: border 200ms;
    transition: border 200ms;
    border: 2px solid #ffe644
}
.image {
    border: 2px solid #ffe644;
    background: data(data:…);
    width: 200px;
    height: 180px
}
.body::after {
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both
}

Стандарты развиваются медленно

1. Скорость разработки и рендера

Быстро разрабатывать

Быстро рендерить

:root {
    --main: #c00
}
a {
    color: var(--main)
}

a {
    color: #c00
}

2. Всем нужно договориться

chrome.pngie.pngfirefox.pngsafari.pngopera.png

3. Обратная совместимость

Нестандартный <blink> поддерживали 19 лет

Эволюция

  1. Случайные идеи
  2. Сравнение в реальном мире
  3. Отбор

Машины должны страдать

Часть 2 Препроцессоры