CSS Variables
Last Updated :
04 Jan, 2025
Improve
CSS variables (custom properties) are reusable values defined with two dashes (--) that make your CSS code efficient and easier to maintain.
- Store values like colors, sizes, or fonts in one place for centralized updates.
- Use var() to apply these variables anywhere in your CSS.
- Improve code readability and consistency across your styles.
Syntax
var( --custom-name, value );Parameters
- --custom-name: (Required) The name of the custom property, starting with two dashes (--).
- value: (Optional) A value used if the custom property is not defined or is invalid.
<style>
:root {
--main-bg-color: lightblue;
--main-text-color: darkblue;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
</style>
More Example of CSS Variable
1. Themed Button Using CSS Variables
<style>
:root {
--button-bg: #4CAF50;
--button-text: white;
--button-padding: 10px 20px;
}
.btn {
background-color: var(--button-bg);
color: var(--button-text);
padding: var(--button-padding);
border: none;
cursor: pointer;
}
.btn:hover {
background-color: darkgreen;
}
</style>
In this example
- :root defines --btn-bg for button background and --btn-text for button text color.
- These variables are applied to style a button, making theme updates easy by changing values in :root.
2. Dynamic Spacing Using CSS Variables
<style>
:root {
--spacing: 20px;
}
.box {
width: 100px;
height: 100px;
background-color: lightcoral;
margin: var(--spacing);
}
</style>
In this example:
- :root defines --spacing to set uniform spacing between boxes.
- Changing the --spacing value in :root adjusts the margin for all .box elements.
Best Practices for CSS Variables
- Define Variables in :root: Declare global variables within the :root selector to ensure they are accessible throughout your stylesheet.
- Use Descriptive Naming: Choose clear and descriptive names for variables to enhance readability and maintainability.
- Leverage the Cascade: Take advantage of CSS variables' ability to inherit and be overridden within specific scopes, allowing for flexible theming and component styling.
