Користувальницькі CSS-властивості – щоденне використання

2

Від автора: якщо коротко: ми використовуємо змінні postcss-css для обробки стилів, щоб можна було використовувати користувальницькі CSS-властивості в розробці, зберігаючи кросбраузерність. Схоже, що зараз користувальницькі CSS-властивості (або CSS змінні) просто скрізь. В мережі повно постів, показують як, що і яким чином робити, але дуже мало прикладів повсякденного використання. Якщо у вас немає чіткого визначення користувальницьким властивостями, то на Smashing Magazine є гарна стаття – пора використовувати користувальницькі CSS-властивості.

Я працюю в агентстві, де кросбраузерність обов’язкова вимога і включає в себе IE11 (на жаль). Ми не можемо використовувати CSS-змінні в продакшені, але у них є переваги, що дозволяють використовувати їх у розробці і постпроцесі до оригінальних властивостей.

У нас в gulp є завдання на змінні postcss-css, яка змінює все CSS-змінні стилях на задані значення. Майже як SCSS-змінні (в сенсі того, як вони обробляються), але це завдання дозволяє писати менше SCSS і за необхідності видаляти обробку і розгортати стилі з корисними властивостями.

Для всіх прикладів нижче я покажу CSS і те, що ми отримуємо на виході після постобробки.

Роздільники

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

CSS-код, який ми пишемо

:root {
—gutter: 1rem;
@media (min-width: 40em) {
—gutter: 1.5 rem;
}
@media (min-width: 70em) {
—gutter: 2rem;
}
}
div {
padding: var(—gutter);
}
h2 {
margin-bottom: var(—gutter);
}

Вихідний CSS

div {
padding: 1rem;
}
h2 {
margin-bottom: 1rem;
}
@media (min-width: 40em) {
div {
padding: 1.5 rem;
}
h2 {
margin-bottom: 1.5 rem;
}
}
@media (min-width: 70em) {
div {
padding: 2rem;
}
h2 {
margin-bottom: 2rem;
}
}

Як бачите, початковий CSS коротше, чистіше і простіше, і результат виходить таким же, як зазвичай.

Градієнти

Днями мені потрібно було змінити напрямок градієнта на певних розмірах екрану. Щоб не переобъявлять цілий градієнт, я змінив напрям через змінну.

CSS-код, який ми пишемо

div {
—direction: to bottom; // Змінюємо напрямок градієнта на мобільному пристрої
background: linear-gradient(
var(—direction),
rgba(0, 0, 0, 1) 0,
rgba(0, 0, 0, 0.1) 100%
);
@include mq(tablet) {
—direction: to right;
}
}

Вихідний CSS

div {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 1) 0,
rgba(0, 0, 0, 0.1) 100%
);
}
@media (min-width: 70em) {
div {
background: linear-gradient(
to right,
rgba(0, 0, 0, 1) 0,
rgba(0, 0, 0, 0.1) 100%
);
}
}

Мені та іншим розробникам так простіше зрозуміти, що змінюється тільки напрям. Так не треба порівнювати два оголошення градієнтів.

Користувальницькі CSS-властивості – чудовий спосіб спростити читання CSS. Якщо ви вже використовуєте PostCSS, можна швидко додати плагін та використовувати CSS-змінні без шкоди для підтримки браузера.