Mastering CSS `Custom Properties`: A Comprehensive Guide

Written by

webdevfundamentals

in

In the dynamic realm of web development, maintaining a consistent and easily modifiable design across a website is crucial. Imagine having to change the primary color of your website, not once, but across dozens, or even hundreds, of different CSS rules. Manually updating each instance is not only time-consuming but also prone to errors. This is where CSS Custom Properties, also known as CSS variables, come into play. They provide a powerful mechanism for storing and reusing values throughout your stylesheets, making your code cleaner, more manageable, and significantly easier to maintain. This tutorial will guide you through the intricacies of CSS Custom Properties, equipping you with the knowledge to leverage their full potential.

Understanding CSS Custom Properties

CSS Custom Properties are essentially variables that you define within your CSS. They store specific values, such as colors, font sizes, or any other valid CSS property value, that can then be reused throughout your stylesheet. The primary advantage of using custom properties lies in their ability to centralize values, making global changes incredibly simple. Instead of modifying multiple lines of code, you only need to update the custom property definition, and all instances where that property is used will automatically reflect the change.

Syntax and Structure

CSS Custom Properties are identified by a double hyphen (--) followed by a name. The name is case-sensitive, and it’s best practice to use descriptive names to enhance code readability. Here’s the basic syntax:


:root {
  --primary-color: #007bff; /* Defines a custom property */
  --font-size: 16px;
  --base-padding: 10px;
}

In this example, we’ve defined three custom properties: --primary-color, --font-size, and --base-padding. The :root selector is used to declare these properties, making them available globally throughout your stylesheet. You can also declare custom properties within specific selectors to limit their scope.

Using Custom Properties

To use a custom property, you employ the var() function. This function takes the name of the custom property as its argument. Here’s how you might use the properties defined above:


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

p {
  padding: var(--base-padding);
}

In this example, the h1 element’s text color will be the value of --primary-color (which is #007bff), and its font size will be 16px. The p element will have a padding of 10px.

Scope and Inheritance

Understanding the scope and inheritance of custom properties is critical for effective usage. The scope of a custom property determines where it can be accessed, and inheritance dictates how it’s passed down to child elements.

Global Scope

As demonstrated earlier, defining custom properties within the :root selector makes them globally accessible. This means they can be used anywhere in your stylesheet.


:root {
  --global-background-color: #f8f9fa;
}

body {
  background-color: var(--global-background-color);
}

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

In this example, both the body and .container elements will inherit the --global-background-color property, resulting in a light gray background.

Local Scope

You can also define custom properties within specific selectors. This limits their scope to that particular element and its descendants. This is useful for creating localized styles that don’t affect the entire website.


.sidebar {
  --sidebar-background-color: #343a40;
  background-color: var(--sidebar-background-color);
  padding: 10px;
}

In this case, the --sidebar-background-color property is only accessible within the .sidebar element and its children. Other elements will not be able to access this property unless explicitly defined or inherited from a parent.

Inheritance

Custom properties inherit like other CSS properties. If a custom property is defined on a parent element, its child elements will inherit that property unless it’s overridden. This inheritance behavior is similar to how font styles or colors work.


.parent {
  --text-color: #28a745;
  color: var(--text-color);
}

.child {
  /* Inherits --text-color from .parent */
}

In this example, the .child element will inherit the --text-color property from its parent, resulting in green text. If you define a new --text-color property within the .child element, it will override the inherited value.

Practical Applications and Examples

Let’s explore some practical examples to illustrate how custom properties can be used effectively in web development.

Theme Switching

One of the most common and powerful uses of custom properties is for implementing theme switching. By changing the values of a few custom properties, you can completely alter the look and feel of your website.


:root {
  --primary-color: #007bff;
  --background-color: #ffffff;
  --text-color: #212529;
}

.dark-theme {
  --primary-color: #17a2b8;
  --background-color: #343a40;
  --text-color: #f8f9fa;
}

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

a {
  color: var(--primary-color);
}

In this example, we define properties for a light theme. The .dark-theme class overrides these properties to create a dark theme. You can switch between themes by adding or removing the .dark-theme class from the body element, or by using JavaScript to dynamically change the class based on user preferences.

Responsive Design

Custom properties can also be used to create responsive designs that adapt to different screen sizes. You can use media queries to change the values of custom properties based on the viewport width.


:root {
  --font-size: 16px;
  --padding: 10px;
}

@media (min-width: 768px) {
  :root {
    --font-size: 18px;
    --padding: 15px;
  }
}

In this example, the font size and padding values are increased when the screen width is 768px or wider. This allows you to create a more readable and user-friendly experience on larger screens.

Component Styling

Custom properties are ideal for styling reusable components. By defining properties for colors, sizes, and spacing within a component’s CSS, you can easily customize the appearance of the component without modifying its core styles.


.button {
  --button-color: #ffffff;
  --button-background: #007bff;
  --button-padding: 10px 20px;

  color: var(--button-color);
  background-color: var(--button-background);
  padding: var(--button-padding);
  border: none;
  cursor: pointer;
}

.button:hover {
  --button-background: #0056b3;
}

Here, the .button component uses custom properties for its color, background, and padding. You can easily change the appearance of the button by modifying these properties. For example, if you want to create a secondary button style, you can define a new set of properties and apply them to a different class (e.g., .button-secondary).

Common Mistakes and How to Avoid Them

While CSS Custom Properties are powerful, it’s easy to make mistakes. Here are some common pitfalls and how to avoid them:

Incorrect Syntax

One of the most common mistakes is using the wrong syntax for defining or using custom properties. Remember that custom property names must start with a double hyphen (--) and that you use the var() function to access their values.

Example of incorrect syntax:


/* Incorrect: missing the double hyphen */
.element {
  primary-color: #007bff; /* This is not a custom property */
  color: var(primary-color); /* Incorrect: missing the double hyphen */
}

Correct syntax:


:root {
  --primary-color: #007bff;
}

.element {
  color: var(--primary-color);
}

Scope Issues

Another common mistake is misunderstanding the scope of custom properties. If a property is defined in a more specific selector, it will override a property defined in a broader scope. Make sure you understand where your custom properties are defined and how inheritance works.

Example of scope issue:


:root {
  --text-color: blue;
}

.container {
  --text-color: red; /* Overrides the global --text-color */
  color: var(--text-color);
}

.container p {
  /* Inherits --text-color from .container (red) */
}

Using Custom Properties for Everything

While custom properties are useful, they shouldn’t be used for everything. Overusing them can make your CSS harder to read and maintain. Use them strategically for values that you want to reuse or change easily.

Forgetting Fallback Values

It’s important to provide fallback values for custom properties to ensure your website looks correct in older browsers that don’t support them. You can do this by providing a regular CSS property value before the var() function.

Example:


.element {
  color: blue; /* Fallback value for older browsers */
  color: var(--my-color, blue); /* Uses custom property if available, otherwise uses blue */
}

Step-by-Step Instructions

Let’s walk through a simple example of using custom properties to create a theming system for a website. We will create a light and dark theme, and demonstrate how to switch between them using CSS and JavaScript.

1. Define Custom Properties

First, define the custom properties for your themes. Place these in the :root selector to make them globally accessible.


:root {
  --primary-color: #007bff; /* Light theme primary color */
  --background-color: #ffffff; /* Light theme background color */
  --text-color: #212529; /* Light theme text color */
}

Then, define the custom properties for the dark theme.


.dark-theme {
  --primary-color: #17a2b8; /* Dark theme primary color */
  --background-color: #343a40; /* Dark theme background color */
  --text-color: #f8f9fa; /* Dark theme text color */
}

2. Apply Custom Properties

Use the custom properties in your CSS rules to style your website elements.


body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: sans-serif;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container {
  padding: 20px;
}

3. Implement Theme Switching (CSS)

To switch themes, you can add or remove the .dark-theme class from the body element. For example, to make the site dark by default, you could include the dark theme styles like this:


body {
  /* ... existing styles ... */
}

.dark-theme {
  /* ... dark theme custom properties ... */
}

Or you could use a media query to apply the dark theme based on the user’s system preference:


@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #17a2b8;
    --background-color: #343a40;
    --text-color: #f8f9fa;
  }
}

4. Implement Theme Switching (JavaScript)

You can use JavaScript to toggle the .dark-theme class on the body element based on user interaction (e.g., clicking a button). This is the most flexible approach, allowing for user control over the theme.


<button id="theme-toggle">Toggle Theme</button>
<script>
  const themeToggle = document.getElementById('theme-toggle');
  const body = document.body;

  themeToggle.addEventListener('click', () => {
    body.classList.toggle('dark-theme');
  });
</script>

This JavaScript code adds an event listener to the button. When the button is clicked, it toggles the dark-theme class on the body element, switching between the light and dark themes.

Summary / Key Takeaways

  • CSS Custom Properties, defined with a double hyphen (--), are variables you set within your CSS.
  • Use the var() function to access these properties and apply their values to your styles.
  • Custom properties can have global or local scope, and they inherit like other CSS properties.
  • They are invaluable for theming, responsive design, and styling reusable components, making your code more maintainable and flexible.
  • Remember to use descriptive names, avoid overusing them, and provide fallback values for older browsers.

FAQ

What is the difference between CSS Custom Properties and CSS variables?

There is no difference! CSS Custom Properties and CSS variables are the same thing. They are interchangeable terms used to describe the same feature in CSS.

Can I use custom properties in JavaScript?

Yes, you can both read and set custom properties using JavaScript. The getPropertyValue() method and the setProperty() method can be used to read and set the values of custom properties, respectively.

Are custom properties supported by all browsers?

Custom properties have excellent browser support. They are supported by all modern browsers, including Chrome, Firefox, Safari, Edge, and most mobile browsers. Older versions of Internet Explorer do not support custom properties, so make sure to provide fallback values if you need to support these browsers.

Can I use custom properties in the @import rule?

No, you cannot directly use custom properties within the @import rule. The values of custom properties are resolved at runtime, while the @import rule is processed before the CSS is parsed. However, you can use custom properties within the imported CSS file itself.

Further Exploration

CSS Custom Properties offer a robust and flexible way to manage your styles. By understanding their syntax, scope, and inheritance, you can create more maintainable and adaptable websites. From simple theme changes to complex component styling, custom properties empower you to build more dynamic and user-friendly web experiences. Embrace the power of CSS Custom Properties and unlock new possibilities in your web development projects. This is a crucial skill for modern web developers, a tool that enhances code organization and simplifies the process of making changes across a project. By mastering custom properties, you’ll be better equipped to handle complex styling requirements and improve the overall maintainability of your CSS code. The ability to centralize values and modify them with ease is a game-changer, allowing you to focus on building great user experiences.

More posts