Модернизируем CSS с :root

Онлайн инструмент преобразователь CSS в корневые переменные :root для создания гибких и поддерживаемых стилей. Конвертер CSS в :root может правильно выбирать свойства для переменных и избегать конфликтов.

Исходный CSS

Модернизированный CSS

Свойства до: 0

Свойства после: 0

Использование переменных :root в CSS

Переменные CSS, объявленные в :root, позволяют централизованно управлять значениями свойств, что упрощает поддержку и изменение стилей. Однако не все свойства безопасно использовать в качестве переменных. В этой статье мы рассмотрим, какие свойства можно безопасно использовать, а также возможные ошибки и рекомендации.

Что такое :root?

:root - это псевдокласс, который представляет корневой элемент документа (обычно <html>). Переменные, объявленные в :root, доступны во всем документе и могут быть использованы в любом селекторе. 

:root {
 --primary-color: #4CAF50;
 --font-size: 16px;
}

Свойства, безопасно используемые в :root

Ниже приведен список свойств, которые можно безопасно использовать в качестве переменных:

  • Цвета: color, background-color, border-color, outline-color, fill, stroke.
  • Размеры: width, height, padding, margin, font-size, line-height, gap.
  • Тени: box-shadow, text-shadow.
  • Границы: border-radius, border-width, border-style.
  • Прозрачность: opacity.
  • Анимации и переходы: transition, animation, transition-duration, animation-duration.
  • Трансформации: transform (например, для масштабирования или поворота).
  • Flexbox и Grid: flex-basis, grid-gap, grid-template-columns (если значения статичны).
:root {
 --primary-color: #4CAF50;
 --font-size: 16px;
 --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 --border-radius: 8px;
}

.button {
 background-color: var(--primary-color);
 font-size: var(--font-size);
 box-shadow: var(--box-shadow);
 border-radius: var(--border-radius);
}

Свойства, которые не следует использовать в :root

Некоторые свойства не имеют смысла в качестве переменных или могут привести к ошибкам:

  • Позиционирование: position, top, left, right, bottom.
  • Отображение: display, float, z-index.
  • Специфичные свойства: content, flex-grow, flex-shrink, order.
  • Динамические значения: calc(), min(), max() (если они зависят от контекста).
Примечание: Использование этих свойств в качестве переменных может привести к непредсказуемому поведению или ошибкам.

Возможные ошибки и рекомендации

При использовании переменных в :root могут возникнуть следующие ошибки:

  • Конфликт имен переменных: Убедитесь, что имена переменных уникальны и не переопределяют друг друга.
  • Неправильное использование свойств: Не используйте переменные для свойств, которые должны быть уникальными для каждого селектора.
  • Поддержка браузеров: Убедитесь, что браузеры, которые вы поддерживаете, совместимы с CSS-переменными (например, Internet Explorer не поддерживает их).
  • Каскадность: Переменные в CSS каскадные, поэтому их значения могут переопределяться в дочерних элементах. Будьте осторожны с этим.
  • Производительность: Чрезмерное использование переменных для сложных вычислений (например, calc()) может повлиять на производительность.
:root {
 --width: 100%;
}

.header {
 width: var(--width); /* Хорошо */
}

.footer {
 position: var(--width); /* Ошибка: position не должен быть переменной */
}

Пример использования

Рассмотрим пример использования переменных для создания тематических стилей: 

:root {
 --primary-color: #4CAF50;
 --secondary-color: #2196F3;
 --font-size: 16px;
 --spacing: 10px;
}

.button {
 background-color: var(--primary-color);
 color: white;
 padding: var(--spacing) calc(var(--spacing) * 2);
 font-size: var(--font-size);
 border: none;
 cursor: pointer;
 transition: background-color 0.3s ease;
}

.button.secondary {
 background-color: var(--secondary-color);
}

.button:hover {
 background-color: darken(var(--primary-color), 10%);
}

Сравнение подходов к именованию переменных

В зависимости от выбранного подхода, инструмент генерирует переменные с разными именами. Давайте рассмотрим, как это влияет на итоговый CSS.

Уникальные имена (например, --height-2, --width-3)

В этом подходе каждая переменная получает уникальное имя, основанное на свойстве и его значении. Например: 

:root {
 --height-2: 70px;
 --border-7: 1px solid #e5e5e5;
 --color-3: inherit;
}

.tools-content {
 height: var(--height-2);
 border: var(--border-7);
 color: var(--color-3);
}

Преимущества:

  • Имена переменных отражают их назначение, что делает код более понятным.
  • Подходит для проектов, где важна семантика и читаемость.

Недостатки:

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

Группировка по типам (например, --size-1, --color-2)

В этом подходе переменные группируются по типам значений (например, размеры, цвета, границы). Например: 

:root {
 --size-1: 70px;
 --border-1: 1px solid #e5e5e5;
 --color-1: inherit;
}

.tools-content {
 height: var(--size-1);
 border: var(--border-1);
 color: var(--color-1);
}

Преимущества:

  • Более лаконичные имена переменных.
  • Удобно для проектов, где важна компактность кода.
  • Меньше переменных, если значения повторяются.

Недостатки:

  • Имена переменных менее информативны, что может затруднить понимание кода.
  • Требуется больше внимания при использовании, чтобы не перепутать переменные.

Группировка по компонентам (например, --button-bg-color)

В этом подходе переменные группируются по компонентам, к которым они относятся. Например: 

:root {
 --button-bg-color: #4CAF50;
 --button-font-size: 16px;
 --button-padding: 10px 20px;
}

.button {
 background-color: var(--button-bg-color);
 font-size: var(--button-font-size);
 padding: var(--button-padding);
}

Преимущества:

  • Имена переменных отражают их принадлежность к конкретному компоненту.
  • Удобно для проектов с четкой модульной структурой.

Недостатки:

  • Может привести к дублированию переменных, если компоненты используют одинаковые значения.
  • Имена переменных могут стать длинными, если компонентов много.

Группировка по функциональности (например, --color-primary)

В этом подходе переменные группируются по их функциональности. Например: 

:root {
 --color-primary: #4CAF50;
 --size-font-small: 16px;
 --size-padding: 10px 20px;
}

.button {
 background-color: var(--color-primary);
 font-size: var(--size-font-small);
 padding: var(--size-padding);
}

Преимущества:

  • Имена переменных отражают их функциональное назначение.
  • Удобно для проектов, где важна унификация стилей.

Недостатки:

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

Пример сравнения

Рассмотрим, как выглядит один и тот же CSS при использовании разных подходов:

Исходный CSS:

.tools-content {
 height: 70px;
 border: 1px solid #e5e5e5;
 color: inherit;
}

Уникальные имена:

:root {
 --height-2: 70px;
 --border-7: 1px solid #e5e5e5;
 --color-3: inherit;
}

.tools-content {
 height: var(--height-2);
 border: var(--border-7);
 color: var(--color-3);
}

Группировка по типам:

:root {
 --size-1: 70px;
 --border-1: 1px solid #e5e5e5;
 --color-1: inherit;
}

.tools-content {
 height: var(--size-1);
 border: var(--border-1);
 color: var(--color-1);
}

Группировка по компонентам:

:root {
 --tools-content-height: 70px;
 --tools-content-border: 1px solid #e5e5e5;
 --tools-content-color: inherit;
}

.tools-content {
 height: var(--tools-content-height);
 border: var(--tools-content-border);
 color: var(--tools-content-color);
}

Группировка по функциональности:

:root {
 --size-medium: 70px;
 --border-default: 1px solid #e5e5e5;
 --color-inherit: inherit;
}

.tools-content {
 height: var(--size-medium);
 border: var(--border-default);
 color: var(--color-inherit);
}

Адаптивные переменные (например, --media-width)

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

:root {
 --media-width: 100%;
}

@media (max-width: 768px) {
 :root {
 --media-width: 50%;
 }
}

.container {
 width: var(--media-width);
}

Преимущества:

  • Гибкость: Позволяет легко адаптировать стили под различные устройства и условия.
  • Удобство: Упрощает управление отзывчивыми стилями, так как все изменения сосредоточены в одном месте.
  • Поддержка медиа-запросов: Переменные могут изменяться в зависимости от условий медиа-запросов, что делает их мощным инструментом для создания адаптивных дизайнов.

Недостатки:

  • Сложность: Может потребовать больше усилий для настройки и поддержки, особенно в больших проектах.
  • Ограничения: Не все свойства могут быть легко адаптированы с помощью переменных, особенно если они зависят от сложных вычислений.

Рекомендации:

  • Используйте адаптивные переменные для свойств, которые часто изменяются в зависимости от размеров экрана, таких как width, height, padding, margin, и font-size.
  • Избегайте использования адаптивных переменных для свойств, которые не должны изменяться в зависимости от условий медиа-запросов, таких как position, display, или z-index.
/* Исходный CSS */
.container {
 width: 100%;
}

@media (max-width: 768px) {
 .container {
 width: 50%;
 }
}

/* С использованием адаптивных переменных */
:root {
 --media-width: 100%;
}

@media (max-width: 768px) {
 :root {
 --media-width: 50%;
 }
}

.container {
 width: var(--media-width);
}

Какой подход выбрать?

Выбор подхода зависит от ваших предпочтений и требований проекта:

  • Уникальные имена подходят для проектов, где важна читаемость и семантика.
  • Группировка по типам лучше подходит для проектов, где важна компактность и минимизация количества переменных.
  • Группировка по компонентам идеальна для проектов с модульной структурой.
  • Группировка по функциональности подходит для проектов, где важна унификация стилей.
  • Адаптивные переменные идеальны для проектов, где требуется создание отзывчивых и адаптивных интерфейсов, изменяющихся в зависимости от условий медиа-запросов.
Совет: Вы можете переключаться между подходами в интерфейсе инструмента и выбирать тот, который лучше подходит для вашей задачи.

Ещё инструменты

Песочница :nth
Уменьшить CSS онлайн

Версия: 23.03.25