Pull to refresh

Как я использую PostCSS

Reading time 4 min
Views 73K
CSS-препроцессоры в своё время значительно облегчали работу по написанию CSS кода. Однако в некотором роде все они были несовершенны и имели значительные изъяны в работе. А потому на смену препроцессорам пришёл постпрепроцессор PostCSS.

Это довольно таки мощный инструмент, облегчающий работу с CSS. Постпрепроцессор уже сегодня используется в таких крупных компаниях как Twitter и Google. Кроме того, по сообщениям разработчиков Bootstap, пятая версия CSS-фреймворка вероятнее всего также будет написана на PostCSS.

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

Для ускорения работы в области фронтэнд веб-разработки я написал собственный Yeoman генератор, который называется generator-alchemist. О нём и о моём процессе разработки интернет-сайтов пойдёт речь в данной статье.

Состав


Jade


jade

Использование шаблонизатора Jade опционально. Yeoman генератор при установке позволяет нам выбрать, хотим ли мы использовать Jade в нашем новом проекте или нет.

После установки пишите свой Jade код в папке /src/jade/ и он будет автоматически компилироваться в HTML.

HTML


HTML Hint

После компиляции Jade, HTML файл попадает в папку /src/html/, где проходит W3C валидацию кода и отправляется в папку /dist/. В том случае, если вы не используете Jade, вы пишите HTML код в папке /src/html/.

CSS


Изначальный CSS файл включает в себя несколько базовых вещей:

Normalize CSS

Grid System

<div class="container">
  <div class="row">
    <div class="col-8">
      Content block
    </div>
    <div class="col-4">
      Right sidebar
    </div>
  </div>
</div>


PostCSS


А вот тут начинается самое интересное. Сборка проекта включает себя большое количество PostCSS плагинов, которые позволяют писать CSS быстро и качественно. Ниже список плагинов, которые я использую:

Clearfix

Добавляет Clearfix аттрибуты для очистки плавающих элементов.

Было:

.foo {
  clear: fix;
}

.bar {
  clear: fix-legacy;
}


Стало:

.foo:after{
  content: '';
  display: table;
  clear: both;
}

.bar {
  clear: fix-legacy;
}

.bar:before,
.bar:after {
  content: '';
  display: table;
}

.bar:after {
  clear: both;
}

.bar {
  zoom: 1;
}


Color Short

Позволяет сокращать названия цветов.

Было:

.hello {
  border-bottom: 1px solid rgb(200);
  background: #20;
  color: #f;
  box-shadow: 0 1px 5px rgba(0, 0.5);
}


Стало:

.hello {
  border-bottom: 1px solid rgb(200, 200, 200);
  background: #202020;
  color: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}


CSS Mqpacker

Группирует медиазапросы и помещает их в конец CSS документа.

CSS Nano

Крайне мощный инструмент для минификации CSS кода, идущего на продакшен.

CSS Next

Позволяет использовать возможности CSS-4 уже сегодня.

О возможностях CSS Next можно прочесть в этой статье.

Discard Comments

Удаляет все комментарии из CSS кода. Раньше с этой задачей отлично справлялся плагин CSS Nano, однако после обновления PostCSS до версии 5.0.x эта возможность перестала работать. Надеюсь, эту проблемы в ближайшее время исправят разработчики.

Focus

Добавляет псеводэлемент :focus ко всем селекторам, где используется :hover.

Было:

.button:hover {
  background: red;
}


Стало:

.button:hover,
.button:focus {
  background: red;
}


PreCSS

Позволяет использовать синтаксис Sass в работе с CSS: вложенность, переменные и многое другое. Подробнее обо всех возможностях PreCSS можно ознакомиться на странице плагина.

Было:

$blue: #056ef0;
$column: 200px;

header {
  background: $blue;
  width: $column;
    h1 {
      font-size: 18px;
    }
}


Стало:

header {
  background: #056ef0;
  width: 200px;
}

header h1 {
  font-size: 18px;
}


PxtoRem

Плагин, генерирующий rem и em из px.

Было:

p {
    font-size: 16px;
}


Стало:

p {
    font-size: 1rem;
}


Short

Ещё один мощный PostCSS плагин, позволяющий сокращать написание CSS кода.

Было:

.section {
  margin: 40px;
  text: bold center uppercase dimgrey 1.25em 1.5 .05em;
}

.section.inset {
  margin: * auto;
}


Стало:

.section {
  margin: 40px;
  color: dimgrey;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.25em;
  line-height: 1.5;
  letter-spacing: .05em;
}

.section.inset {
  margin-right: auto;
  margin-left: auto;
}


Size

Добавляет CSS свойство size для обозначения ширины и высоты элемента.

Было:

.two {
    size: 20px 10px;
}

.one {
    size: 10px;
}


Стало:

.two {
    width: 20px;
    height: 10px;
}

.one {
    width: 10px;
    height: 10px;
}


JavaScript


Uglify

Минифицирует JavaScript код, располагающийся в папке /src/js/ и отправляет минифицированный файл в папку /dist/js/.

Изображения


Imagemin

Минифицирует изображения, которые находятся в папке /src/images/ и отправляет их в папку /dist/images/.

Сервер



Одновременно с запуском Gulp.js вы запускайте локальный сервер с использованием BrowserSync, доступный по адресу:

http://localhost:3000


Установка


Перед установкой генератора вам нужно иметь на своём компьютере установленные:


Если у вас уже всё вышеперечисленное установлено, запустите в терминале следующую команду для глобальной установки генератора:

$ sudo npm install -g generator-alchemist


После чего инициализируйте генератор в папку будущего проекта:

$ yo alchemist


Вот и всё. Все необходимые файлы для старта работы над проектом установлены. Осталось только запустить Gulp:

$ gulp


Пишите ваш Jade / HTML код в папке /src/jade/ или /src/html/
Пишите ваш CSS код в папке /src/css/
Пишите ваш JavaScript код в папке /src/js/
Помещайте ваши изображения в папку /src/images/

И все файлы будут автоматически оптимизироваться публиковаться в папку /dist/, идущую на продакшен.

Спасибо за ваше внимание!

github.com/azat-io/generator-alchemist
Tags:
Hubs:
+17
Comments 29
Comments Comments 29

Articles