Day 15: How to use CSS Variables

Today’s lesson is all about CSS variables, also known as custom properties. If you’ve ever had to update colors, sizes, or fonts across an entire stylesheet, you know how tedious it can be to do it manually. This is where CSS variables come in – they allow you to define reusable values in one place and use them throughout your stylesheet. Let’s dive in!

What Are CSS Variables?

A CSS variable is essentially a reusable value that you define using custom properties, which start with two dashes -- followed by the property name. For example:

:root {
  --primary-color: #3498db;
  --font-size: 16px;
}

In the above code, --primary-color and --font-size are custom properties defined under the :root selector, which refers to the entire document. The :root is a pseudo-class that represents the highest level of the DOM, making the variables accessible anywhere in your CSS.

How to Use CSS Variables

Once you’ve defined a variable, you can use it anywhere in your CSS by calling it with the var() function.

body {
  color: var(--primary-color);
  font-size: var(--font-size);
}

This allows you to use consistent styles across your project, and if you ever need to make changes, you only have to update the variable’s value.

CSS variables are not limited to colors and fonts. You can use them for any CSS property, including margins, paddings, widths, or even complex gradients.

:root {
  --border-radius: 10px;
  --box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
}

.button {
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

Benefits of CSS Variables

1. Easier Maintenance: Update a single value, and it will reflect everywhere across your stylesheet.
2. Theme Customization: Quickly switch between themes (e.g., light and dark modes) by changing the variables. This means you can change the entire theme by just adjusting a few values.
3. Reusability: Define values like colors, fonts, and sizes once and use them throughout your styles. This promotes DRY (Don’t Repeat Yourself) principles in CSS.
4. Dynamic Changes with JavaScript: CSS variables are live and can be manipulated in real time with JavaScript to create interactive or responsive designs. For example:

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

This code dynamically changes the value of --primary-color to a different color using JavaScript.

Advanced Usage

Fallback Values

You can apply fallback values for browsers that don’t support CSS variables or in cases where a variable isn’t defined:

background-color: var(--secondary-color, #f1f1f1);

Here, if --secondary-color isn’t defined, the background will default to #f1f1f1. This is useful for ensuring compatibility and making your code more robust.

Scoped Variables

CSS variables can also be scoped to specific elements, giving you fine control over their usage. You don’t always have to define them in :root.

.card {
  --card-padding: 20px;
}

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

In this case, --card-padding only applies to .card elements, which adds another layer of flexibility to your CSS structure.

Variable Inheritance

CSS variables are inherited, meaning child elements will inherit their parent’s variables unless they are overwritten. This makes them perfect for creating consistent and easily modifiable design systems.

.container {
  --container-bg: #fafafa;
}

.card {
  background-color: var(--container-bg);
}

If --container-bg is modified at the .container level, all .card elements within will automatically update, maintaining consistency.

Conclusion

CSS variables make your stylesheets cleaner, easier to maintain, and more flexible. They can be a game-changer in projects of any size, allowing for dynamic theming and reusable values throughout your CSS code. Whether you’re working on a small personal project or a large-scale application, CSS variables help streamline the development process, ensuring consistency and reducing the need for repetitive code.

Embrace the power of CSS variables and take your web designs to the next level!

Happy coding!