Стили и директива class:

Стили в блоке <style> компонента изолированы (scoped): они действуют только на разметку этого файла. Можно спокойно писать короткие селекторы вроде li или .done — они не заденут другие компоненты.

Изолированные стили

<!-- src/lib/components/TodoItem.svelte -->
<script>
  let { todo } = $props();
</script>
 
<li>{todo.text}</li>
 
<style>
  li {
    padding: 6px 0;
    border-bottom: 1px solid #eee;
  }
</style>

Пункты задач получат отступ и линию снизу, а другие li на сайте останутся прежними. Svelte добавляет к элементам компонента особый класс вида svelte-1x2y3z и дописывает его к селекторам — так стиль и привязывается к файлу.

Директива class:

Чтобы добавлять класс по условию, используйте директиву class:имя={условие}:

<!-- src/lib/components/TodoItem.svelte -->
<script>
  let { todo } = $props();
</script>
 
<li class:done={todo.done}>{todo.text}</li>
 
<style>
  .done {
    text-decoration: line-through;
    color: #999;
  }
</style>

Выполненные задачи будут зачёркнуты и серые. Когда todo.done становится false, класс снимается. Если переменная называется так же, как класс, есть сокращение: class:done.

Класс из выражения

Атрибут class тоже принимает выражение. Удобно, когда класс выбирается из нескольких:

<script>
  let { priority } = $props();
</script>
 
<span class="badge {priority === 3 ? 'high' : 'normal'}">Приоритет {priority}</span>

Элемент всегда получит класс badge и один из классов high или normal.

Встроенные стили: style:

Для отдельного свойства CSS есть директива style::

<script>
  let progress = $state(40);
</script>
 
<div style:width="{progress}%" style:background="green">{progress}%</div>

Полоса займёт 40% ширины. Изменится progress — изменится и ширина.

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

Стили для всего сайта кладут в обычный файл CSS, например src/app.css, и импортируют в корневом макете src/routes/+layout.svelte строкой import '../app.css'; (о макетах — в главе SvelteKit). Внутри компонента отдельный селектор можно сделать глобальным обёрткой :global(...):

<!-- src/routes/+layout.svelte -->
<style>
  :global(body) {
    font-family: system-ui, sans-serif;
  }
</style>

Частая ошибка

Пытаться из родителя оформить элементы внутри дочернего компонента: в +page.svelte написать стиль li { color: red; }, ожидая, что покраснеют пункты из TodoItem. Изолированный стиль родителя не доходит до разметки другого компонента. Оформляйте элементы в том компоненте, где они объявлены, или передайте класс через свойство.