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.