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

FAST Element — это библиотека для создания веб-компонентов с высокой производительностью и гибкостью. Одним из ключевых аспектов работы с компонентами является управление стилями. В отличие от обычных CSS-решений, FAST предоставляет мощный механизм для объявления глобальных стилей, которые могут влиять на все компоненты и элементы страницы, сохраняя при этом инкапсуляцию и предсказуемость поведения.

Основы глобальных стилей

Глобальные стили в FAST Element создаются с использованием функции css и объекта FASTElement, но вместо привязки к конкретному компоненту они регистрируются в глобальном пространстве стилей.

import { css, FASTElement } from "@microsoft/fast-element";

const globalStyles = css`
    body {
        margin: 0;
        font-family: "Segoe UI", sans-serif;
        background-color: #f5f5f5;
    }

    h1, h2, h3 {
        font-weight: 600;
        color: #333;
    }

    a {
        color: #0078d4;
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }
`;

FASTElement.defineGlobalStyles(globalStyles);

Ключевые моменты:

  • FASTElement.defineGlobalStyles — метод для регистрации глобальных CSS-правил.
  • CSS, определённый этим способом, применяется ко всей странице, включая компоненты FAST и обычные HTML-элементы.
  • Использование глобальных стилей не ломает инкапсуляцию внутренних стилей компонентов.

Подключение шрифтов и переменных

Глобальные стили позволяют определять CSS-переменные, которые потом могут использоваться внутри компонентов:

const themeStyles = css`
    :root {
        --primary-color: #0078d4;
        --secondary-color: #e5e5e5;
        --font-size-base: 16px;
        --font-family-base: "Segoe UI", sans-serif;
    }
`;

FASTElement.defineGlobalStyles(themeStyles);

Переменные можно использовать внутри любого компонента:

import { html, css, FASTElement } from "@microsoft/fast-element";

const buttonStyles = css`
    button {
        font-family: var(--font-family-base);
        font-size: var(--font-size-base);
        color: var(--primary-color);
        background-color: var(--secondary-color);
        border: none;
        padding: 8px 16px;
        cursor: pointer;
    }

    button:hover {
        background-color: var(--primary-color);
        color: #fff;
    }
`;

Это обеспечивает единый визуальный стиль, который легко масштабировать и поддерживать.

Особенности при работе с компонентами

  1. Приоритет стилей: глобальные стили применяются ко всем элементам, если только внутренние стили компонента не перекрывают их через Shadow DOM.
  2. Shadow DOM: компоненты FAST используют Shadow DOM по умолчанию, что изолирует внутренние стили. Однако глобальные стили могут влиять на элементы вне Shadow DOM и на стилизуемые части компонентов через CSS Custom Properties.
  3. Совместимость: можно комбинировать глобальные стили с библиотеками CSS, такими как Tailwind или Bootstrap, при условии правильного подключения.

Динамическая смена глобальных тем

FAST Element поддерживает динамическое обновление глобальных стилей. Это полезно для реализации темной и светлой темы:

const darkTheme = css`
    body {
        background-color: #1e1e1e;
        color: #f5f5f5;
    }

    a {
        color: #4aa3df;
    }
`;

const lightTheme = css`
    body {
        background-color: #ffffff;
        color: #333333;
    }

    a {
        color: #0078d4;
    }
`;

// Подключение темы
FASTElement.defineGlobalStyles(darkTheme);

// Позднее можно переключить
FASTElement.defineGlobalStyles(lightTheme);

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

Глобальные анимации и переходы

CSS-анимации, определённые в глобальных стилях, могут использоваться во всех компонентах:

const animations = css`
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .fade-in {
        animation: fadeIn 0.5s ease-in-out;
    }
`;

FASTElement.defineGlobalStyles(animations);

Применение класса .fade-in к любому элементу на странице сразу активирует анимацию. Это позволяет централизованно управлять стандартными визуальными эффектами.

Рекомендации по структуре глобальных стилей

  • Разделять базовые стили (body, h1-h6, p, a) и тематические стили (цвета, переменные, шрифты).
  • Использовать CSS-переменные для всех ключевых параметров дизайна.
  • Глобальные анимации и переходы держать в отдельном модуле для удобного переиспользования.
  • Минимизировать использование !important — FAST Element управляет приоритетом через Shadow DOM и CSS-переменные.

Глобальные стили в FAST Element предоставляют гибкий и безопасный способ управления визуальной частью веб-приложений, обеспечивая единообразие и удобство поддержки при масштабировании проектов.

Оглавление