CSS custom attributes (i.e. CSS variables) improve development efficiency by storing and reusing style values. The core usage methods include: 1. Use the --variable name syntax to define in:root or specific selectors; 2. Reference variables through the var (--variable name, default value) function; 3. Can dynamically update variable values, support topic switching, responsive design and other scenarios. Their inheritance and cascade rules are consistent with ordinary CSS properties and can be modified through JavaScript runtime to achieve user preferences or dynamic style adjustments.

CSS custom properties, often referred to as CSS variables, are a way to store and reuse values across your stylesheet. They make it easier to manage themes, maintain consistency, and reduce repetition. Unlike traditional CSS, where you had to repeat the same color or font value multiple times, custom properties let you define them once and use them anywhere.

How to Define CSS Custom Properties

You define custom properties using a special syntax: they always start with two dashes ( -- ) followed by a name of your choosing. These properties are scoped, meaning where you define them affects where they can be used.

For example:

 :root {
  --primary-color: #007bff;
  --font-size: 16px;
}

Here, we're defining two variables inside :root , which makes them globally available throughout the document. You can also define variables on more specific selectors if you want them to apply only in certain parts of the page.

A few things to keep in mind:

• Variable names are case-sensitive, so --color and --Color are different.
• You can update their values dynamically via JavaScript or media queries.
• They cascade and inherit like regular CSS properties.

How to Use CSS Variables

Once defined, you can use a custom property by referencing it with the var() function. This function takes the variable name and an optional fallback value if the variable isn't defined.

Example usage:

 button {
  background-color: var(--primary-color);
  font-size: var(--font-size, 14px);
}

In this snippet:

• The button's background color uses our --primary-color .
• If --font-size isn't set somewhere, it falls back to 14px .

This is especially useful for creating themes or allowing user preferences (like dark mode) without duplicating large chunks of CSS.

Also, don't forget that variables work anywhere in CSS — not just in common places like colors or sizes. You could even use them for transition timing, grid layout settings, or complex shadow effects.

Practical Use Cases

Custom properties really shine when managing dynamic styles or themes. Here are some practical applications:

• Theme switching : Define light and dark theme variables and toggle between them.
• Responsive design tweaks : Adjust spacing or font sizes based on screen size by updating variables inside media queries.
• Component-based styleling : Define variables within component containers so child elements can inherit context-specific styles.

Let's say you have a card component. Instead of hardcoding padding or border radius, you can do something like:

 .card {
  --card-padding: 1rem;
  --card-radius: 8px;

  padding: var(--card-padding);
  border-radius: var(--card-radius);
}

Now, if you need a variation of the card with different spacing or corner radius, you can simply override those variables in a subclass:

 .card.featured {
  --card-padding: 2rem;
}

This keeps your base styles clean and reusable while making overrides simple.

Updating Variables with JavaScript

One of the biggest advantages of CSS variables is that they can be changed at runtime using JavaScript. This opens up possibilities for user-driven style changes or dynamic theming.

To update a variable from JavaScript:

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

This would change the --primary-color variable globally. If you want to target a specific element instead of the root, just select that element first.

You might use this to:

• Let users pick a theme color from a picker.
• Switch to high-contrast mode for accessibility.
• Animate values over time (eg, for interactive UI elements).

Just remember that changing a variable updates all places where it's used — no need to manually update each CSS rule.

Basically that's it.

The above is the detailed content of What are CSS custom properties (variables) and how to use them?. For more information, please follow other related articles on the PHP Chinese website!