CSS custom properties (variables) in Svelte - Deep Dive

Overview - CSS custom properties (variables)

What is it?

CSS custom properties, also called CSS variables, let you store values like colors or sizes in a name you create. You can reuse these names throughout your styles, making it easy to change many places by updating just one value. They work like placeholders that CSS understands and replaces when rendering the page. This helps keep your styles organized and consistent.

Why it matters

Without CSS custom properties, changing a color or size used in many places means hunting down every spot and updating it manually, which is slow and error-prone. Custom properties let you update a value once and see the change everywhere instantly. This saves time, reduces mistakes, and makes your website easier to maintain and update.

Where it fits

Before learning CSS custom properties, you should know basic CSS syntax and selectors. After mastering them, you can explore advanced CSS features like calc(), media queries with variables, and CSS preprocessors. In Svelte, understanding how to combine CSS variables with component styles and reactive values comes next.

Mental Model

Core Idea

CSS custom properties are named placeholders for values that CSS replaces when rendering, enabling easy reuse and dynamic styling.

Think of it like...

Think of CSS custom properties like labels on jars in your kitchen pantry. Instead of remembering what’s inside each jar, you just read the label. If you want to change the spice, you swap the contents inside the jar, and every recipe that uses that spice label automatically gets the new flavor.

┌───────────────────────────────┐
│ :root {                      │
│   --main-color: #3498db;     │
│ }                            │
│                               │
│ .button {                    │
│   background-color: var(--main-color);
│ }                            │
└───────────────────────────────┘

Usage flow:
:root defines variable → var() uses variable → styles apply color

Build-Up - 7 Steps

1

Foundation

What Are CSS Custom Properties

Concept: Introduce the idea of CSS variables as named values stored in CSS.

CSS custom properties start with two dashes, like --my-color. You define them inside a selector, often :root for global use. Then you use var(--my-color) to apply the value anywhere in your CSS. For example: :root { --main-bg: lightblue; } body { background-color: var(--main-bg); } This sets the body background to lightblue using the variable.

Result

The page background color becomes lightblue, controlled by the variable --main-bg.

Understanding that CSS variables are just named values you define and reuse helps you see how they simplify styling and avoid repetition.

2

Foundation

Scope and Inheritance of Variables

Concept: Explain how CSS variables inherit and can be scoped to selectors.

Variables defined in :root are global and available everywhere. But you can define variables inside any selector, like a class or element, to limit their scope. For example: .container { --text-color: red; } .container p { color: var(--text-color, black); } p { color: var(--text-color, black); } Here, paragraphs inside .container get red text, others fall back to black.

Result

Text color changes depending on whether the paragraph is inside .container or not.

Knowing that variables follow CSS’s normal inheritance rules lets you create flexible themes and override values locally.

3

Intermediate

Using Variables with Dynamic Values

🤔Before reading on: do you think CSS variables can change based on user interaction or JavaScript? Commit to your answer.

Concept: Show how CSS variables can be updated dynamically with JavaScript or user actions.

CSS variables can be changed at runtime using JavaScript by setting them on elements. For example: const root = document.documentElement; root.style.setProperty('--main-color', 'tomato'); This changes the --main-color variable, and all styles using it update instantly without reloading. In Svelte, you can bind variables to reactive values and update them dynamically.

Result

The color on the page changes immediately when the variable is updated in JavaScript.

Understanding that CSS variables are live values that can be changed dynamically unlocks powerful interactive styling possibilities.

4

Intermediate

Fallback Values and Robustness

🤔Before reading on: do you think CSS variables always have to be defined, or can you provide a backup value? Commit to your answer.

Concept: Teach how to use fallback values with var() to avoid broken styles if a variable is missing.

You can provide a fallback value inside var(), like var(--color, blue). If --color is undefined, blue is used instead. This prevents broken styles and helps with gradual adoption or theming. Example: h1 { color: var(--heading-color, black); } If --heading-color is missing, the text stays black.

Result

The heading text color is black if the variable is not set, avoiding invisible or broken text.

Knowing how to use fallback values makes your CSS more resilient and easier to maintain across different environments.

5

Intermediate

Combining Variables with calc()

Concept: Show how CSS variables can be used inside calc() for dynamic calculations.

You can use variables inside calc() to compute sizes or positions. For example: :root { --base-size: 16px; } p { font-size: calc(var(--base-size) * 1.5); } This sets paragraph font size to 24px by multiplying the base size variable.

Result

Paragraph text appears larger, scaled by the variable value.

Understanding that variables can be part of calculations lets you create flexible, scalable designs.

6

Advanced

CSS Variables in Svelte Scoped Styles

🤔Before reading on: do you think CSS variables behave differently inside Svelte component styles compared to global CSS? Commit to your answer.

Concept: Explain how CSS variables work inside Svelte components with scoped styles and how to use them effectively.

Svelte scopes component styles by default, but CSS variables defined in :root or global styles remain accessible. You can define variables inside a component’s This lets you combine global theming with component-specific overrides.

Result

Component text uses the global variable color, showing how variables cross scope boundaries.

Knowing how CSS variables interact with Svelte’s style scoping helps you build reusable, themeable components.

7

Expert

Performance and Limitations of CSS Variables

🤔Before reading on: do you think CSS variables impact browser performance significantly? Commit to your answer.

Concept: Discuss how browsers handle CSS variables internally, their performance impact, and limitations like no support in media queries (except newer browsers).

Browsers store CSS variables as part of the style cascade and replace var() references at render time. This is efficient but can cause reflows if variables change often. Older browsers don’t support variables in media queries, limiting responsive design options. Also, variables can only store strings, not complex types. Understanding these helps you use them wisely in production.

Result

You gain awareness of when CSS variables are best used and when to avoid them for performance or compatibility.

Knowing the internal handling and limits of CSS variables prevents misuse that can cause bugs or slow rendering.

Under the Hood

CSS custom properties are stored in the browser’s style system as part of the cascade. When the browser renders an element, it looks up the variable’s value by walking up the DOM tree to find the closest definition. The var() function is replaced with the resolved value during style computation. If the variable changes dynamically, the browser recalculates styles and repaints affected elements.

Why designed this way?

CSS variables were designed to fit into the existing CSS cascade and inheritance model, making them flexible and compatible with current CSS. Unlike preprocessors, they work at runtime, allowing dynamic changes without recompiling styles. This design balances power and simplicity, avoiding breaking existing CSS while enabling new capabilities.

┌───────────────┐
│ Element Styles│
│  (var(--x))   │
└──────┬────────┘
       │ lookup
       ▼
┌───────────────┐
│ Parent Styles │
│ --x: red      │
└──────┬────────┘
       │ lookup
       ▼
┌───────────────┐
│ :root Styles  │
│ --x: blue     │
└───────────────┘

Browser uses closest --x value found in cascade for var(--x).

Myth Busters - 4 Common Misconceptions

Quick: do CSS custom properties behave exactly like variables in programming languages? Commit yes or no.

Common Belief: CSS variables work exactly like variables in programming languages, storing values and changing instantly everywhere.

Reality: CSS variables are part of the CSS cascade and inheritance, not isolated memory slots. Their values depend on where they are defined in the DOM tree and can be overridden locally.

Why it matters: Assuming CSS variables behave like programming variables leads to confusion about scope and unexpected style overrides.

Quick: can CSS variables be used inside media queries in all browsers? Commit yes or no.

Common Belief: CSS variables can be used inside media queries everywhere to create responsive designs.

Reality: Support for CSS variables inside media queries is limited and only available in newer browsers. Many browsers ignore variables in media queries, so fallback methods are needed.

Why it matters: Relying on variables in media queries without fallback breaks responsive styles on unsupported browsers.

Quick: do CSS variables improve performance by reducing CSS size? Commit yes or no.

Common Belief: Using CSS variables always makes your website faster because it reduces CSS code size.

Reality: While CSS variables reduce repetition, they add runtime style calculations. In some cases, this can cause slight performance overhead, especially if variables change frequently.

Why it matters: Blindly using variables everywhere without considering performance can cause slower page rendering.

Quick: do CSS variables cascade like normal CSS properties? Commit yes or no.

Common Belief: CSS variables do not follow CSS cascade rules; they are global once defined.

Reality: CSS variables follow the same cascade and inheritance rules as other CSS properties, meaning local definitions override global ones.

Why it matters: Ignoring cascade behavior can cause unexpected styling bugs and difficulty debugging.

Expert Zone

1

CSS variables can be combined with JavaScript and Svelte reactive statements to create powerful theme systems that update instantly without full page reloads.

2

Variables defined in :root are global but can be overridden in nested components or elements, enabling layered theming and context-specific styles.

3

Using CSS variables inside calc() or with color functions like hsl() allows complex dynamic styling that adapts smoothly to user preferences or system settings.

When NOT to use

Avoid CSS variables when targeting very old browsers that lack support, or when you need to store complex data types like objects or arrays. For static styles that never change, traditional CSS properties or preprocessors like Sass may be simpler and more performant.

Production Patterns

In production, CSS variables are often used for theming, allowing users to switch color schemes or font sizes dynamically. They are combined with JavaScript or Svelte stores to react to user preferences. Variables also help maintain consistent spacing and sizing scales across large component libraries.

Connections

Reactive Programming

CSS variables combined with JavaScript or Svelte reactive stores create dynamic, responsive styles that update automatically.

Understanding CSS variables as reactive values helps grasp how UI can respond instantly to user input or data changes without full reloads.

Functional Programming

CSS variables act like pure functions' parameters, where changing input (variable value) changes output (style) predictably.

Seeing CSS variables as inputs to style functions clarifies how changing one value cascades through the system cleanly.

Supply Chain Management

Just like CSS variables centralize values for reuse, supply chains centralize resources to distribute efficiently.

Recognizing the pattern of central control and distributed usage across domains deepens understanding of efficient resource management.

Common Pitfalls

#1 Defining a CSS variable but forgetting to use var() to access it.

Wrong approach:

:root {
--main-color: blue;
}

h1 {
color: --main-color;
}

Correct approach:

:root {
--main-color: blue;
}

h1 {
color: var(--main-color);
}

Root cause:

Confusing variable definition syntax with usage syntax causes styles to ignore the variable.

#2 Using a CSS variable without a fallback when the variable might be undefined.

Wrong approach:

p {
color: var(--text-color);
}

Correct approach:

p {
color: var(--text-color, black);
}

Root cause:

Not providing fallback values leads to broken or invisible styles if the variable is missing.

#3 Trying to use CSS variables inside media queries in unsupported browsers.

Wrong approach:

@media (max-width: 600px) {
body {
background: var(--mobile-bg);
}
}

Correct approach:

@media (max-width: 600px) {
body {
background: #eee; /* fallback color */
}
}

:root {
--mobile-bg: #eee;
}

Root cause:

Assuming full browser support for variables in media queries causes responsive styles to fail.

Key Takeaways

CSS custom properties are named values stored in CSS that let you reuse and update styles easily across your site.

They follow CSS’s normal cascade and inheritance rules, so their values depend on where they are defined in the DOM.

You can update CSS variables dynamically with JavaScript or Svelte reactive code to create interactive, themeable interfaces.

Using fallback values with var() makes your styles more robust and prevents broken appearances when variables are missing.

Understanding browser support and performance implications helps you use CSS variables effectively in real-world projects.

Practice

1. What is the main purpose of CSS custom properties (variables) in a Svelte component?

easy

A. To import external CSS files into the component

B. To write JavaScript code inside CSS

C. To store reusable values that can be changed dynamically in CSS

D. To create new HTML elements automatically

Solution

1. Step 1: Understand CSS custom properties

   CSS custom properties allow you to define variables in CSS that store values like colors or sizes.

2. Step 2: Recognize their use in Svelte

   In Svelte, these variables can be used inside style blocks to reuse and dynamically change styles.

3. Final Answer:

   To store reusable values that can be changed dynamically in CSS -> Option C

4. Quick Check:

   CSS variables = reusable style values [OK]

Hint: CSS variables hold reusable style values [OK]

Common Mistakes:

• Thinking CSS variables run JavaScript
• Confusing CSS variables with importing files
• Believing CSS variables create HTML elements

2. Which of the following is the correct syntax to define a CSS custom property named --main-color with the value blue inside a Svelte component's style block?

easy

A. div { --main-color: blue }

B. style { --main-color = blue; }

C. :root { main-color: blue; }

D. :root { --main-color: blue; }

Solution

1. Step 1: Identify correct CSS variable syntax

   CSS variables start with two dashes and use a colon to assign values, e.g., --main-color: blue;.

2. Step 2: Recognize the proper selector for global variables

   The :root selector defines variables globally in CSS.

3. Final Answer:

   :root { --main-color: blue; } -> Option D

4. Quick Check:

   Correct CSS variable syntax uses colon and double dashes [OK]

Hint: Use :root and colon for CSS variables [OK]

Common Mistakes:

• Using equals sign (=) instead of colon (:)
• Omitting the double dashes (--)
• Defining variable without a selector

3. Given the following Svelte component style and markup, what color will the text inside the <p> tag appear?

<style>
  :root {
    --text-color: red;
  }
  p {
    color: var(--text-color);
  }
</style>

<p>Hello World</p>

medium

A. Red

B. Blue

C. Black

D. Green

Solution

1. Step 1: Check the CSS variable definition

   The variable --text-color is set to red inside :root, making it globally available.

2. Step 2: Check the usage in the p selector

   The paragraph text color is set to var(--text-color), which uses the variable value red.

3. Final Answer:

   Red -> Option A

4. Quick Check:

   CSS variable value = red [OK]

Hint: var(--variable) uses the defined CSS variable value [OK]

Common Mistakes:

• Assuming default black color instead of variable
• Confusing variable name or value
• Ignoring :root scope

4. Identify the error in this Svelte component style block that tries to use a CSS custom property:

<style>
  :root {
    --bg-color: #eee
  }
  div {
    background-color: var(--bg-color);
  }
</style>

medium

A. Missing semicolon after #eee in :root block

B. Incorrect variable name syntax, should not use dashes

C. Cannot use var() inside Svelte style blocks

D. Background color property name is wrong

Solution

1. Step 1: Check CSS syntax in :root block

   CSS requires a semicolon after each property value. The line --bg-color: #eee is missing a semicolon.

2. Step 2: Verify other syntax elements

   Variable name syntax with dashes is correct, var() usage is valid, and property name background-color is correct.

3. Final Answer:

   Missing semicolon after #eee in :root block -> Option A

4. Quick Check:

   CSS properties need semicolons [OK]

Hint: Check for missing semicolons in CSS blocks [OK]

Common Mistakes:

• Forgetting semicolons after CSS declarations
• Thinking variable names can't have dashes
• Believing var() is invalid in Svelte styles

5. In a Svelte component, you want to create a button whose background color changes based on a CSS custom property --btn-bg. You want to allow the parent component to set this variable dynamically. Which approach correctly allows this dynamic styling?

<!-- Child.svelte -->
<script>
  export let bgColor = 'lightblue';
</script>

<button style="background-color: var(--btn-bg);">Click Me</button>

<style>
  button {
    color: white;
  }
</style>

How should the parent component pass the background color to the child using CSS custom properties?

hard

A. Pass bgColor prop and use it directly in the child's style attribute without CSS variables

B. Set --btn-bg on the child component's element using inline style: <Child style="--btn-bg: green;" />

C. Define --btn-bg inside the child's <style> block only

D. Use JavaScript to change the button's background color instead of CSS variables

Solution

1. Step 1: Understand CSS variable scope in Svelte

   CSS custom properties can be set on elements and inherited by children. Setting --btn-bg on the child component's root element allows the child's styles to use it.

2. Step 2: Recognize how to pass CSS variables from parent

   The parent can set the CSS variable via inline style on the child component tag, e.g., <Child style="--btn-bg: green;" />, so the child's CSS picks it up.

3. Final Answer:

   Set --btn-bg on the child component's element using inline style: <Child style="--btn-bg: green;" /> -> Option B

4. Quick Check:

   Pass CSS variables via inline style on component [OK]

Hint: Pass CSS variables via inline style on component tag [OK]

Common Mistakes:

• Trying to set CSS variables only inside child styles
• Ignoring CSS variable inheritance and scope
• Using props without connecting to CSS variables