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

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

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

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

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

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

Разделители

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

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

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

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

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

Выходной CSS

Как видите, первоначальный CSS короче, чище и проще, и результат получается таким же, как обычно.

Градиенты

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

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

Выходной CSS

Мне и другим разработчикам так проще понять, что меняется только направление. Так не нужно сравнивать два объявления градиентов.

Пользовательские CSS-свойства – замечательный способ упростить чтение CSS. Если вы уже используете PostCSS, можно быстро добавить плагин и использовать CSS-переменные без ущерба для поддержки браузера.

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

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

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

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

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

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

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

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree