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

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

Scoped стили

Scoped стили — это локальные стили компонента, которые применяются только внутри текущего .svelte файла. Такой подход автоматически предотвращает утечки CSS и гарантирует, что стили одного компонента не затронут другие компоненты.

Пример использования scoped стилей:

<script>
    let active = false;
</script>

<style>
    button {
        background-color: blue;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
    }

    button.active {
        background-color: green;
    }
</style>

<button class:active={active} on:click={() => active = !active}>
    {active ? 'Активен' : 'Не активен'}
</button>

Ключевой момент: SvelteKit автоматически добавляет уникальные атрибуты к каждому компоненту, например data-svelte-hash, что позволяет стилям оставаться изолированными. Это избавляет от необходимости придумывать уникальные классы для каждого компонента.

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

Для глобальных стилей используется специальный синтаксис :global. Он позволяет явно указать, что определённые правила должны применяться во всём приложении, а не ограничиваться локальным компонентом.

Пример глобального CSS внутри компонента:

<style>
    :global(body) {
        margin: 0;
        font-family: 'Arial', sans-serif;
        background-color: #f5f5f5;
    }

    :global(.container) {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }
</style>

<div class="container">
    <h1>Пример глобального стиля</h1>
</div>

Можно также полностью отделять глобальные стили в отдельные файлы и подключать их через +layout.svelte или app.css, чтобы управлять базовыми стилями приложения централизованно. Это удобно для reset CSS, variables и utility classes.

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

Часто возникает необходимость сочетать локальные и глобальные правила. В SvelteKit это реализуется легко, через комбинированное использование обычных селекторов и :global.

<style>
    .card {
        background: white;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    :global(.highlight) {
        border: 2px solid red;
    }
</style>

<div class="card highlight">
    Контент с локальными и глобальными стилями
</div>

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

Использование CSS-переменных

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

<style>
    :global(:root) {
        --primary-color: #3498db;
        --secondary-color: #2ecc71;
    }

    button {
        background-color: var(--primary-color);
        color: white;
        padding: 10px 15px;
        border-radius: 4px;
    }
</style>

<button>Кнопка с переменной</button>

Такой подход позволяет поддерживать единый theme приложения, при этом сохраняя изоляцию локальных компонентов.

Импорт внешних CSS-библиотек

SvelteKit позволяет импортировать глобальные стили сторонних библиотек через Jav * aScript:

// +layout.js
import 'bootstrap/dist/css/bootstrap.min.css';

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

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

  1. Scoped по умолчанию: использовать локальные стили для всех компонентов, чтобы минимизировать CSS-конфликты.
  2. Глобальные стили для базовых правил: reset, variables, typography и layout лучше держать глобально.
  3. Комбинировать с CSS-переменными: локальные компоненты используют глобальные переменные для согласованной цветовой схемы и размеров.
  4. Минимизировать :global в компонентах: глобальные стили лучше централизовать, а не распределять по множеству компонентов.
  5. Импорт внешних библиотек через JS: гарантирует, что глобальные классы подключены один раз и не ломают scoped стили.

Scoped и глобальные стили в SvelteKit создают гибкую систему управления CSS, обеспечивая баланс между изоляцией компонентов и централизованной настройкой внешнего вида всего приложения.

Оглавление