Пользовательские CSS-свойства – ежедневное использование

Пользовательские CSS-свойства – ежедневное использование

От автора: если коротко: мы используем переменные postcss-css для обработки стилей, чтобы можно было использовать пользовательские CSS-свойства в разработке, сохраняя кроссбраузерность. Похоже, что сейчас пользовательские CSS-свойства (или CSS переменные) просто везде. В сети полно постов, показывающих как, что и каким образом делать, но очень мало примеров повседневного использования. Если у вас нет четкого определения пользовательским свойствам, то на Smashing Magazine есть хорошая статья – пора использовать пользовательские CSS-свойства.

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

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

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

Разделители

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

CSS-код, который пишем мы

:root {
 --gutter: 1rem;

 @media (min-width: 40em) {
 --gutter: 1.5rem;
 }

 @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.5rem;
 }
 h2 {
 margin-bottom: 1.5rem;
 }
}

@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-переменные без ущерба для поддержки браузера.

Источник: https://www.mikestreety.co.uk/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree