Scoped Styles

In React, you have to opt in to style scoping — CSS Modules, styled-components, Emotion, Tailwind, or some other mechanism. In Svelte, scoping is the default. Every <style> block is automatically scoped to its component at compile time. You write plain CSS class names like .card and they cannot leak into or collide with any other component.

React approach: CSS Modules

// Card.jsx
import styles from './Card.module.css';
// .card in Card.module.css becomes .card_abc123 at build time

export default function Card({ title, body }) {
  return (
    <article className={styles.card}>
      <h2 className={styles.title}>{title}</h2>
      <p>{body}</p>
    </article>
  );
}

<!-- Card.svelte -->
<script>
  let { title, body } = $props();
</script>

<article class="card">
  <h2 class="title">{title}</h2>
  <p>{body}</p>
</article>

<style>
  /* These class names are scoped to Card.svelte automatically */
  .card { border: 1px solid #e2e2e2; border-radius: 8px; padding: 1rem; }
  .title { margin: 0 0 0.5rem; font-size: 1.25rem; color: #FF3E00; }
</style>

Under the hood, Svelte compiles the <style> block by adding a unique attribute (like data-v-abc123) to every element and qualifying each selector: .card[data-v-abc123]. The compiled output is safe from collisions, just like CSS Modules — but you write zero boilerplate.

The class: directive

Svelte has a shorthand for toggling a class based on a condition — the class: directive:

function Alert({ message, isError }) {
  return (
    <div className={`alert ${isError ? 'alert--error' : ''}`}>
      {message}
    </div>
  );
}

<script>
  let { message, isError } = $props();
</script>

<!-- class:error is added when isError is truthy -->
<div class="alert" class:error={isError}>
  {message}
</div>

<style>
  .alert { padding: 0.75rem 1rem; border-radius: 6px; background: #f0f0f0; }
  .error { background: #fee2e2; color: #b91c1c; border: 1px solid #f87171; }
</style>

The class:name={condition} directive keeps your template clean — no template literals, no clsx/classnames library needed for simple cases.

Try it: themed card component

SvelteOpen in Svelte Playground ↗ (copies code)

<script>
  let variant = $state('default');
</script>

<div class="card" class:success={variant === 'success'} class:danger={variant === 'danger'}>
  <p>Current variant: <strong>{variant}</strong></p>
  <div class="buttons">
    <button onclick={() => (variant = 'default')}>Default</button>
    <button onclick={() => (variant = 'success')}>Success</button>
    <button onclick={() => (variant = 'danger')}>Danger</button>
  </div>
</div>

<style>
  .card {
    padding: 1.25rem;
    border-radius: 8px;
    border: 2px solid #ccc;
    background: #f9f9f9;
    font-family: sans-serif;
    transition: background 0.2s, border-color 0.2s;
  }
  .card.success { background: #f0fdf4; border-color: #22c55e; color: #15803d; }
  .card.danger  { background: #fef2f2; border-color: #ef4444; color: #b91c1c; }
  .buttons { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
  button { padding: 0.3rem 0.75rem; cursor: pointer; border-radius: 4px; border: 1px solid #ccc; }
</style>

🔀 React CSS Modules / styled-components vs Svelte scoped style

React has no built-in style scoping — you must choose CSS Modules, CSS-in-JS, or Tailwind. Svelte scopes <style> blocks automatically with zero config.
React CSS Modules: import styles from './Foo.module.css', then className={styles.foo}. Svelte: class="foo" — no import, no object property access.
React conditional classes: template literals or the clsx/classnames library. Svelte: class:name={condition} directive built in.
Both approaches generate unique, collision-safe selectors at build time — the user-facing result is identical.
Global override in Svelte: use :global(.selector) inside the <style> block when you intentionally need to reach outside the component scope.
Dynamic styles that depend on runtime values (e.g., drag position) still use style="..." or CSS custom properties in both React and Svelte.