What's the point of using variables in CSS if i'm just going to provide a fallback with the exact same value anyways? Is it semantics?

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Are there use cases for variables I don’t know yet? It seems redundant to basically set a property to the exact same value twice.

  **Your code so far**


<style>
:root {
  --red-color: red;
}
.red-box {
  background: red;
  background: var(--red-color);
  height: 200px;
  width:200px;
}
</style>
<div class="red-box"></div>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:97.0) Gecko/20100101 Firefox/97.0

Challenge: Improve Compatibility with Browser Fallbacks

Link to the challenge:

2

Let’s think you are making a web site with a blue theme . You’ve used that blue color for many elements through out the page like buttons, borders etc. You havent used variables for this instead directly used the value blue for each element. After the hard work of one eternity you completed the site. But at the end you’ve realized that the blue is lil bit saturated or its look weird so you have to change the color theme. Now what you can do is change 'blue` in every elements you’ve used and there is 1000s of lines.

There comes variables for the rescue. If you use a variable to store the color and use the variable for every elements , you have to only change the variable value it will affect the entire page or site.

Hope you understood why variables are so important :slight_smile:

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.