What are CSS Custom Properties (Using Double Dashes)?

Unveiling the Arcane Double-Dash CSS Properties

In the realm of CSS, a peculiar syntax has emerged, employing double leading dashes (--) to prefix property names. This arcane notation has puzzled many a developer, leaving them scratching their heads for answers.

Fear not, for this enigmatic phenomenon holds a profound secret. These mysterious properties, also known as custom properties, are the key to unlocking the power of CSS variables. By declaring a custom property within the root element, as seen in the example code provided, you grant yourself the ability to define and reuse values throughout your stylesheet.

The CSS standard provides a comprehensive guide to this transformative feature. According to the W3C Spec page, a custom property consists of two parts:

1. Variable Declaration: This is where you assign a value to your custom property. Declared within the root element, it becomes available to all nested elements.
2. Variable Usage: To utilize the defined custom property, you simply reference it using the var() function. This allows you to apply the property's value to any selector within your CSS code.

For instance, consider the following example:

:root {
  --main-color: #05c;
  --accent-color: #056;
}

#foo h1 {
  color: var(--main-color);
}

In this scenario, the custom property --main-color is defined within the root element. This value can now be applied to the color property of the #foo h1 selector using var(--main-color).

Custom properties offer an array of benefits, including improved code reusability, easier theme switching, and enhanced encapsulation. By embracing this powerful feature, you can bring a new level of elegance and efficiency to your CSS development.

The above is the detailed content of What are CSS Custom Properties (Using Double Dashes)?. For more information, please follow other related articles on the PHP Chinese website!