Skip to content

Latest commit

 

History

History
224 lines (149 loc) · 10.8 KB

13. Как развивается ЦСС и смерть препроцессоров с рождением ПостЦСС.md

File metadata and controls

224 lines (149 loc) · 10.8 KB
Raw

Как развивается ЦСС и смерть препроцессоров с рождением ПостЦСС

ЦСС не стоит на месте — а как нам писать будущий ЦСС уже сегодня?

ЦСС развивается — когда-то мы получили стандарт ЦСС3, а теперь W3C (помните? консорциум, который развивает веб) решил перейти на релизы конкретных спецификаций разными рабочими группами, поэтому теперь у нас есть не ЦСС4, не ЦСС5, не ЦСС 3.2.1.1.3.211.522, а конкретные фичи и их реализации в браузере.

Например, во многих браузерах уже есть Custom Properties — это переменные в ЦССе.

:root {
  --mainColor: red;
}

a {
  color: var(--mainColor);
}

Или Custom Media Queries:

@custom-media --md-viewport (min-width: 796px);

@media (--md-viewport) {
  /* styles for small viewport */
}

А также image-set() для нескольких изображений:

.foo {
  background-image: image-set(
    url(img/bg.png) 1x,
    url(img/bg-2x.png) 2x,
    url(bg-print.png) 600dpi
  );
}

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

.description:matches(:first-child, .special) {
  color: red;
}

И много других. Но как это всё использовать в проекте? Для этого существует cssnext — пакет плагинов для ПостЦСС.

ПостЦСС

… ПостЦСС? Чего?

ПостЦСС это утилита, которая трансформирует ваш ЦСС с помощью джс-плагинов.

Чисто технически, ПостЦСС это парсер ЦСС — он разбирает ваш ЦСС на понятный себе формат, с которым уже потом работают плагины. Например, есть плагин Autoprefixer: он на выходе выдаёт код с браузерными префиксами:

/* input */
a {
  display: flex;
}

/* output */
a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

Или тот же cssnext:

/* input */
:root {
  --red: #d33;
}
a {
  &:hover {
    color: color(var(--red) a(54%));
  }
}

/* output */
a:hover {
  color: #dd3333;
  color: rgba(221, 51, 51, 0.54);
}

Удобно? Чертовски.

Кстати, у фронтэндеров есть ESLint — штука, которая следит за качеством кода, а у верстальщиков — stylelint. Конечно, есть плагин для ВСКода — поставите и будете в редакторе видеть, в чём у вас говнокод.

Настроим ПостЦСС с cssnext

Помните, в первом уроке я говорил, что большинство приложений и утилит для разработчиков идут только с командным интерфейсом и работать с ними можно только в консоли? Вот теперь пора вернуться к Терминалу.

Нода и пакетные менеджеры npm и yarn

Для начала нам нужно поставить Ноду (Node.js) — она выполняет джс-файлы не в браузере.

Windows

Скачайте с сайта nodejs.org.

Unix

Поставьте из своих репозиториев: apt-get, yum и так далее.

macOS

В Маке нет встроенного пакетного менеджера (а зря!), поэтому сначала нужно поставить Homebrew.

Поставьте Ноду через команду brew install node.

Вместе с Нодой идёт пакетный менеджер npm — node package manager.

Пакетный менеджер делится на две вещи: база пакетов и клиент, который работает с ней. Команда npm и есть этот самый клиент.

Проблема в том, что нпм работал плохо и медленно, поэтому ребята из Фейсбука сделали свой пакетный менеджер Ярн: он работает быстрее и предсказуемее.

Что такое вообще пакетный менеджер и почему предсказуемость и скорость так важны?

  • Во-первых, во время разработки вы будете использовать много сторонних модулей — ведь кучу вещей кто-то за вас уже когда-то написал, осталось это только подключить и использовать.

  • Во-вторых, говоря про скорость: у каждого пакета могут быть свои зависимости (по 2-3), а в проекте, например, 100 зависимостей. Вместо 100 у вас устанавливается 300: 100 основных пакетов и их зависимостей. Может быть долго!

  • В-третьих, пакеты соблюдают Семвер — семантичное версионирование. Дело в том, что пакеты обновляются, а ломать работающие приложения из-за этого не хочется, поэтому у нас есть версионирование MAJOR.MINOR.PATCH (например, Реакт сейчас — 16.0.0). npm раньше не уважал прописанные в package.json версии и порою всё ломалось. В Ярне такого нет изначально.

Пакеты проекта в джс-мире описываются в файле package.json в секциях dependencies и devDependencies.

dependencies

Все зависимости, которые используются в приложении: Реакт, normalize.css, готовая адаптивная сетка flexboxgrid2.

devDependencies

Зависимости, которые помогают работать приложению: Стайллинт или тот же ПостЦСС.

Как поставить Ярн? Описано в документации.

Как использовать пакетный менеджер? Как и brew из Макоси! yarn add [название пакета], например, yarn add react установит Реакт последней версии и сохранит его в package.json.

Команда yarn (сокращенно от yarn install) установит все зависимости, которые указаны в package.json.

Окей, Ноду поставили, с пакетным менеджером разобрались, теперь нужно поставить ПостЦСС и настроить его на работу с цсснекст.

Сначала нужно выполнить команду yarn init: она создаст файл package.json, в котором будут указаны настройки проекта.

После — читаем установку цсснекст: нам нужно поставить две зависимости postcss и postcss-cssnext через команду

npm install postcss postcss-cssnext

Нпм нас, конечно, мало интересует, поэтому мы будем сразу ставить через Ярн и в devDeps:

yarn add --dev postcss postcss-cssnext

Ярн установит и сохранит в package.json:

{
  ...
  "devDependencies": {
    "postcss": "6.0.15",
    "postcss-cssnext": "3.0.2"
  }
  ...
}

Окей! В документации сказано, что можно использовать разными способами, но нас интересует CLI (command line interface): мы будем запускать в Терминале.

Для этого нам нужно поставить postcss-cli (да, ссылка на нпм, хоть и будем ставить через Ярн — потому что Ярн использует базу нпма).

yarn add --dev postcss-cli

Затем создаём файл postcss.config.js (ваш первый опыт с джсом!) и пишем там:

module.exports = {
  plugins: [
    require('postcss-cssnext')()
  ]
}

Про module.exports и require() мы поговорим позже.

Окей, теперь нужно проверить, что всё работает. У нас будут файлы styles/style.css и build/styles/style.css — во втором будет наш ЦСС, скомпилированный через ПостЦСС и цсснекст.

postcss [input.css] [OPTIONS] [-o|--output output.css] [-w|--watch]

Наша команда будет выглядеть так:

yarn postcss styles/style.css --output build/styles/style.css --watch

Что за --watch? postcss-cli будет перезапускаться на каждое изменение файлов. Без --watch будет один раз компилироваться.

Итог

Мы узнали про будущий ЦСС и как его заставить работать уже сегодня: через ПостЦСС и цсснекст.

Задание

Прочитайте фичи цсснекст и переводите свои стили на будущий ЦСС.