CSS Variables and custom properties

CSS variables, also known as custom properties, provide a powerful way to store and reuse values in your stylesheets. We’ll explore how to create, use, and manipulate custom properties, offering clear explanations, practical code examples, and exercises to help you master this valuable CSS feature.

Introduction to CSS Variables

CSS variables, represented by double hyphens --, allow you to define and store values that can be reused throughout your stylesheet. They provide a level of abstraction, making your code more maintainable, flexible, and consistent.

Creating CSS Variables

To create CSS variables, use the :root selector (which refers to the highest-level parent element, typically the html element) and define your variables within it.

Here, we’ve defined two custom properties, --primary-color and --font-size, along with their initial values.

Using CSS Variables

Once you’ve defined your variables, you can reference and use them within your stylesheet using the var() function.

For example, to apply the primary color to a button’s background:

Using CSS variables enhances maintainability, as changes to the variable values propagate throughout your styles, ensuring consistency.

Benefits of CSS Variables

CSS variables offer several advantages:

1. Reusability: You can reuse values across your stylesheet, making it easier to maintain and update your design.
2. Consistency: CSS variables help maintain consistency in your design by ensuring that all instances of a specific value change together when the variable is updated.
3. Readability: They enhance the readability of your CSS by providing descriptive variable names, making your code more self-explanatory.
4. Responsive Design: CSS variables can be dynamically updated using JavaScript, which is beneficial for creating responsive designs.

CSS Variables in Detail

Variable Scope

CSS variables are scoped to the element where they are defined. However, if a variable is not found within a particular scope, the browser will traverse up the DOM tree to the :root element to find the variable. This allows for fine-grained control over variable usage.

Default Values

You can assign default values to CSS variables using the var() function.

For example, if --primary-color is not defined, you can provide a default value:

In this example, if --primary-color is not defined, the button’s background color defaults to #3498db.

Practical Examples

Example 1: Create a Theme

Define custom properties for a light and dark theme, and apply these variables to your stylesheet. Create a button that toggles between the two themes using JavaScript.

Example 2: Dynamic Sizing

Use a CSS variable to control the font size of multiple elements. Create a button that increases the font size when clicked.

Exercises

Exercise 1: Customizing a Website

Take a simple webpage with multiple elements and create a set of CSS variables for its colors, typography, and spacing. Apply these variables to the elements, and use JavaScript to provide users with options to customize the site’s appearance.

Exercise 2: Responsive Typography

Define CSS variables for different font sizes based on screen width. As the screen size changes, update the font size accordingly using media queries and JavaScript.

Browser Compatibility

CSS variables, or custom properties, are supported in modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, be cautious when using them in older browser versions, as they may not support custom properties.

Conclusion

CSS variables, or custom properties, are a valuable addition to your CSS toolkit. They promote reusability, consistency, and maintainability in your stylesheets, allowing you to create dynamic, responsive, and easily customizable web designs. Practice using CSS variables, experiment with different scenarios and see how they can enhance your web development projects.