Tutorials CSS CSS Variables & Best Practices

Introduction to CSS

What is CSS? CSS Selectors

Colors & Backgrounds

CSS Colors Backgrounds

Text & Fonts

Text Styling Web Fonts

Box Model

The Box Model Display & Positioning

Layout

Flexbox CSS Grid

Responsive Design

Media Queries Units & Sizing

Animations & Effects

Transitions & Transforms CSS Animations

Advanced CSS

Pseudo-classes & Pseudo-elements CSS Variables & Best Practices

CSS Beginner FREE

CSS Variables & Best Practices

Lesson 2 of 16 Beginner Interactive

CSS Custom Properties (variables) let you store and reuse values throughout your stylesheet. They make CSS more maintainable and flexible.

Defining & Using Variables

Define in :root for global scope: --primary: #2563eb;
Use with var(): color: var(--primary);
Provide fallback: var(--primary, #2563eb)
Scope variables to selectors for component-specific values

CSS Specificity Recap

Inline styles: (1,0,0,0) — highest
ID selectors: (0,1,0,0)
Class/attribute/pseudo-class: (0,0,1,0)
Element/pseudo-element: (0,0,0,1)
Universal: (0,0,0,0) — lowest

Organization Best Practices

Use a CSS methodology (BEM, SMACSS)
Group related properties
Use variables for repeated values
Keep specificity low
Use meaningful class names

Syntax

CSS

/* Define Variables in :root */
:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --text: #333333;
    --bg: #ffffff;
    --radius: 8px;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --font-main: "Inter", Arial, sans-serif;
}

/* Use Variables */
body {
    font-family: var(--font-main);
    color: var(--text);
    background: var(--bg);
}

.btn {
    background: var(--primary);
    border-radius: var(--radius);
    padding: var(--spacing-sm) var(--spacing-md);
    box-shadow: var(--shadow);
}

.btn:hover {
    background: var(--primary-dark);
}

/* Override for dark mode */
.dark {
    --text: #ffffff;
    --bg: #1e293b;
    --primary: #60a5fa;
}

CSS Custom Properties

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Custom Properties</title>
    <style>
        :root {
            --primary: #3b82f6;
            --secondary: #10b981;
            --danger: #ef4444;
            --radius: 8px;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .button {
            background: var(--primary);
            color: #fff;
            padding: 12px 24px;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            display: inline-block;
        }
        .alert-error {
            background: var(--danger);
            color: #fff;
            padding: 12px;
            border-radius: var(--radius);
        }
        .badge {
            background: var(--secondary);
            color: #fff;
            padding: 4px 12px;
            border-radius: var(--radius);
        }
    </style>
</head>
<body>
    <button class="button">var(--primary)</button>
    <span class="badge">var(--secondary)</span>
    <div class="alert-error">var(--danger)</div>
</body>
</html>

Try It Yourself

Practice

Exercise

Define CSS variables for primary color, font family, and border radius in :root, then use them on a card component.

Answer

:root {
    --primary: #2563eb;
    --font: Arial, sans-serif;
    --radius: 8px;
}
.card {
    font-family: var(--font);
    border-radius: var(--radius);
    border: 2px solid var(--primary);
}

Exercise

Create a dark mode theme by overriding CSS variables on a .dark class.

Answer

:root {
    --bg: #ffffff;
    --text: #333;
}
.dark {
    --bg: #1e293b;
    --text: #ffffff;
}

Quick Quiz

Where should you define global CSS variables?

In the body selector

In the :root pseudo-class

In each element

In a @media query

:root targets the html element and makes variables available globally throughout the document.

What is the correct syntax to use a CSS variable with a fallback?

var(--name)

var(--name, fallback)

var(name, fallback)

--var(--name)

The syntax is var(--name, fallback) where fallback is the default value if the variable is not defined.

Interview Questions

CSS variables are live in the browser — they can be changed with JavaScript, respond to media queries, and cascade through the DOM. Preprocessor variables are compiled to static values and cannot change at runtime. CSS variables also work without a build step and are part of the official CSS spec.

BEM stands for Block__Element--Modifier (e.g., card__title--large). It provides a structured naming convention that prevents CSS conflicts, makes code more readable, and creates a clear relationship between HTML and CSS. It eliminates reliance on deeply nested selectors that cause specificity issues.

Pseudo-classes & Pseudo-elements

Tutorial Complete

Back to CSS