Exploring the beauty of CSS variables
Whether you're just starting out or you've been coding for years, CSS variables (custom properties) are super helpful. They're changing the way we write CSS, making our websites easier to build and update.
Let's look at why CSS variables are so great, starting with the most important reasons:
1. Easier Updates Across Your Whole Website
Imagine changing your website's main color with just one line of code. That's what CSS variables let you do!
:root {
--main-color: blue;
}
.button, .header, .link {
color: var(--main-color);
}
Now, if you want to change the blue to red everywhere, you just change --main-color once. This not only makes updates easier but also reduces the chance of mistakes from repeating values.
2. Global vs Local Variables
This is an important point! CSS variables can be either global (defined in the :root selector) or local (defined in specific elements). This gives you flexible control over your styles.
:root {
--global-color: blue
}
.container {
--local-color: green;
color: var(--global-color);
}
.container .button {
color: var(--local-color);
}
Global variables are great for site-wide styles, while local variables allow you to create self-contained components or sections with their own unique styles.
3. Change Styles with JavaScript
Need to adjust the layout or color scheme based on user input or system events? You can update CSS variables with JavaScript as usual:
document.documentElement.style.setProperty('--main-color', 'red');
The above code allows you to change the main color from JavaScript, possibly based on a user action.
4. Work with Media Queries
CSS variables work great with media queries. This means you can easily change your design for phones, tablets, or computers:
领英推荐
:root {
--container-width: 1200px;
--font-size: 16px;
}
@media (max-width: 768px) {
:root {
--container-width: 100%;
--font-size: 14px;
}
}
.container {
width: var(--container-width);
font-size: var(--font-size)
}
The above set a wide container and normal font size for big screens. For smaller screens (less than 768px) it makes the container full width and slightly reduce the font size.
5. Create Relationships Between Different CSS Properties
You can use CSS variables to create connections between different styles:
:root {
--spacing-unit: 8px;
}
.card {
padding: var(--spacing-unit);
margin-bottom: calc(var(--spacing-unit) * 2);
}
Above code ensure that margins and padding are always in sync
A Common Use Case: Theme Switcher
Want your website to have a dark mode? CSS variables make it super simple:
:root {
--bg-color: white;
--text-color: black;
}
.dark-mode
--bg-color: black;
--text-color: white;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
Now, just toggle the theme using JavaScript:
function toggleDarkMode() {
document.body.classList.toggle('dark-mode');
}
Above function simply toggles the 'dark-mode' class on the <body> element. You can make users click a button linked to this function which will switch between light and dark modes instantly
Why Use CSS Variables Instead of SASS
You might be thinking, Can't I do this with SASS? While SASS is great, CSS variables offer some advantages and they’re also easier for beginners to pick up:
That’s it! Now you know that CSS variables are super helpful for making your code easier to write and update. They allow you to make changes quickly, create themes easily, and even update styles based on user actions
What do you think about CSS variables? Have you used them in your projects? Share your experiences in the comments!
B.com Finance Graduate | AI & Automation Enthusiast | Aspiring Prompt Engineer
5 个月Very helpful
Performance Engineering Architect, Manager at Cognizant
5 个月Useful tips