Як я використовую PostCSS

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 швидко і якісно. Нижче список плагінів, які я використовую:

Autoprefixer

Плагін парсити ваш CSS код і додає до нього всі необхідні вендорные префікси.

Було:

:fullscreen a {
display: flex
}


Стало:

:-webkit-full-screen a {
display: -webkit-box;
display: -webkit-flex;
display: flex
}

:-moz-full-screen a {
display: flex
}

:-ms-fullscreen a {
display: -ms-flexbox;
display: flex
}

:fullscreen a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}


Center

Додає CSS властивості, що дозволяють з легкістю центрувати будь-який елемент.

Було:

.foo {
top: center;
left: center;
}


Стало:

.foo {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}


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 Nano

Вкрай потужний інструмент для минификации CSS коду, що йде на продакшен.

Discard Comments

Видаляє всі коментарі з CSS коду. Раніше з цим завданням відмінно справлявся плагін CSS Nano, однак після оновлення PostCSS до версії 5.0.x ця можливість перестала працювати. Сподіваюся, цю проблему найближчим часом розробники виправлять.

Focus

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

Було:

.button:hover {
background: red;
}


Стало:

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


Media Minmax

Плагін, який спрощує написання min-width і max-width CSS властивостей.

Було:

@media screen and (width >= 500px) and (width <= 1200 px) {
.bar {
display: block;
}
}


Стало:

@media screen and (min-width: 500px) and (max-width: 1200 px) {
.bar {
display: block;
}
}


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.25 em 1.5 .05em;
}

.section.inset {
margin: * auto;
}


Стало:

.section {
margin: 40px;
color: dimgrey;
font-weight: bold;
text-align: center;
text-transform: uppercase;
font-size: 1.25 em;
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/.

Установка
Перед установкою генератора вам потрібно мати на своєму комп'ютері встановлені:


Якщо у вас вже все вищеперелічене встановлено, запустіть наступну команду в терміналі для глобальної установки генератора:

$ 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

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.