CSS-in-JS patterns with Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered style output of this Svelte component using CSS-in-JS?

Consider this Svelte component that uses a <style> tag with a dynamic CSS variable:

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

<style>
  div {
    color: var(--text-color);
  }
</style>

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

What color will the text inside the <div> be when rendered?

Svelte

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

<style>
  div {
    color: var(--text-color);
  }
</style>

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

A The text color will be transparent.

B The text color will be black (default).

C The text color will be red.

D The text color will be blue.

💡 Hint

Look at how the CSS variable --text-color is set inline on the div.

The inline style sets the CSS variable --text-color to the value of the color prop, which defaults to 'blue'. The CSS uses this variable for the text color, so the text appears blue.

📝 Syntax

intermediate

Which option correctly applies scoped dynamic styles in Svelte using CSS-in-JS?

You want to apply a dynamic background color to a <button> using CSS-in-JS in Svelte. Which code snippet correctly does this?

A <button style="background-color: {bgColor};">Click me</button>

B <button style="background-color: bgColor;">Click me</button>

C <button style="background-color: ${bgColor};">Click me</button>

D <button style="background-color: var(bgColor);">Click me</button>

💡 Hint

Remember how to insert JavaScript variables inside Svelte attribute bindings.

In Svelte, to use a JavaScript variable inside an attribute, you wrap it in curly braces. So {bgColor} correctly inserts the variable's value. The other options either treat it as a string or use invalid syntax.

🔧 Debug

advanced

Why does this CSS-in-JS style not apply in Svelte?

Given this Svelte component:

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

<style>
  .text {
    color: color;
  }
</style>

<p class="text">Hello</p>

Why is the text color not green?

Svelte

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

<style>
  .text {
    color: color;
  }
</style>

<p class="text">Hello</p>

A The <style> tag must be inside the <script> tag for variables to work.

B The class name 'text' is invalid in Svelte styles.

C CSS cannot use JavaScript variables directly; 'color' is treated as a literal string, not the variable.

D The color variable must be declared as export for CSS to access it.

💡 Hint

Think about how CSS and JavaScript variables interact in Svelte.

CSS inside <style> tags cannot access JavaScript variables directly. The word 'color' in CSS is treated as a literal color name, which is invalid here. To use dynamic colors, you must use inline styles or CSS variables.

❓ state_output

advanced

What is the background color after clicking the button twice in this Svelte CSS-in-JS example?

Consider this Svelte component:

<script>
  import { writable } from 'svelte/store';
  const bg = writable('white');

  function toggle() {
    bg.update(c => c === 'white' ? 'black' : 'white');
  }
</script>

<button on:click={toggle} style="background-color: {$bg};">Toggle</button>

What is the background color of the button after clicking it twice?

Svelte

<script>
  import { writable } from 'svelte/store';
  const bg = writable('white');

  function toggle() {
    bg.update(c => c === 'white' ? 'black' : 'white');
  }
</script>

<button on:click={toggle} style="background-color: {$bg};">Toggle</button>

A black

B white

C gray

D transparent

💡 Hint

Each click toggles the color between white and black.

Starting color is white. First click changes it to black. Second click changes it back to white.

🧠 Conceptual

expert

Which statement best describes CSS-in-JS pattern limitations in Svelte compared to React?

Choose the statement that correctly explains a limitation or difference of CSS-in-JS in Svelte compared to React frameworks.

A Svelte does not support scoped CSS-in-JS libraries like styled-components because styles are compiled separately, requiring inline styles or CSS variables for dynamic styling.

B Svelte fully supports all React CSS-in-JS libraries without any changes because both use virtual DOM.

C Svelte requires all CSS-in-JS to be written inside the <script> tag as JavaScript objects.

D Svelte automatically converts all CSS-in-JS styles into global styles, so scoping is impossible.

💡 Hint

Think about how Svelte compiles components and handles styles differently from React.

Svelte compiles components to efficient JavaScript and CSS. It does not use a virtual DOM or runtime style injection like React. Therefore, popular React CSS-in-JS libraries like styled-components do not work out of the box. Instead, Svelte encourages scoped styles in <style> tags and dynamic styling via inline styles or CSS variables.

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