Why don't we need to reset variables outside media queries

Hello guys, sorry to disturb you all.

:root {
  --bg-color: rebeccapurple;
}
@media screen and (min-width: 600px) {
  :root {
    --bg-color: orangered;
  }
}

:root {
  --bg-color: rebeccapurple;
}
@media screen and (min-width: 600px) {
  :root {
    --bg-color: orangered;
  }
}

I don't understand, we only define the background color for the variable only once. If it happens the background color changes due to our media query, if the screen size decreases back, will we get our default background color ? Because the css sheet isn't reloaded and we didn't set the background color back to its initial color.

5 Replies

glutonium•5w ago

it's just updating the value of the variable based on screen size when screen size is bigger than 600px (i think .... i always forget how min-width and max-width works in media query) the variables value will be orangered, if less than (if my previous assumption is correct) 600px , then it'll be rebeccapurple btw instead of using min-width and max-width in media query, u can use logical symbol , which is easier to understand

@media screen and (width > 600px) {...}

@media screen and (width > 600px) {...}

FakerOP•5w ago

oh yeah true we can use > or < didn't know that.... as for the media queries, the thing is whatever is inside the media query is kind of "temporary" and as soon as the condition is false again, the "temporary" styles are discarded ?

glutonium•5w ago

yes u can think of media queries like conditionals IF screen size meets this condition set such and such styles to so and so elements and depending on what conditions are met, the corresponding styles will be applied. now, i forgot if css specificity has a play here like if the default style has higher specificity than the style in the media query , I don't remember if the media query overrides it or not u can try checking it out

<span class="class" id="id"> Test </span>

<span class="class" id="id"> Test </span>

#id { color: red; }

@media screen and (width < 600px) {
    .class { color: blue; }
}

#id { color: red; }

@media screen and (width < 600px) {
    .class { color: blue; }
}

FakerOP•5w ago

nope it didn't override it yep I see, I thanks !

glutonium•5w ago

ok so u do need to keep the specificity in check otherwise it's just not gonna work keep the specificity as low as possible on default styling

Gaming

Programming

Why don't we need to reset variables outside media queries