-
Edge cases are fun. What's the order of these cascade layers?
css @\media (width > 500px) { @\layer one { /* styles */ } } @\layer two; @\layer three; @\layer one;
(this is not specified yet, so no right answer)
-
Note that with option #1, these mean the same thing:
css @\layer one { @\media (width > 500px) { /* styles */ } } @\media (width > 500px) { @\layer one { /* styles */ } }
With options #2 & #3 they have very different meaning.
-
Looking closer, I don't think option #2 works at all 😅. What would you do with a layer that is _only_ defined inside the media-query? It has to go somewhere!
css @\media (width > 500px) { @\layer one { /* styles */ } } @\layer two; @\layer three;
-
Wow, I think I disagree with nearly everyone here 🤣