TL;DR: Svelte поддерживает три основных подхода к стилизации компонентов — внешние CSS-файлы, scoped-стили через тег
Если в app.css задать h1 { background-color: yellow; }, то в компоненте h1 будет красным — локальные стили в .svelte получают приоритет за счёт действий компилятора.
Плюсы использования style в .svelte:
- Гарантированная изоляция стилей компонента.
- Удобно, когда компонент — автономная единица (библиотека компонентов).
- Меньше шансов поломать соседний UI при рефакторинге.
Ограничения:
- Меньше переиспользуемости классических селекторов (хотя можно экспортировать CSS-переменные и утилиты).
- Иногда требует дублирования общих правил.
Советы:
- Используйте переменные CSS (custom properties) в корневых стилях для передачи темы в изолированные компоненты.
- Всегда тестируйте SSR-сценарии, если используете универсальную сборку.
3. Препроцессоры (Less, Sass, Stylus)
Svelte поддерживает CSS-препроцессоры напрямую через атрибут lang в теге
