CSS Custom Properties

🧑‍🎨 What are CSS Custom Properties?

CSS Custom Properties, also known as CSS Variables, enable you to define reusable values that can be referenced throughout your CSS. They are especially helpful when you need to apply the same value to multiple properties or elements, such as color schemes, margins, or font sizes. They also allow you to change values dynamically.

Why Use CSS Variables?

• Reusability: Define values once and reuse them across multiple rules.
• Maintainability: Easily modify a variable in one place and update the entire design.
• Dynamic Styling: With JavaScript, you can modify the value of a CSS variable at runtime.

📝 Defining CSS Variables

To define a custom property, use the -- prefix followed by the variable name. You can define CSS variables globally or locally.

Syntax:

--variable-name: value;

Example (Defining Global Variables):

:root {
  --primary-color: #3498db;
  --font-size: 16px;
  --padding: 20px;
}

• :root defines the global scope, making the variables accessible throughout the entire document.

Example (Defining Local Variables):

.container {
  --container-padding: 10px;
  padding: var(--container-padding);
}

Here, the variable --container-padding is scoped within .container and cannot be accessed outside this selector.

🖋️ Using CSS Variables in Styles

Once you've defined custom properties, you can use them in your CSS by referencing them with the var() function.

Syntax:

property: var(--variable-name);

Example:

body {
  font-size: var(--font-size);
  background-color: var(--primary-color);
  padding: var(--padding);
}

This applies the values of --font-size, --primary-color, and --padding defined in the :root selector to the body element.

🎨 Benefits of Using CSS Variables

1. Consistency in Design

By using custom properties, you ensure that the same values (like colors or spacing) are applied consistently throughout the design. If you need to change the color scheme or layout, you only need to modify the variable once.

Example: Theme Switching

:root {
  --primary-color: #3498db; /* Light theme */
  --secondary-color: #2ecc71;
}
 
.dark-theme {
  --primary-color: #2c3e50; /* Dark theme */
  --secondary-color: #e74c3c;
}
 
button {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

Here, by switching between light-theme and dark-theme classes, the button's background and text color will dynamically change based on the defined variables.

2. Easier Maintenance

Using custom properties makes it easier to update values globally. Instead of searching through your CSS file to change a color or font size, you can just update the variable, and it will automatically propagate across all usages.

3. Dynamic Styling

CSS Variables can be updated dynamically using JavaScript, providing flexibility in creating interactive designs.

Example (JavaScript to Change CSS Variables):

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

This changes the value of --primary-color to #9b59b6 globally, and any elements using var(--primary-color) will reflect the new color immediately.

📏 Scoped CSS Variables

CSS variables can also be scoped to specific elements, which allows for more control over styles.

Example:

.card {
  --card-bg-color: #ecf0f1;
  background-color: var(--card-bg-color);
}
 
.card-dark {
  --card-bg-color: #2c3e50;
}

Here, .card uses a light background color, but .card-dark changes the background color to dark when applied, utilizing scoped variables.

🧰 Key Takeaways

🧪 Try Yourself

export default function App() {
  return <h1>Hello world</h1>
}