**Course Title:** Modern CSS: Responsive Design and Advanced Techniques **Section Title:** Custom Properties (CSS Variables) and Calc() **Topic:** Introduction to CSS variables and how they improve maintainability As developers, we've all been there - stuck with a massive stylesheet, struggling to keep track of colors, font sizes, and margins across different components. That's where CSS variables come in - a game-changer for maintaining clean, efficient, and scalable code. In this topic, we'll explore the world of CSS variables, also known as custom properties, and discover how they can revolutionize your CSS workflow. **What are CSS Variables?** CSS variables are placeholders for values that can be used throughout your stylesheet. They're similar to variables in programming languages, but with a few key differences. CSS variables are declared using a custom property name, preceded by two hyphens `--`, followed by the property value. ```css :root { --primary-color: #00698f; } ``` **Why Use CSS Variables?** CSS variables offer several benefits that make them an essential tool in modern CSS development: 1. **Improved Maintainability**: With CSS variables, you can define a value in one place and use it throughout your stylesheet. This means that when you need to update a value, you only need to change it in one place. 2. **Increased Flexibility**: CSS variables can be used with any property type, including colors, lengths, and even calc() functions. 3. **Better Code Organization**: By separating concerns into different variables, you can keep your code more organized and readable. 4. **Easier Theming**: CSS variables make it easy to create multiple themes by simply switching out the values of your custom properties. **Declaring CSS Variables** CSS variables can be declared at the top of your stylesheet, inside the `:root` pseudo-class, or within any block-level element. When declaring a variable, you can use the `var()` function to assign a default value. ```css :root { --primary-color: #00698f; --secondary-color: #fff; } ``` **Using CSS Variables** Once declared, you can use CSS variables anywhere in your stylesheet using the `var()` function. ```css .button { background-color: var(--primary-color); color: var(--secondary-color); } ``` **FALLBACK VALUES** One of the most powerful features of CSS variables is the ability to provide fallback values. This allows you to define a default value when the variable is not declared or has an invalid value. ```css .button { background-color: var(--primary-color, #333); color: var(--secondary-color, #fff); } ``` **Browser Support** CSS variables are widely supported across modern browsers, with over 90% of global browser market share supporting them. [You can check the latest browser support for CSS variables on Can I Use](https://caniuse.com/css-variables). **Conclusion** CSS variables are a powerful tool that can greatly improve the maintainability and flexibility of your CSS code. By understanding how to declare and use CSS variables, you can write more efficient, readable, and scalable code. In the next topic, we'll dive deeper into defining and using custom properties with the `--variable-name` syntax. **Leave a comment/ask for help**: If you have any questions or need help with CSS variables, feel free to leave a comment below. **Next Topic:** Defining and using custom properties with the `--variable-name` syntax.