Стилизация компонентов

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

Создание стилей с помощью `css`

Функция css принимает строку с CSS-кодом и возвращает объект стиля, который можно использовать внутри компонента. Пример:

import { c, css } from 'atomico';

const style = css`
    :host {
        display: block;
        padding: 16px;
        background-color: #f0f0f0;
        border-radius: 8px;
        font-family: Arial, sans-serif;
    }

    h1 {
        color: #333;
        font-size: 24px;
        margin: 0;
    }

    p {
        color: #666;
        line-height: 1.5;
    }
`;

function Card() {
    return (
        <host shadowDom>
            <style>{style}</style>
            <h1>Заголовок</h1>
            <p>Описание содержимого карточки.</p>
        </host>
    );
}

export default c(Card);

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

:host позволяет стилизовать корневой элемент компонента.
Стили внутри css автоматически инкапсулируются, что предотвращает их утечку в глобальный scope.
Поддерживаются псевдоклассы (:hover, :focus) и медиа-запросы.

Динамические стили

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

import { c, useState, css } from 'atomico';

function Button({ primary }) {
    const dynamicStyle = css`
        :host {
            display: inline-block;
            padding: 10px 20px;
            border-radius: 4px;
            background-color: ${primary ? '#007bff' : '#e0e0e0'};
            color: ${primary ? '#fff' : '#333'};
            cursor: pointer;
            transition: background-color 0.3s;
        }

        :host(:hover) {
            background-color: ${primary ? '#0056b3' : '#c0c0c0'};
        }
    `;

    return (
        <host shadowDom>
            <style>{dynamicStyle}</style>
            <slot></slot>
        </host>
    );
}

export default c(Button);

Особенности:

Подстановка значений через шаблонные строки обеспечивает реактивное обновление стилей при изменении пропсов.
Использование :host и псевдоклассов позволяет полностью контролировать внешний вид компонента.

Scoped и глобальные стили

По умолчанию стили в Atomico инкапсулированы благодаря Shadow DOM. Однако можно комбинировать локальные и глобальные стили. Глобальные стили подключаются через обычные теги <style> вне Shadow DOM или через импорт CSS-файлов:

import { c } from 'atomico';
import './global.css';

function Layout() {
    return (
        <host>
            <div class="container">
                <slot></slot>
            </div>
        </host>
    );
}

export default c(Layout);

Работа с CSS-переменными

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

import { c, css } from 'atomico';

const style = css`
    :host {
        --primary-color: #007bff;
        --secondary-color: #6c757d;
        display: block;
        padding: 12px;
        background-color: var(--secondary-color);
        color: #fff;
    }

    button {
        background-color: var(--primary-color);
        border: none;
        color: #fff;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
    }
`;

function ThemedCard() {
    return (
        <host shadowDom>
            <style>{style}</style>
            <button>Нажать</button>
        </host>
    );
}

export default c(ThemedCard);

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

Возможность изменять тему компонентов динамически через CSS-переменные.
Полная интеграция с реактивным подходом для переключения цветов и состояния.

Миксины и композиция стилей

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

const cardMixin = css`
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
`;

const style = css`
    :host {
        ${cardMixin};
        background-color: #fff;
    }

    h2 {
        margin-top: 0;
    }
`;

Особенности:

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

Интеграция с CSS-фреймворками

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

import 'bootstrap/dist/css/bootstrap.min.css';
import { c } from 'atomico';

function Alert({ type }) {
    return (
        <host shadowDom>
            <div class={`alert alert-${type}`} role="alert">
                Важное уведомление!
            </div>
        </host>
    );
}

export default c(Alert);

Особенности интеграции:

Shadow DOM изолирует внутренние стили, но классы глобальных библиотек могут применяться через обычные DOM-элементы внутри компонента.
Позволяет комбинировать мощь Atomico с уже знакомыми фреймворками.

Анимации и переходы

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

import { c, css, useState } from 'atomico';

function FadeBox({ visible }) {
    const style = css`
        :host {
            display: block;
            width: 100px;
            height: 100px;
            background-color: #007bff;
            opacity: ${visible ? 1 : 0};
            transition: opacity 0.5s;
        }
    `;

    return (
        <host shadowDom>
            <style>{style}</style>
        </host>
    );
}

export default c(FadeBox);