CSS-in-JS patterns with Svelte - Step-by-Step Execution

Concept Flow - CSS-in-JS patterns with Svelte

Write Svelte component

↓

Define CSS styles as JS variables

↓

Use style variables inside <style> with :global or scoped

↓

Apply styles dynamically in markup

↓

Component renders with styles applied

↓

Styles update if JS variables change

This flow shows how CSS-in-JS works in Svelte by defining styles in JS and applying them dynamically in the component.

Execution Sample

Svelte

<script>
  let color = 'blue';
  $: style = `color: ${color}; font-weight: bold;`;
</script>

<p style={style}>Hello styled text</p>

This Svelte component sets a color in JS and uses it inside a style attribute to style the paragraph.

Execution Table

Step	Action	JS Variable Values	Style Computed	Rendered Output
1	Initialize color variable	color = 'blue'	style = 'color: blue; font-weight: bold;'	No output yet
2	Render <p> with style attribute	color = 'blue'	style = 'color: blue; font-weight: bold;'	<p style="color: blue; font-weight: bold;">Hello styled text</p>
3	Change color to 'red'	color = 'red'	style = 'color: red; font-weight: bold;'	<p style="color: red; font-weight: bold;">Hello styled text</p>
4	Component updates with new style	color = 'red'	style = 'color: red; font-weight: bold;'	Rendered text color changes to red

💡 Component stops updating when no further changes to color variable occur

Variable Tracker

Variable	Start	After Step 1	After Step 3	Final
color	undefined	'blue'	'red'	'red'
style	undefined	'color: blue; font-weight: bold;'	'color: red; font-weight: bold;'	'color: red; font-weight: bold;'

Key Moments - 2 Insights

Why does changing the 'color' variable update the text color?

Because the 'style' string uses the 'color' variable, when 'color' changes, Svelte re-computes 'style' and updates the DOM style attribute (see execution_table steps 3 and 4).

Can we write CSS normally inside <style> tags and still use JS variables?

No, CSS inside <style> is static. To use JS variables, styles must be in JS strings and applied via attributes or :global selectors (see concept_flow).

Visual Quiz - 3 Questions

Look at the execution_table at step 2. What is the value of the 'style' variable?

A 'color: red; font-weight: bold;'

B 'color: blue; font-weight: bold;'

C 'color: green; font-weight: bold;'

D undefined

💡 Hint

Check the 'Style Computed' column at step 2 in the execution_table.

At which step does the text color change from blue to red?

A Step 3

B Step 4

C Step 1

D Step 2

💡 Hint

Look at the 'Rendered Output' column where the color changes visually.

If we remove the JS variable 'color' and hardcode 'red' in style, what changes in the variable_tracker?

A 'style' variable becomes undefined

B 'color' variable updates dynamically

C 'color' variable disappears, 'style' stays constant

D No change in variables

💡 Hint

Refer to variable_tracker rows showing 'color' and 'style' values.

Concept Snapshot

CSS-in-JS in Svelte:
- Define styles as JS strings using variables
- Apply styles via style attributes or :global selectors
- Changing JS variables updates styles dynamically
- CSS inside <style> tags is static
- Use reactive variables for dynamic styling

Full Transcript

This visual execution shows how CSS-in-JS works in Svelte. We start by defining a color variable in JavaScript. Then we create a style string using that variable. The style string is applied to an HTML element's style attribute. When the color variable changes, Svelte updates the style string and the element's style updates automatically. This pattern lets us write dynamic styles using JavaScript inside Svelte components. Static CSS inside <style> tags cannot use JS variables, so CSS-in-JS uses JS strings and reactive updates instead.