Глобальные стили

Глобальные стили в SkateJS задают единый визуальный каркас интерфейса и обеспечивают согласованность компонентов без необходимости дублировать правила. Подход фреймворка опирается на веб-компоненты и Shadow DOM, что вносит нюансы в распространение CSS и организацию слоёв стиля.

Глобальный стиль выполняет задачи унификации типографики, цветовой палитры, отступов, сетки и темы. SkateJS допускает использование нативного CSS, препроцессоров и систем токенов. Важные аспекты:

  • Стабильность масштабирования: единая шкала размеров и шрифтов.
  • Минимизация дублирования: переиспользование переменных и кастомных свойств.
  • Совместимость с Shadow DOM: учёт границ видимости стилей и возможность экспорта токенов через :host, :root и CSS Custom Properties.

Глобальные токены и CSS Custom Properties

Базовые значения удобно объявлять на уровне :root, что обеспечивает доступ из любых компонентов:

:root {
  --color-primary: #2b6cb0;
  --color-text: #1a202c;
  --font-base: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
}

Компоненты SkateJS могут применять эти токены внутри Shadow DOM без нарушения инкапсуляции. При необходимости допускается переопределение внутри определённых областей.

Типографика как фундамент глобальной стилистики

Типографическая система в SkateJS формируется из определения базового размера шрифта, высоты строки и набора масштабов. Важен отказ от абсолютных значений в пользу относительных единиц (rem, em), что обеспечивает адаптивность.

Типичная иерархия:

  • Крупные заголовки через font-size на основе умножения базового.
  • Текстовые блоки с жёсткой высотой строки для равномерного вертикального ритма.
  • Регулярные интерлиньяжи в рамках сетки отступов.

Глобальные темы и переключение оформлений

Тёмные и светлые темы реализуются через слой токенов. SkateJS не навязывает формат, но практичным решением становится использование data-theme на контейнере и переопределение CSS Custom Properties:

[data-theme="dark"] {
  --color-primary: #63b3ed;
  --color-text: #e2e8f0;
}

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

Взаимодействие глобального CSS с Shadow DOM

Shadow DOM по умолчанию блокирует внешние стили, что предотвращает случайные перекрытия. Для управления оформлением используются следующие приёмы:

  • Передача токенов: глобальные переменные распространяются сквозь границы теневого дерева.
  • Использование :host: оформление контейнера компонента без уничтожения инкапсуляции.
  • Слоты и светлая разметка: элементы вне Shadow DOM могут наследовать глобальные правила типографики и сетки.

Нормализация и базовое выравнивание стилей

Глобальный слой часто включает сброс стилей браузера, например через normalize.css или ручной набор правил. SkateJS допускает собственный мини-сброс: удаление стандартных margin у заголовков и абзацев, выравнивание box-sizing, унификация шрифтов.

Пример минимального сброса:

html {
  box-sizing: border-box;
  font-size: 14px;
}

*, *::before, *::after {
  box-sizing: inherit;
}

h1, h2, h3, p {
  margin: 0;
}

Система отступов и сетка

Глобальный стиль задаёт логику отступов, обеспечивая предсказуемое поведение компонентов при композиции. Практически всегда используется ограниченный набор значений (--space-1, --space-2, --space-3), создающий модульный ритм.

Для компоновки допускается применение CSS Grid или Flexbox. SkateJS не вмешивается в выбор, но поддерживает использование глобальных utility-классов и кастомных свойств для сеток.

Цветовая модель и состояния

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

Адаптивность и медиамеханика глобального слоя

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

@media (min-width: 768px) {
  :root {
    --font-base: 15px;
    --space-3: 20px;
  }
}

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

Интеграция глобального стиля в проект SkateJS

На практике глобальный стиль подключается через импорт файлов, внедрение в HTML или посредством сборщика. Компоненты SkateJS не должны содержать дублирующих токенов, что сохраняет компактность и единообразие.

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

Оглавление