What are CSS Custom Properties (with double dashes) and how do they work?

Exploring CSS Custom Properties with Double Dashes

In the realm of CSS, a perplexing code syntax has emerged. CSS code with properties prefixed with double dashes has left many scratching their heads. This article aims to unravel the mystery behind these unique properties and delve into their significance in CSS.

Understanding Custom Properties

The double dash (--) prefixed to CSS properties denotes custom properties. Introduced in CSS3, these properties allow developers to define their own reusable variables within a stylesheet or across an entire website. They provide enhanced flexibility and code maintainability.

W3C Specification:

The official W3C specification for Custom Properties defines the syntax as --[custom-property-name]. Custom properties must start with two dashes and be followed by a valid property name.

Adding Custom Properties:

Adding custom properties is straightforward. Simply define them within the :root element or any other valid scope and assign them a value using the -- prefix.

Example:

Consider the following CSS code:

:root {
  --color-link: #04b;
  --color-greenurl: 13px;
}

In this example, --color-link and --color-greenurl are custom properties. Developers can then reference these properties throughout their CSS code using the var() function.

Benefits of Custom Properties:

• Reusability: Custom properties enable seamless reuse of common design elements across multiple stylesheets and components.
• Centralized Management: They provide a centralized location to manage site-wide design values, reducing the risk of inconsistencies.
• Dynamic Styling: By assigning variables to custom properties, developers can implement dynamic styling based on user preferences or media queries.

For more comprehensive documentation and examples, refer to the W3C Custom Properties Specification at [w3.org/TR/css-variables/](https://www.w3.org/TR/css-variables/).

The above is the detailed content of What are CSS Custom Properties (with double dashes) and how do they work?. For more information, please follow other related articles on the PHP Chinese website!