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.

Practice

1. What is the main advantage of using CSS-in-JS patterns in Svelte components?

easy

A. It forces all styles to be global across the app.

B. It requires importing external CSS files for every component.

C. It disables scoped styles by default.

D. Styles stay close to the component's markup and logic, improving maintainability.

Solution

1. Step 1: Understand CSS-in-JS purpose in Svelte

   CSS-in-JS means writing styles inside the component file, close to markup and logic.

2. Step 2: Identify the benefit of this approach

   This closeness improves maintainability by keeping related code together and avoiding global style conflicts.

3. Final Answer:

   Styles stay close to the component's markup and logic, improving maintainability. -> Option D

4. Quick Check:

   CSS-in-JS = Styles close to component [OK]

Hint: Remember CSS-in-JS keeps styles inside components [OK]

Common Mistakes:

• Thinking CSS-in-JS requires external CSS files
• Assuming styles become global automatically
• Confusing scoped styles with global styles

2. Which of the following is the correct way to write scoped CSS inside a Svelte component?

easy

A.

B. h1 { color: red; }

C.

D.

Solution

1. Step 1: Identify correct tag for scoped styles in Svelte

   Svelte uses the <style> tag inside components for scoped CSS by default.

2. Step 2: Eliminate incorrect tags

   <style global> makes styles global, <css> and <script> are invalid for CSS.

3. Final Answer:

   <style> h1 { color: red; } </style> -> Option C

4. Quick Check:

   Scoped CSS uses <style> tag [OK]

Hint: Use <style> for scoped CSS, not

Common Mistakes:

• Using
• Writing CSS inside <script> tags
• Using non-existent <css> tags

3. Consider this Svelte component snippet:

<script>
  let color = 'blue';
</script>

<div style="color: {color};">Hello</div>

What color will the text "Hello" appear as when rendered?

medium

A. Blue

B. Green

C. Black

D. Red

Solution

1. Step 1: Check the variable value

   The variable 'color' is set to 'blue' in the script.

2. Step 2: Understand inline style binding

   The div's style attribute uses {color}, so it applies 'color: blue;'.

3. Final Answer:

   Blue -> Option A

4. Quick Check:

   Inline style uses variable 'color' = blue [OK]

Hint: Inline style uses JS variable value directly [OK]

Common Mistakes:

• Assuming default black color instead of variable
• Confusing CSS property with variable name
• Forgetting to use curly braces for JS in style

4. Identify the error in this Svelte component CSS-in-JS snippet:

<script>
  let bg = 'yellow';
</script>

<div style="background-color: bg;">Box</div>

medium

A. Variable 'bg' should be declared with const, not let.

B. Missing curly braces around 'bg' in style attribute.

C. CSS property 'background-color' is invalid in Svelte.

D. Style attribute must be written inside <style> tag.

Solution

1. Step 1: Check how JS variables are used in inline styles

   JS variables must be wrapped in curly braces inside style attributes to interpolate values.

2. Step 2: Identify the missing curly braces

   The style uses "background-color: bg;" but should be "background-color: {bg};" to apply the variable.

3. Final Answer:

   Missing curly braces around 'bg' in style attribute. -> Option B

4. Quick Check:

   Use {variable} inside style attribute [OK]

Hint: Wrap JS variables in {} inside style attributes [OK]

Common Mistakes:

• Forgetting curly braces for JS in style
• Thinking CSS properties are invalid in Svelte
• Believing style must be only in <style> tag

5. You want to create a Svelte component that changes text color dynamically based on a prop isError. Which approach correctly applies CSS-in-JS to achieve this?

hard

A. <script>
export let isError = false;
</script>

<p style="color: {isError ? 'red' : 'black'}">Message</p>

B. <script>
export let isError = false;
</script>

<p style="color: isError ? 'red' : 'black';">Message</p>

C. <script>
export let isError = false;
</script>

<style>
.error { color: red; }
.normal { color: black; }
</style>

<p class="normal">Message</p>

D. <script>
export let isError = false;
</script>

<style>
p { color: red; }
</style>

<p>Message</p>

Solution

1. Step 1: Understand dynamic inline style syntax in Svelte

   To use JS expressions inside style attributes, wrap them in curly braces.

2. Step 2: Check each option's style usage

   <script>
     export let isError = false;
   </script>
   
   <style>
     .error { color: red; }
     .normal { color: black; }
   </style>
   
   <p class="normal">Message</p>

   uses CSS classes but statically applies class='normal', ignoring the isError prop.

   <script>
     export let isError = false;
   </script>
   
   <p style="color: isError ? 'red' : 'black';">Message</p>

   misses curly braces around JS expression.

   <script>
     export let isError = false;
   </script>
   
   <p style="color: {isError ? 'red' : 'black'}">Message</p>

   correctly uses curly braces with a JS ternary expression inside style attribute.

   <script>
     export let isError = false;
   </script>
   
   <style>
     p { color: red; }
   </style>
   
   <p>Message</p>

   applies static red color always.

3. Final Answer:

   <p style="color: {isError ? 'red' : 'black'}">Message</p> -> Option A

4. Quick Check:

   Dynamic style needs {JS expression} inside style attribute [OK]

Hint: Use {condition ? 'red' : 'black'} inside style attribute [OK]

Common Mistakes:

• Forgetting curly braces for JS in style attribute
• Using static classes instead of dynamic styles
• Applying styles without condition logic