CSS-in-JS patterns with Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a scoped style inside a Svelte component.

Svelte

<style>[1]
  p {
    color: blue;
  }
</style>

Drag options to blanks, or click blank then click option'

Amodule

Bglobal

Cscoped

Dlocal

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'scoped' or 'local' which are not valid in Svelte style tags.

Using 'global' which applies styles globally, not scoped.

Using module inside the <style> tag scopes the CSS to the component in Svelte.

2fill in blank

medium

Complete the code to apply a dynamic style using a Svelte reactive variable.

Svelte

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

<p style="color: [1]">This text is colored.</p>

Drag options to blanks, or click blank then click option'

A$color

Bcolor

C{color}

D{ $color }

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name without braces.

Using the $ prefix which is for stores, not simple variables.

In Svelte, to use a variable inside an attribute, you wrap it in curly braces like {color}.

3fill in blank

hard

Fix the error in the code to correctly bind a CSS variable to a Svelte component style.

Svelte

<script>
  let bgColor = 'lightblue';
</script>

<div style="--bg: [1]; background-color: var(--bg);">
  Colored box
</div>

Drag options to blanks, or click blank then click option'

A{bgColor}

B{ bgColor }

C$bgColor

DbgColor

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting curly braces.

Using $ prefix which is for stores.

When binding a variable inside a style attribute in Svelte, you need to use curly braces without spaces: {bgColor}.

4fill in blank

hard

Fill both blanks to create a reactive style block that updates the CSS variable when the color changes.

Svelte

<script>
  let color = 'green';
  $: [1] = `--main-color: ${color}`;
</script>

<div style=[2]>
  Dynamic color box
</div>

Drag options to blanks, or click blank then click option'

AstyleString

Bstyle

CstyleString()

DstyleVar

Attempts:

3 left

💡 Hint

Common Mistakes

Using a function call instead of a variable in the style attribute.

Not declaring the reactive variable correctly.

The reactive statement assigns a string to styleString, which is then used in the style attribute of the div.

5fill in blank

hard

Fill all three blanks to create a Svelte component that uses CSS-in-JS with a reactive style and scoped CSS module.

Svelte

<script>
  let size = 100;
  $: [1] = `width: ${size}px; height: ${size}px; background: coral;`;
</script>

<style module>
  .box {
    border-radius: 8px;
    [2]
  }
</style>

<div class=[3] style=[1]>
  Stylish box
</div>

Drag options to blanks, or click blank then click option'

AstyleString

BboxStyle

Cbox

Dcolor: white;

Attempts:

3 left

💡 Hint

Common Mistakes

Not using the CSS module class name correctly.

Forgetting to bind the reactive style variable in the style attribute.

The reactive variable styleString holds inline styles. The scoped CSS module class box is applied to the div. The CSS inside the module adds white text color.

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