Svelte Styling

Svelte Styling

Quick Start

JS vars in CSS: Use style: directive to set CSS custom properties from JavaScript.

<script>
	let columns = $state(3);
</script>

<div style:--columns={columns}>
	{@render children()}
</div>

<style>
	div {
		display: grid;
		grid-template-columns: repeat(var(--columns), 1fr);
	}
</style>

Styling Child Components

Preferred: Pass CSS custom properties as component props:

<!-- Parent.svelte -->
<Child --color="red" --spacing="1rem" />

<!-- Child.svelte -->
<h1>Hello</h1>

<style>
	h1 {
		color: var(--color, blue);
		margin: var(--spacing, 0);
	}
</style>

Fallback: Use :global when custom properties aren't possible (e.g., library components):

<div>
	<LibraryComponent />
</div>

<style>
	div :global {
		h1 { color: red; }
	}
</style>

Reference Files

• styling-patterns.md - Complete CSS

patterns and techniques

Notes

• All <style> blocks are scoped to the component by default
• Use style: directive, not inline style strings, for dynamic values
• Prefer CSS custom properties over :global for child styling
• Last verified: 2026-03-12

<!-- PROGRESSIVE DISCLOSURE GUIDELINES:

• Keep this file ~50 lines total (max ~150 lines)
• Use 1-2 code blocks only (recommend 1)
• Keep description <200 chars for Level 1 efficiency
• Move detailed docs to references/ for Level 3 loading
• This is Level 2 - quick reference ONLY, not a manual

-->

Svelte CSS Styling Patterns

Scoped Styles

All CSS in <style> is scoped to the component automatically. Svelte adds unique class selectors at compile time.

<!-- This h1 style only affects THIS component -->
<h1>Hello</h1>

<style>
	h1 {
		color: blue;
	}
</style>

style: Directive

Set individual CSS properties dynamically. Prefer over inline style strings.

<script>
	let color = $state('red');
	let size = $state(16);
</script>

<!-- Individual properties -->
<p style:color style:font-size="{size}px">Styled text</p>

<!-- CSS custom properties -->
<div style:--theme-color={color} style:--columns={3}>
	{@render children()}
</div>

<style>
	div {
		background: var(--theme-color);
		grid-template-columns: repeat(var(--columns), 1fr);
	}
</style>

style: vs inline style

<!-- Prefer style: directive -->
<div style:color={textColor} style:font-size="{size}px">Good</div>

<!-- Avoid inline style strings -->
<div style="color: {textColor}; font-size: {size}px">Avoid</div>

Why: style: directives are type-checked, support shorthand, and merge cleanly with static styles.

Shorthand

When variable name matches property name:

<script>
	let color = $state('red');
</script>

<p style:color>Shorthand</p>
<!-- Equivalent to style:color={color} -->

Important modifier

<p style:color|important="red">Override</p>

CSS Custom Properties for Child Components

The preferred way to style child components from a parent.

Basic Pattern

<!-- Parent.svelte -->
<Card --bg="navy" --text="white" --radius="8px" />

<!-- Card.svelte -->
<div class="card">
	{@render children()}
</div>

<style>
	.card {
		background: var(--bg, #fff);
		color: var(--text, #000);
		border-radius: var(--radius, 4px);
	}
</style>

Theming Pattern

<!-- ThemeProvider.svelte -->
<div
	style:--primary={theme.primary}
	style:--secondary={theme.secondary}
	style:--font={theme.font}
>
	{@render children()}
</div>

<!-- Any descendant can use var(--primary) etc. -->

On Elements vs Components

<!-- On elements: sets the property on the element -->
<div style:--color="red">...</div>

<!-- On components: wraps in <div style="--color: red"> -->
<Component --color="red" />

:global Selectors

Override scoped styles. Use sparingly.

Scoped :global (Recommended)

Limit :global to a parent selector scope:

<div class="wrapper">
	<LibraryComponent />
</div>

<style>
	.wrapper :global {
		/* Only affects children of .wrapper */
		h1 {
			color: red;
		}
		.library-class {
			padding: 1rem;
		}
	}
</style>

Inline :global (Use Sparingly)

<style>
	/* Affects ALL h1 elements on the page */
	:global(h1) {
		font-family: serif;
	}

	/* Target a specific global class within scoped context */
	.card :global(.highlight) {
		background: yellow;
	}
</style>

:global Block

<style>
	:global {
		/* Everything here is unscoped — like a regular stylesheet */
		body {
			margin: 0;
		}
	}
</style>

Warning: Unscoped :global affects the entire page. Prefer scoped :global inside a parent selector.

class: Directive

Conditionally apply classes:

<script>
	let active = $state(false);
</script>

<button
	class:active
	class:disabled={!enabled}
	onclick={() => active = !active}
>
	Toggle
</button>

<style>
	.active {
		background: blue;
		color: white;
	}
	.disabled {
		opacity: 0.5;
	}
</style>

Shorthand

When variable name matches class name:

<div class:active>...</div>
<!-- Equivalent to class:active={active} -->

Conditional and Dynamic Styles

Pattern: Theme Switcher

<script>
	let dark = $state(false);
</script>

<div class:dark style:--bg={dark ? '#1a1a1a' : '#fff'}>
	{@render children()}
</div>

<style>
	div {
		background: var(--bg);
		transition: background 0.3s;
	}
</style>

Pattern: Responsive Grid

<script>
	let columns = $state(3);
</script>

<div style:--cols={columns}>
	{#each items as item}
		<div class="cell">{item}</div>
	{/each}
</div>

<style>
	div {
		display: grid;
		grid-template-columns: repeat(var(--cols, 3), 1fr);
		gap: 1rem;
	}
</style>

Best Practices Summary

1. Scoped by default — component <style> only affects that component 2. Use `style:` directive — not inline style strings for dynamic values 3. CSS custom properties — preferred way to style child components 4. Scoped `:global` — always wrap in a parent selector when possible 5. `class:` directive — for conditional class application 6. Avoid broad `:global` — can cause style leaks across the app