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

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

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

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

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

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

Разделители

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

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

Выходной CSS

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

Градиенты

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

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

Выходной CSS

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

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

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

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

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

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