Module 19 : CSS Variables & Custom Properties – A
This module will cover CSS variables (Custom Properties) in-depth, including how to define, use, and manipulate them effectively. You will learn best practices, optimization techniques, and practical applications with real-world examples. This guide will also include exercises and practical methods to reinforce learning.
1. Introduction to CSS Variables (Custom Properties)
What are CSS Variables?
CSS variables, also known as Custom Properties, allow developers to store values in a reusable manner. These variables can be updated dynamically, making styling more maintainable and efficient.
Why Use CSS Variables?
Reusability: Define a value once and reuse it throughout the stylesheet.
Maintainability: Easily update styles by changing a single variable.
Dynamic Styling: Modify values using JavaScript for interactive UIs.
Improved Readability: Keeps CSS clean and understandable.
2. Defining CSS Variables
CSS variables are defined using the -- prefix and are usually placed inside the :root selector to make them globally available.
Syntax
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
:root refers to the global scope, making variables accessible throughout the CSS.
Variables are defined with --variable-name format.
They can store colors, sizes, margins, font families, etc.
3. Using CSS Variables
To use a variable, we use the var() function.
Example: Applying CSS Variables
body {
background-color: var(--primary-color);
color: var(--secondary-color);
font-size: var(--font-size);
}
var(--primary-color) retrieves the stored color and applies it.
If the variable is missing, you can provide a fallback value like this:
background-color: var(--non-existent, red);
This ensures a default value is applied if the variable is undefined.
4. Modifying CSS Variables Dynamically
CSS variables can be modified using JavaScript, making them useful for dynamic UI updates.
Example: Changing Theme Colors with JavaScript
<button onclick="changeTheme()">Change Theme</button>
<script>
function changeTheme() {
document.documentElement.style.setProperty('--primary-color', '#e74c3c');
document.documentElement.style.setProperty('--secondary-color', '#f1c40f');
}
</script>
document.documentElement.style.setProperty('--variable-name', 'new-value'); changes the CSS variable dynamically.
5. Local vs. Global CSS Variables
Global Variables
(Defined in :root)
:root {
--global-color: #ff5733;
}
Accessible throughout the document.
Local Variables (Defined within a selector)
.button {
--button-color: #27ae60;
background-color: var(--button-color);
}
This variable is only available inside .button.
6. CSS Variables with Media Queries
You can update CSS variables inside media queries to make designs responsive.
Example: Dynamic Font Sizes
:root {
--font-size: 16px;
}
@media (max-width: 768px) {
:root {
--font-size: 14px;
}
}
body {
font-size: var(--font-size);
}
When the screen width is less than 768px, the font size changes dynamically.
7. Advanced Techniques with CSS Variables
1. Using CSS Variables in Animations
:root {
--animation-speed: 2s;
}
.box {
width: 100px;
height: 100px;
background-color: var(--primary-color);
animation: move var(--animation-speed) infinite alternate;
}
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}
The animation speed is controlled by a CSS variable, making adjustments easy.
2. Using CSS Variables in Dark Mode
:root {
--bg-color: #ffffff;
--text-color: #333333;
}
.dark-mode {
--bg-color: #333333;
--text-color: #ffffff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
By adding the .dark-mode class to body, the theme changes automatically.
8. Performance Considerations & Best Practices
✅ Define Global Variables in :root – Makes them reusable across the document.
✅ Use Fallbacks – Provide default values to prevent rendering issues.
✅ Avoid Excessive Variable Nesting – Overcomplicating variable dependencies can reduce readability.
✅ Limit CSS Variables in Critical Animations – Using them in high-frequency animations can impact performance.
9. Practical Exercises
Exercise 1: Create a Reusable Color Theme System
Define CSS variables for colors in :root.
Apply them to different elements (header, button, text).
Change the theme dynamically using JavaScript.
Exercise 2: Implement a Responsive Design with Variables
Create a --container-width variable.
Adjust its value inside a media query.
Observe how the layout changes dynamically.
Exercise 3: Build a Dark Mode Toggle
Define color variables for light and dark themes.
Add a button to switch themes dynamically.
Use JavaScript to toggle the .dark-mode class.
10. Lecture Preparation Guide
Lecture 1: Introduction to CSS Variables
What are CSS variables?
Why use them?
Defining & using variables.
Lecture 2: Advanced Techniques
Dynamic updates with JavaScript.
Media queries & responsive design.
Animations & dark mode.
Lecture 3: Hands-on Workshop
Live coding a theme system.
Implementing a responsive layout.
Creating a toggle button for dark mode.
Conclusion
CSS variables are a powerful tool for improving maintainability, reusability, and dynamic styling in web development. By mastering them, developers can create scalable, efficient, and flexible designs.
No comments:
Post a Comment