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

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

Локальные стили компонентов

Локальные стили привязываются к конкретному компоненту, что позволяет избежать влияния на другие части приложения. В Atomico стили обычно определяются с использованием функции css.

import { c, html, css } from "atomico";

const buttonStyles = css`
    :host {
        display: inline-block;
        padding: 0.5em 1em;
        font-size: 16px;
        cursor: pointer;
        border-radius: 4px;
        background-color: #3498db;
        color: #fff;
        transition: background-color 0.3s;
    }

    :host(:hover) {
        background-color: #2980b9;
    }

    span {
        font-weight: bold;
    }
`;

function Button() {
    return html`
        <span>Нажми меня</span>
    `;
}

Button.styles = buttonStyles;

export default c(Button);

Особенности локальных стилей в Atomico:

  • :host — представляет сам компонент. С помощью этого селектора можно задавать стили для корневого элемента.
  • Изоляция — стили компонента применяются только к нему, даже если существуют одинаковые селекторы в других компонентах.
  • Наследование — локальные стили могут наследовать глобальные свойства, но не влияют на них напрямую.

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

Для общих правил, которые должны применяться ко всему приложению, используются глобальные стили. Atomico предоставляет функцию css.global для определения таких стилей.

import { css } from "atomico";

css.global`
    body {
        margin: 0;
        font-family: "Arial", sans-serif;
        background-color: #f5f5f5;
    }

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

    a {
        text-decoration: none;
        color: inherit;
    }
`;

Ключевые моменты работы с глобальными стилями:

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

Комбинирование глобальных и локальных стилей

Atomico позволяет использовать оба подхода одновременно. Обычно глобальные стили задают базовую визуальную систему, а локальные — уникальные особенности компонентов.

import { c, html, css } from "atomico";

css.global`
    button {
        font-family: "Arial", sans-serif;
        border: none;
        outline: none;
    }
`;

const specialButtonStyles = css`
    :host {
        background-color: #e74c3c;
        color: #fff;
        padding: 0.7em 1.2em;
        border-radius: 6px;
    }

    :host(:hover) {
        background-color: #c0392b;
    }
`;

function SpecialButton() {
    return html`<span>Важно</span>`;
}

SpecialButton.styles = specialButtonStyles;

export default c(SpecialButton);

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

Динамические и условные стили

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

import { c, html, css, useState } from "atomico";

const dynamicStyles = (active) => css`
    :host {
        display: inline-block;
        padding: 0.5em 1em;
        background-color: ${active ? "#2ecc71" : "#e74c3c"};
        color: #fff;
        border-radius: 4px;
        cursor: pointer;
    }
`;

function ToggleButton() {
    const [active, setActive] = useState(false);

    return html`
        <host shadowDom>
            <button oncl ick=${() => setActive(!active)}>
                ${active ? "Активно" : "Неактивно"}
            </button>
        </host>
    `.styles = dynamicStyles(active);
}

export default c(ToggleButton);

Особенности динамических стилей:

  • Можно использовать переменные состояния для изменения внешнего вида.
  • Atomico автоматически обновляет стиль при изменении состояния.
  • Сохраняется изоляция — динамический стиль применяется только к текущему компоненту.

Практические рекомендации

  • Использовать глобальные стили для базовых элементов, сетки и типографики.
  • Использовать локальные стили для компонентов с уникальным оформлением.
  • Применять :host для стилизации корневого элемента компонента.
  • Для компонентов с изменяющимся состоянием применять динамические стили через функции и состояния.
  • Минимизировать конфликты имен через полное использование локальных стилей и селектора :host.

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

Оглавление