{"id":5434,"date":"2025-03-20T10:32:23","date_gmt":"2025-03-20T15:32:23","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=5434"},"modified":"2025-04-01T10:48:33","modified_gmt":"2025-04-01T15:48:33","slug":"one-thing-scope-can-do-is-reduce-concerns-about-source-order","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/one-thing-scope-can-do-is-reduce-concerns-about-source-order\/","title":{"rendered":"One Thing @scope Can Do is Reduce Concerns About Source Order"},"content":{"rendered":"\n

There is an already-classic @scope<\/code> demo about theme colors. Let’s recap that and then I’ll show how it relates to any situation with modifier classes. (The @scope<\/code> rule is a newish feature in CSS that is everywhere-but-Firefox, but is in Interop 2025, so shouldn’t be too long to be decently usable.)<\/p>\n\n\n\n

There are lots of different ways to implement color themes, but imagine a way where you do it with class names. I think it’s a valid way to do it, rather than, say, only responding to system preferences<\/a>, because the classes might give you some on-page control. So you apply a theme at the top level. Then perhaps you have some<\/em> elements that have other<\/em> themes. Perhaps your site footer is always<\/em> dark. <\/p>\n\n\n

<body<\/span> class<\/span>=\"theme-light\"<\/span>><\/span>\n  <main<\/span>><\/span>\n    ...\n  <\/main<\/span>><\/span>\n   \n  <footer<\/span> class<\/span>=\"site-footer theme-dark\"<\/span>><\/span>\n    &copy;<\/span>2025 <a<\/span> href<\/span>=\"\/\"<\/span>><\/span>Frontend Masters<\/a<\/span>><\/span>\n  <\/footer<\/span>><\/span>\n<\/body<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
You set up those classes with colors, including other<\/em> elements that need colors depending on that theme.<\/p>\n\n\n
.theme-dark<\/span> {\n  background<\/span>: black;\n  color<\/span>: white;\n\n  a {\n    color<\/span>: #90caf9<\/span>;\n  }\n}\n\n.theme-light<\/span> {\n  background<\/span>: white;\n  color<\/span>: black;\n\n  a {\n    color<\/span>: #1976d2<\/span>;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
There is already a problem with the HTML and CSS above.<\/strong> <\/p>\n\n\n\n
The <a><\/code> in the footer will have the color of the light theme, not the dark theme. This is that classic @scope<\/code> demo you’re likely to see a lot (sorry). This is because of source order.<\/strong> The selector .theme-light a<\/code> has the exact same specificity as .theme-dark a<\/code> but the light theme comes after so it “wins”.<\/p>\n\n\n\n
One change to the above CSS will fix this:<\/p>\n\n\n
@scope<\/span> (.theme-dark) {\n<\/span><\/mark>  background<\/span>: black<\/span>;\n<\/span><\/span>  color<\/span>: white<\/span>;\n<\/span><\/span>\n<\/span><\/span>  a<\/span> {\n<\/span><\/span>    color<\/span>: #90caf9<\/span>;\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>@scope<\/span> (.theme-light) {\n<\/span><\/mark>  background<\/span>: white<\/span>;\n<\/span><\/span>  color<\/span>: black<\/span>;\n<\/span><\/span>\n<\/span><\/span>  a<\/span> {\n<\/span><\/span>    color<\/span>: #1976d2<\/span>;\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
So, appropriately, the link styling nested under @scope (.theme-dark)<\/code>wins because the specificity is the same but the proximity of the theme-dark<\/code> class is closer. <\/p>\n\n\n\n
What I like about this is that now the source order for those themes doesn’t matter. That’s nice as sometimes that’s hard to control. A good bundler should maintain source order after building, but perhaps these “variation classes” are in different files and the way they get built and loaded isn’t entirely predictable. Perhaps some lazy loading gets involved or the built files are purposefully spit or who-knows-what. I’ve seen too many “it’s fine on dev but broken on prod”<\/em> bugs for one lifetime.<\/p>\n\n\n\n
Color themes was just an excuse to look at variation classes.<\/p>\n\n\n\n
Here’s another example:<\/p>\n\n\n
.card-big<\/span> {\n  padding<\/span>: 2rem<\/span>;\n}\n\n.card<\/span> {\n  padding<\/span>: 1rem<\/span>;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Without even looking at HTML, you might consider this a “mistake” because, probably, card-big<\/code> is a variation class of .card<\/code>, except the thing that should be an override<\/em> (the padding<\/code>) won’t actually be overridden because of source order and equal specificity. I’d guess we all have some muscle memory for just ordering variation classes properly so this isn’t a problem, but it’s not ideal to me that we have to remember that, and that build tools and loading strategies might interfere anyway.<\/p>\n\n\n\n
Here’s some real-world-ish CSS I was playing with where I could use @scope<\/code> to put my variation class first without worry:<\/p>\n\n\n
@scope<\/span> (.card-big) {\n  :scope<\/span> {\n    grid-column<\/span>: span 2<\/span>;\n    display<\/span>: flex;\n\n    img {\n      width<\/span>: 50%<\/span>;\n      height<\/span>: 100%<\/span>;\n    }\n  }\n}\n\n.card<\/span> {\n  img {\n    width<\/span>: 100%<\/span>;\n    aspect-ratio<\/span>: 16<\/span> \/ 9<\/span>;\n    object-fit<\/span>: cover;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Now if I’ve got two cards…<\/p>\n\n\n
<div<\/span> class<\/span>=\"card\"<\/span>><\/span>\n  ...\n<\/div<\/span>><\/span>\n\n<div<\/span> class<\/span>=\"card card-big\"<\/span>><\/span>\n  ...\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
I can rest easy knowing the .card-big<\/code> styles will apply and appropriately override because of the proximity of the class to the things I want to style (including itself!)<\/p>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
There is an already-classic @scope demo about theme colors. Let’s recap that and then I’ll show how it relates to any situation with modifier classes. (The @scope rule is a newish feature in CSS that is everywhere-but-Firefox, but is in Interop 2025, so shouldn’t be too long to be decently usable.) There are lots of […]<\/p>\n","protected":false},"author":1,"featured_media":5516,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[243,7,157],"class_list":["post-5434","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-scope","tag-css","tag-dark-theme"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2025\/03\/One-Thing-Scope-Can-Do.jpg?fit=2280%2C1352&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5434","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=5434"}],"version-history":[{"count":6,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5434\/revisions"}],"predecessor-version":[{"id":5443,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/5434\/revisions\/5443"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/5516"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=5434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=5434"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=5434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
This is referred to as proximity.<\/strong><\/em> <\/strong>It’s like a new part of the cascade (Bramus has a nice diagram here<\/a>). Above, because the specificity is the same in both cases, the closer-in-the-DOM proximity “wins”. And closer meaning “fewest generational or sibling-element hops”. Like:<\/p>\n\n\n\n