Global vs scoped style strategies in Svelte - Hands-On Comparison

Global vs Scoped Style Strategies in Svelte

📖 Scenario: You are building a simple Svelte app with two components. One component should have styles that only apply inside it (scoped styles). The other component should have styles that apply globally across the whole app.

🎯 Goal: Create two Svelte components: ScopedButton.svelte with scoped styles and GlobalButton.svelte with global styles. Then use both components in App.svelte to see how styles behave differently.

📋 What You'll Learn

Create a ScopedButton.svelte component with a button styled using scoped CSS

Create a GlobalButton.svelte component with a button styled using global CSS

Use both components inside App.svelte

Observe how scoped styles affect only their component and global styles affect the whole app

💡 Why This Matters

🌍 Real World

Web developers often need to style components so that some styles stay inside a component and others apply globally. This helps keep apps organized and prevents style conflicts.

💼 Career

Understanding scoped vs global styles is essential for frontend developers working with Svelte or similar frameworks to build maintainable user interfaces.

1

Create ScopedButton.svelte with scoped styles

Create a Svelte component file named ScopedButton.svelte. Inside it, add a <button> element with the text Scoped Button. Add a <style> block with scoped CSS that sets the button's background color to lightblue and text color to darkblue. Use normal scoped styles (no global keyword).

Svelte

Scoped Button


  /* Add scoped styles here */

Hint

Remember, styles inside <style> in Svelte are scoped by default. Just write normal CSS targeting the button.

2

Create GlobalButton.svelte with global styles

Create a Svelte component file named GlobalButton.svelte. Inside it, add a <button> element with the text Global Button. Add a <style> block with CSS that sets the button's background color to lightgreen and text color to darkgreen. Use the :global() selector so these styles apply globally.

Svelte

Global Button


  /* Add global styles here using :global() */

Hint

Use :global(selector) in Svelte styles to make CSS rules apply globally.

3

Use both buttons in App.svelte

In App.svelte, import ScopedButton and GlobalButton components. Add both components inside the main markup so they render one after the other.

Svelte

  // Import components here



  

Hint

Use import statements to bring components into App.svelte. Then add them as tags inside the markup.

4

Add global style to App.svelte for body background

In App.svelte, add a <style> block. Inside it, add a global style using :global(body) that sets the background color to #f0f0f0. This style should apply to the whole page.

Svelte

  import ScopedButton from './ScopedButton.svelte';
  import GlobalButton from './GlobalButton.svelte';



  
  



  /* Add global body background color here */

Hint

Use :global(body) in the style block to apply styles to the whole page body.

Practice

1. In Svelte, what does it mean when styles are scoped by default?

easy

A. Styles apply globally to all components in the app.

B. Styles apply only to the current component, not affecting others.

C. Styles are ignored unless marked as global.

D. Styles must be written in a separate CSS file.

Solution

1. Step 1: Understand Svelte's default style behavior

   Svelte automatically scopes styles to the component they are written in, preventing them from affecting other components.

2. Step 2: Compare with global styles

   Global styles affect the entire app, but Svelte requires explicit marking for global styles, so default is scoped.

3. Final Answer:

   Styles apply only to the current component, not affecting others. -> Option B

4. Quick Check:

   Scoped styles = component-only styles [OK]

Hint: Remember: Svelte isolates styles by default [OK]

Common Mistakes:

• Thinking styles apply globally without marking
• Confusing scoped with global styles
• Assuming styles must be external

2. Which of the following is the correct way to write a global style inside a Svelte component's <style> block?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify how to mark global styles in Svelte

   Svelte uses the :global() pseudo selector inside the style block to mark styles as global.

2. Step 2: Check each option

   is scoped by default. uses an invalid attribute. mixes scoped attribute (not valid) with :global(). Only correctly uses :global().

3. Final Answer:

   <style> :global(.btn) { color: red; } </style> -> Option A

4. Quick Check:

   Use :global() for global styles inside <style> [OK]

Hint: Use :global() inside style block for global CSS [OK]

Common Mistakes:

• Using invalid <style> attributes like global or scoped
• Forgetting to wrap selectors in :global()
• Assuming all styles are global by default

3. Given this Svelte component code, what color will the <h1> text be?

<script>
  let active = true;
</script>

<style>
  h1 { color: blue; }
  :global(h1) { color: red; }
</style>

<h1>Hello</h1>

medium

A. Red

B. Black (default)

C. Blue

D. Both blue and red, causing a gradient

Solution

1. Step 1: Understand style precedence in Svelte

   The scoped style h1 { color: blue; } compiles to something like h1.svelte-abc { color: blue; } which has higher specificity. The :global(h1) { color: red; } compiles to h1 { color: red; }.

2. Step 2: Determine final color

   Both rules apply to the component's h1, but the scoped rule has higher specificity (element + class vs element only), so the text will be blue.

3. Final Answer:

   Blue -> Option C

4. Quick Check:

   Scoped styles have higher specificity than plain global styles [OK]

Hint: Scoped styles have higher specificity than global styles [OK]

Common Mistakes:

• Thinking global styles override scoped styles
• Assuming global styles have higher specificity
• Ignoring the unique class added by Svelte scoping

4. You wrote this Svelte style block but the global style is not applying:

<style>
  global(.title) { font-weight: bold; }
</style>

What is the error and how to fix it?

medium

A. Wrap the style block in a <global> tag instead of <style>.

B. Add the attribute global to the style tag like <style global>.

C. No error; the style will apply globally as written.

D. Use :global(.title) instead of global(.title) to apply global styles.

Solution

1. Step 1: Identify the syntax for global styles in Svelte

   Svelte requires the :global() pseudo selector inside the style block to mark styles as global, not just global().

2. Step 2: Correct the syntax

   Replace global(.title) with :global(.title) to apply the style globally.

3. Final Answer:

   Use :global(.title) instead of global(.title) to apply global styles. -> Option D

4. Quick Check:

   Global styles need :global() syntax [OK]

Hint: Use :global() not global() inside style block [OK]

Common Mistakes:

• Using global() instead of :global()
• Trying to add global attribute to style tag incorrectly
• Assuming styles are global by default

5. You want to apply a global font style to all paragraphs in your Svelte app but keep button styles scoped. Which approach is correct?

hard

A.

B.

C.

D.

Solution

1. Step 1: Identify how to apply global styles selectively

   To make paragraph styles global, wrap the selector in :global(). Button styles remain scoped by default.

2. Step 2: Evaluate each option

   applies both styles scoped (not global). correctly applies global to paragraphs only. uses invalid global attribute. incorrectly makes button styles global.

3. Final Answer:

   <style> :global(p) { font-family: Arial; } button { color: blue; } </style> -> Option A

4. Quick Check:

   Use :global() only on selectors needing global scope [OK]

Hint: Wrap only global selectors with :global() [OK]

Common Mistakes:

• Making all styles global unintentionally
• Using invalid style tag attributes
• Forgetting :global() for global styles