Tutorials
CSS
CSS Variables

CSS Variables

CSS variables, also known as custom properties, let you store values that you can reuse throughout your stylesheet. This makes your CSS more maintainable and easier to update.

What are CSS Variables?

CSS variables are like variables in programming languages. You define them once and use them multiple times. They start with two dashes (–) and are case-sensitive.

:root {
  --primary-color: #007bff;
  --font-size: 16px;
  --spacing: 1rem;
}

Defining Variables

You can define variables in any CSS selector, but it’s common to define them in the :root pseudo-class so they’re available globally.

/* Global variables */
:root {
  --main-bg-color: #f5f5f5;
  --text-color: #333;
  --border-radius: 4px;
}

/* Component-specific variables */
.card {
  --card-padding: 1rem;
}

Using Variables

To use a variable, use the var() function.

body {
  background-color: var(--main-bg-color);
  color: var(--text-color);
}

.card {
  padding: var(--card-padding);
  border-radius: var(--border-radius);
}

Fallback Values

You can provide a fallback value in case the variable isn’t defined.

.element {
  color: var(--text-color, #000); /* Falls back to black if --text-color isn't set */
}

Practical Examples

Theme Colors

Create a color scheme that you can easily change.

:root {
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --danger: #dc3545;
}

.button-primary {
  background-color: var(--primary);
}

.button-secondary {
  background-color: var(--secondary);
}

Spacing System

Define consistent spacing throughout your design.

:root {
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 3rem;
}

.container {
  padding: var(--space-md);
}

.card {
  margin-bottom: var(--space-lg);
}

Responsive Typography

Adjust font sizes based on screen size.

:root {
  --font-size-base: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
}

body {
  font-size: var(--font-size-base);
}

@media (min-width: 768px) {
  body {
    font-size: var(--font-size-lg);
  }
}

@media (min-width: 1200px) {
  body {
    font-size: var(--font-size-xl);
  }
}

Variable Scope

Variables are inherited, so child elements can access parent variables.

.parent {
  --color: blue;
}

.child {
  color: var(--color); /* Uses blue from parent */
}

You can override variables in child elements.

.parent {
  --color: blue;
}

.special-child {
  --color: red;
  color: var(--color); /* Uses red */
}

Using with JavaScript

You can manipulate CSS variables with JavaScript for dynamic theming.

// Get a variable
const rootStyles = getComputedStyle(document.documentElement);
const primaryColor = rootStyles.getPropertyValue('--primary');

// Set a variable
document.documentElement.style.setProperty('--primary', '#ff0000');

Browser Support

CSS variables are supported in all modern browsers:

  • Chrome 49+
  • Firefox 31+
  • Safari 9.1+
  • Edge 16+

For older browsers, you may need to provide fallbacks.

.element {
  color: #333; /* Fallback */
  color: var(--text-color, #333);
}

Best Practices

  1. Use descriptive names: --primary-color instead of --c1
  2. Define global variables in :root
  3. Provide fallbacks for critical styles
  4. Use variables for values that change often
  5. Keep your variable definitions organized

Common Use Cases

  • Themes: Light and dark mode switching
  • Brand colors: Consistent color usage across components
  • Spacing: Standardized padding and margins
  • Typography: Font sizes and line heights
  • Breakpoints: Media query values

External Resources:

Related Tutorials:

Last updated on
Advanced CSS Grid Layout TechniquesCSS Box Model