Why CSS variables are used - Why It Works This Way

Overview - Why CSS variables are used

What is it?

CSS variables are special names that store values like colors, sizes, or fonts. Instead of writing the same value many times, you write it once as a variable and reuse it everywhere. This makes changing styles easier and faster. They work like placeholders that hold style information.

Why it matters

Without CSS variables, if you want to change a color or size used in many places, you must find and update each spot manually. This is slow and error-prone. CSS variables let you update one place and see the change everywhere instantly. This saves time and keeps websites consistent and easier to maintain.

Where it fits

Before learning CSS variables, you should know basic CSS properties and selectors. After understanding variables, you can learn about CSS preprocessors like Sass or advanced theming techniques that build on variables.

Mental Model

Core Idea

CSS variables store reusable style values that can be changed in one place to update many parts of a webpage.

Think of it like...

Think of CSS variables like labels on jars in your kitchen. Instead of remembering what’s inside each jar, you read the label. If you change what’s inside, the label stays the same, so you always know where to find it.

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

Build-Up - 7 Steps

1

Foundation

What are CSS variables

Concept: Introduce the idea of naming style values to reuse them.

CSS variables are custom properties that start with two dashes, like --main-color. You define them inside a selector, often :root, which means the whole page. Then you use var(--main-color) to apply the value anywhere.

Result

You can write a color once and use it many times by referring to the variable name.

Understanding that CSS variables are just named values helps you see how they simplify style management.

2

Foundation

How to define and use variables

Concept: Learn the syntax for creating and applying CSS variables.

Define variables inside a selector like :root { --color: red; }. Use them with var(--color) in any CSS property, for example, color: var(--color);. This connects the variable name to its value.

Result

The browser replaces var(--color) with the actual value red when showing the page.

Knowing the exact syntax prevents confusion and lets you start using variables immediately.

3

Intermediate

Benefits of reusing variables

🤔Before reading on: Do you think changing a variable updates all uses automatically or only the first one? Commit to your answer.

Concept: Using variables means one change updates all places that use it.

If you use --main-color in many places, changing it once in :root changes all those places instantly. This avoids mistakes and saves time compared to changing each style separately.

Result

Updating one variable changes the look of the entire site consistently.

Understanding this saves you from repetitive work and keeps your design consistent.

4

Intermediate

Variables support dynamic theming

🤔Before reading on: Can CSS variables change based on user actions like dark mode? Commit to yes or no.

Concept: CSS variables can be changed in different parts of the page or with user interaction to create themes.

You can redefine variables inside selectors like body.dark-mode { --main-color: black; }. When the user switches to dark mode, the variable changes and the page updates colors automatically.

Result

The page style changes dynamically without rewriting all CSS rules.

Knowing variables can change based on context unlocks powerful theming and user experience improvements.

5

Intermediate

Variables work with fallback values

Concept: You can provide a backup value if a variable is missing.

Using var(--unknown, blue) means if --unknown is not defined, blue will be used instead. This prevents broken styles if a variable is missing.

Result

Styles stay safe and predictable even if variables are not set.

Understanding fallbacks helps you write more robust and error-proof CSS.

6

Advanced

Variables cascade and inherit naturally

🤔Before reading on: Do CSS variables behave like normal CSS properties with inheritance and cascading? Commit to yes or no.

Concept: CSS variables follow the same rules as other CSS properties for inheritance and cascading.

Variables defined on a parent element are available to its children unless overridden. This means you can set variables on sections or components to customize styles locally.

Result

You get flexible control over styles at different levels of your page.

Knowing variables obey CSS rules lets you design complex, modular styles easily.

7

Expert

Performance and debugging considerations

🤔Before reading on: Do CSS variables affect page load speed or debugging complexity? Commit to your guess.

Concept: Using many variables can impact browser performance and debugging if not managed well.

Browsers resolve variables at runtime, which can slow rendering if overused. Also, debugging styles with variables requires understanding their values and where they are set. Tools like browser DevTools help inspect variable values live.

Result

Proper use balances flexibility with performance and maintainability.

Understanding the tradeoffs helps you write efficient, maintainable CSS in real projects.

Under the Hood

CSS variables are stored as custom properties in the browser's style system. When the browser renders a page, it replaces var() calls with the current value of the variable, following CSS cascade and inheritance rules. This happens dynamically, allowing variables to change based on selectors or user interaction without rewriting CSS.

Why designed this way?

CSS variables were created to solve the problem of repetitive and hard-to-maintain styles. Unlike preprocessors, they work natively in the browser, enabling dynamic changes and better integration with CSS features. The design balances flexibility, performance, and ease of use.

┌───────────────┐       ┌───────────────┐
│ :root         │       │ .button       │
│ --color: red  │──────▶│ color: var(--color)  │
└───────────────┘       └───────────────┘
       ▲                        │
       │                        ▼
  Variable stored          Browser replaces
  in style system         var(--color) with red

Myth Busters - 3 Common Misconceptions

Quick: Do CSS variables work like variables in programming languages, holding values only inside functions? Commit yes or no.

Common Belief: CSS variables behave like programming variables and only exist inside the block where they are defined.

Reality: CSS variables follow CSS cascade and inheritance, so they can be accessed anywhere in the document unless overridden.

Why it matters: Misunderstanding this leads to confusion about why variables work or don't work in certain places, causing bugs.

Quick: Can CSS variables store any CSS property value, including complex ones like animations? Commit yes or no.

Common Belief: CSS variables can store any CSS value, including complex properties like animations or multiple values.

Reality: CSS variables store raw text values and can be used only where the value syntax matches. Some complex properties may not work as expected.

Why it matters: Trying to use variables for unsupported properties causes styles to break or behave unexpectedly.

Quick: Do CSS variables improve page load speed by reducing CSS size? Commit yes or no.

Common Belief: Using CSS variables always makes pages load faster because CSS is smaller.

Reality: Variables can reduce CSS size but add runtime work for browsers to resolve them, which can affect rendering speed if overused.

Why it matters: Assuming variables always improve performance can lead to slow pages if used excessively.

Expert Zone

1

CSS variables can be animated by changing their values with JavaScript or CSS transitions, enabling dynamic visual effects.

2

Variables can be scoped to specific elements or components, allowing modular and reusable style systems.

3

Using variables with calc() allows complex calculations combining fixed values and variables for responsive designs.

When NOT to use

Avoid CSS variables when targeting very old browsers that do not support them (like IE11). For static styles that never change, plain CSS or preprocessors might be simpler. Also, avoid overusing variables for trivial values to prevent performance issues.

Production Patterns

In production, CSS variables are used for theming (dark/light modes), responsive design adjustments, and component libraries where consistent styling is critical. They enable runtime style changes without rebuilding CSS, improving user experience and maintainability.

Connections

Programming Variables

Similar pattern of naming and reusing values

Understanding programming variables helps grasp CSS variables as named placeholders, but CSS variables differ by being part of style inheritance and cascade.

Database Configuration Parameters

Both store reusable settings that affect system behavior

Knowing how configuration parameters centralize control in databases helps appreciate how CSS variables centralize style control.

Supply Chain Management

Both manage reusable resources efficiently across many points

Just like supply chains optimize resource use and updates, CSS variables optimize style reuse and updates across a website.

Common Pitfalls

#1 Defining variables inside a selector but trying to use them outside its scope.

Wrong approach:

:root { --main-color: blue; } .header { color: var(--main-color); } .footer { color: var(--main-color); } /* But --main-color is redefined only inside .header */

Correct approach:

:root { --main-color: blue; } .header, .footer { color: var(--main-color); }

Root cause:

Misunderstanding CSS variable scope and cascade causes variables to be unavailable where expected.

#2 Using variables without fallback values in cases where they might be undefined.

Wrong approach:

color: var(--undefined-color);

Correct approach:

color: var(--undefined-color, black);

Root cause:

Not providing fallback values leads to broken styles if variables are missing.

#3 Overusing variables for every tiny style value, causing performance issues.

Wrong approach:

:root { --padding-small: 0.1rem; --padding-medium: 0.2rem; --padding-large: 0.3rem; } /* used everywhere */

Correct approach:

Use variables for meaningful, reusable values only, not every small detail.

Root cause:

Believing more variables always improve code leads to unnecessary complexity and slower rendering.

Key Takeaways

CSS variables let you name and reuse style values, making your CSS easier to maintain and update.

They follow CSS rules like inheritance and cascade, allowing flexible and dynamic styling.

Using variables reduces repetitive work and helps create themes that change with user preferences.

Variables can have fallback values to keep styles safe if a variable is missing.

Understanding their performance impact and scope helps you use CSS variables effectively in real projects.

Practice

1. Why are CSS variables used in web design?

easy

A. To create animations without JavaScript

B. To add images to a webpage

C. To write HTML code faster

D. To store reusable values like colors and sizes

Solution

1. Step 1: Understand the purpose of CSS variables

   CSS variables hold values such as colors or sizes that can be reused throughout the stylesheet.

2. Step 2: Compare options to the purpose

   Only To store reusable values like colors and sizes correctly describes storing reusable values. Other options describe unrelated tasks.

3. Final Answer:

   To store reusable values like colors and sizes -> Option D

4. Quick Check:

   CSS variables = reusable values [OK]

Hint: CSS variables store values to reuse easily [OK]

Common Mistakes:

• Thinking CSS variables create animations
• Confusing CSS variables with HTML features
• Believing CSS variables add images

2. Which of the following is the correct syntax to declare a CSS variable named --main-color with the value #3498db?

easy

A. body { main-color = #3498db; }

B. :root { --main-color: #3498db; }

C. :root { main-color: #3498db; }

D. body { --main-color = #3498db; }

Solution

1. Step 1: Identify correct CSS variable declaration syntax

   CSS variables are declared with two dashes before the name and a colon to assign the value inside a selector like :root.

2. Step 2: Check each option for syntax correctness

   :root { --main-color: #3498db; } uses :root { --main-color: #3498db; } which is correct. Others use wrong selectors or assignment operators.

3. Final Answer:

   :root { --main-color: #3498db; } -> Option B

4. Quick Check:

   CSS variable syntax = colon and double dash [OK]

Hint: CSS variables start with -- and use colon : [OK]

Common Mistakes:

• Using = instead of : to assign values
• Omitting the double dashes -- before variable name
• Declaring variables outside a selector block

3. What will be the background color of the <div> in this CSS?

:root { --bg-color: lightgreen; } div { background-color: var(--bg-color); }

medium

A. lightgreen

B. white

C. transparent

D. black

Solution

1. Step 1: Understand variable declaration and usage

   The variable --bg-color is set to lightgreen in :root, making it global.

2. Step 2: Check how variable is used in div

   The div uses background-color: var(--bg-color); which applies the variable's value.

3. Final Answer:

   lightgreen -> Option A

4. Quick Check:

   var(--bg-color) = lightgreen [OK]

Hint: var(--name) uses the variable's value [OK]

Common Mistakes:

• Forgetting to use var() to access variables
• Assuming default color if variable is set
• Confusing variable name syntax

4. Identify the error in this CSS code using variables:

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

medium

A. Missing semicolon after variable declaration

B. Variables cannot be used inside p selector

C. Incorrect variable name usage inside var() function

D. Variable names cannot have dashes

Solution

1. Step 1: Check variable declaration syntax

   The variable --text-color is declared correctly except missing semicolon, but CSS allows last property without semicolon.

2. Step 2: Check variable usage syntax

   Inside var(), the variable name must include the double dashes --. Here it is missing.

3. Final Answer:

   Incorrect variable name usage inside var() function -> Option C

4. Quick Check:

   var() needs -- before variable name [OK]

Hint: Use var(--variable-name), include the dashes [OK]

Common Mistakes:

• Omitting -- inside var()
• Thinking semicolon is always required last
• Believing variables can't be used in selectors

5. You want to create a website theme with a main color that can be changed easily. Which approach using CSS variables is best?

hard

A. Declare --main-color in :root and use var(--main-color) everywhere

B. Write the color value directly in every CSS rule

C. Use JavaScript to change colors without CSS variables

D. Create separate CSS files for each color and switch files

Solution

1. Step 1: Understand the goal of easy theme color changes

   Using CSS variables declared in :root allows changing one value to update all uses.

2. Step 2: Evaluate each option for maintainability

   Declare --main-color in :root and use var(--main-color) everywhere uses variables globally, making updates simple. Options B, C, and D are less efficient or more complex.

3. Final Answer:

   Declare --main-color in :root and use var(--main-color) everywhere -> Option A

4. Quick Check:

   Global CSS variables simplify theme changes [OK]

Hint: Use :root variables for easy global changes [OK]

Common Mistakes:

• Hardcoding colors everywhere
• Relying only on JavaScript for styling
• Managing multiple CSS files unnecessarily