CSS классы и переменные

Element Plus использует модульную систему CSS классов, которая построена по принципу BEM (Block Element Modifier). Это обеспечивает читаемость, предсказуемость и лёгкость переопределения стилей. Каждый компонент имеет собственный префикс, соответствующий названию компонента, например:

.el-button { ... }          /* Основной класс кнопки */
.el-button--primary { ... } /* Модификатор для primary-стиля */
.el-button__icon { ... }    /* Вложенный элемент — иконка внутри кнопки */

Ключевые моменты системы классов:

  • el- — общий префикс для всех компонентов.
  • -- — разделитель для модификаторов.
  • __ — разделитель для вложенных элементов внутри компонента.
  • Возможность комбинирования нескольких модификаторов, например: .el-button.el-button--large.el-button--danger.

Переопределение стилей через классы

Для кастомизации внешнего вида компонентов Element Plus используется обычная практика CSS:

.el-button--primary {
  background-color: #409eff;
  color: #fff;
  border-radius: 8px;
}

.el-button.el-button--primary:hover {
  background-color: #66b1ff;
}

Особенности работы:

  • При переопределении желательно использовать точную комбинацию классов, чтобы не нарушить внутренние состояния компонента.
  • Внутренние вложенные элементы можно изменять через __-классы, например:
.el-input__inner {
  padding: 10px;
  font-size: 16px;
}

Система CSS-переменных

Element Plus активно использует CSS-переменные для настройки цветов, размеров, отступов и других визуальных параметров. Это позволяет изменять тему без прямого вмешательства в исходный CSS.

Пример базовых переменных для кнопки:

:root {
  --el-color-primary: #409eff;
  --el-color-success: #67c23a;
  --el-border-radius-base: 4px;
  --el-font-size-base: 14px;
}

Использование в компонентах:

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

Темизация через переменные

Переменные позволяют легко создавать собственные темы. Для этого достаточно определить свои значения в :root или в кастомном классе:

.dark-theme {
  --el-color-primary: #1f2d3d;
  --el-color-success: #2d8cf0;
  --el-border-radius-base: 6px;
}

Затем применить класс к корневому элементу приложения:

<div class="dark-theme">
  <el-button type="primary">Тёмная тема</el-button>
</div>

Приоритет классов и переменных

  1. Локальные модификаторы компонента (.el-button--primary) имеют более высокий приоритет, чем глобальные переменные, если переменная не используется внутри стилей компонента.
  2. Inline-стили перекрывают как классы, так и переменные.
  3. Комбинация классов и переменных позволяет добиться максимально гибкой кастомизации.

Практика работы с кастомными стилями

  • Избегать использования !important, если есть возможность корректно переопределить переменную или класс.
  • Использовать вложенность через SCSS для более структурированного подхода:
.el-button {
  &--primary {
    background-color: var(--el-color-primary);
    &:hover {
      background-color: lighten(var(--el-color-primary), 10%);
    }
  }

  &__icon {
    margin-right: 8px;
  }
}
  • Создавать отдельные файлы для темизации и подключать их через сборщик (Vite, Webpack) для удобного переключения стилей.

Важные переменные Element Plus

Название переменной Описание
--el-color-primary Основной цвет темы
--el-color-success Цвет для успешных действий
--el-color-warning Цвет для предупреждений
--el-color-danger Цвет ошибок
--el-border-radius-base Базовый радиус скругления
--el-font-size-base Основной размер шрифта
--el-padding-base Базовые отступы внутри компонентов

Эти переменные применяются ко всем компонентам и позволяют реализовать единый визуальный стиль приложения без прямой модификации классов компонентов.

Интеграция с динамическими темами

Для динамического изменения темы на лету достаточно изменять CSS-переменные через Jav * aScript:

document.documentElement.style.setProperty('--el-color-primary', '#f56c6c');
document.documentElement.style.setProperty('--el-border-radius-base', '12px');

Компоненты автоматически обновят свой внешний вид без необходимости перерисовки или перезагрузки страницы.

Итоговая структура подхода

  1. Базовые классы — структурная основа для компонента (el-component).
  2. Модификаторы (--) — вариации компонента (цвет, размер, состояние).
  3. Элементы (__) — вложенные части компонента.
  4. Переменные CSS — глобальная настройка цветов, шрифтов, отступов.
  5. Локальные переопределения — тонкая настройка внешнего вида через SCSS или CSS.

Такой подход обеспечивает гибкость, масштабируемость и простоту поддержки интерфейсов, построенных на Element Plus.

Оглавление