Работал над

Опенсорс

Значение

Глава 1

2 000 000

загрузок в месяц

Пользователи

Теория

Глава 2

<?php foreach ($array as $i): ?>
    <font color="black">
<?php endforeach ?>

Шаблонизаторы

@each $i in $array {
    color: black;
}

Шаблонизаторы CSS

PostCSS

Использование

gulp.task('css', () => {
    let postcss = require('gulp-postcss');
 
    return gulp.src('src/*.css')
        .pipe( postcss([ plugin1, plugin2 ]) )
        .pipe( gulp.desc('build/') );
});

postcss-nested

.block {
    &_title {
        font-size: 200%;
    }
}

.block_title {
    font-size: 200%;
}

Меньше 90 строк кода

autoprefixer

:fullscreen a {
    transition: transform 1s;
}

:-webkit-full-screen a {
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
}
:-moz-full-screen a {
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
}
:-ms-fullscreen a {
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
}
:fullscreen a {
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
}

rtlcss

Переводим проект на PostCSS

Глава 3

Шаг 1. Сборщик

Sass + PostCSS

return gulp.src('src/*.scss')
    .pipe( sass )
    .pipe( postcss(plugins) )
    .pipe( gulp.desc('build/') );

Sass любит PostCSS

Шаг 2. Автопрефиксер

.foo {
    -webkit-border-radius: 5px;
    -mox-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

.foo {
    border-radius: 5px;
}

Шаг 3. cssnext

@media (width <= 600px) {
    …
}

@media (max-width: 600px) {
    …
}

Шаг 4. postcss-sorting

.block {
    position: absolute;
    $width: 10px;
    top: 0;
    $height: 20px;
    height: $height;
    width: $width;
}

.block {
    $width: 10px;
    $height: 20px;

    position: absolute;
    top: 0;
    width: $width;
    height: $height;
}

Шаг 5. Stylelint

.bad {
    margin-top: 10px;
    margin: 0 auto;
}

Colorguard

.a {
    background: #ff0205;
}
.b {
    background: #fe0305;
    /* Warning: #fe0305 collides with #ff0205 */
}

Прямо в браузере

Шаг 6. Поддержка IE 8

.icon {
    background: url(a.svg);
    background-size: 5px 5px;
}

.icon {
    background: url(a.svg);
    background-size: 20px 20px;
}

.no-svg .icon {
    background-image: url(a-20x20.png);
}

Пишем новый код на PostCSS

Глава 4

gulp.task('css:old', () => {
    return gulp.src('old/*.scss')
        .pipe( sass() )
        .pipe( postcss(plugins) )
        .pipe( gulp.desc('build/') );
});

gulp.task('css:new', () => {
    return gulp.src('old/*.css')
        .pipe( postcss(plugins.concat(extra)) )
        .pipe( gulp.desc('build/') );
});

Чистая комната

Шаг 1. postcss-assets

.icon {
    width: width('logo.png');
    height: height('logo.png');
    background: inline('logo.png');
}

Шаг 2. postcss-inline-svg

.icon {
    background: svg-load(icon.svg, fill: red);
}

Шаг 3. PreCSS

@define-mixin icon $name, $color {
    background: $color url($name.svg);
    &:hover {
        background-color: color($color b(+10%));
    }
}

.icon.is-twitter {
    @mixin icon twitter, blue;
}
.icon.is-youtube {
    @mixin icon youtube, red;
}

Шаг 4. Style Guide

Шаг 5. Изоляция

.title {
    font-size: 10rem;
    color: red;
}

.visits {
    color: gray;
}

.Page_title_jhv43,
.Page_visits_ugu34 {
    /* Reset */
    all: initial;
    box-sizing: border-box;
    font: inherit;
}

.Page_title_jhv43 {
    font-size: 10rem;
    color: red;
}

.Page_visits_ugu34 {
    color: gray;
}

Шаг 6. cq-prolifill

.title {
    font-size: 10rem;
    color: red;
}

.visits {
    color: gray;
}

.element:container(width >= 100px) {
    …
}

Итог

Глава 5

Преимущества

1. Забываем о префиксах и IE 8
2. Автоматический код-ревью
3. Удобный инлайн SVG
4. Более читаемый CSS-код
5. Изоляция компонентов

Ссылки

@andrey_sitnik

@postcss

evl.ms/chronicles