Update scoped styles documentation in guides #11311
Conversation
Previous docs state that scoped styles don't increase specificity which is inaccurate. Scoped styles will increase class specificity by 1. The imported style in the second example will have a specificity of 0-0-2. This will not override the scoped style of 0-1-1. The example is updated to use an ID selector which will override the scoped style with its specificity of 1-0-0.
✅ Deploy Preview for astro-docs-2 ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
Lunaria Status Overview🌕 This pull request will trigger status changes. Learn moreBy default, every PR changing files present in the Lunaria configuration's You can change this by adding one of the keywords present in the Tracked Files
Warnings reference
|
|
Hello! Thank you for opening your first PR to Astro’s Docs! 🎉 Here’s what will happen next:
|
There was a problem hiding this comment.
Thanks for bringing this to our attention, @dominik-ilja ! You're right, our wording was from before we updated the default styleScopingStrategy from where to attribute.
I've made some suggestions below, because it's not really correct to say "scoped styles do/don't increase specificity" because it depends what the user has configured. So instead, I think the wording below prompts people to the config value which has explanations of each mode, and when specificity does or doesn't increase with scoped styling. See if you think something like those changes work!
sarah11918
added
the
improve or update documentation
|
Hey! I went ahead and made those changes. I was originally unaware that you could configure the scoped styles. Thank you for bringing that up. |
There was a problem hiding this comment.
Thank you again for this super helpful contribution, @dominik-ilja , and welcome to Team Docs! 🥳
Description (required)
Previous docs state that scoped styles don't increase specificity which is inaccurate. Scoped styles will increase class specificity by 1.
The imported style in the second example will have a specificity of 0-0-2. This will not override the scoped style of 0-1-1. The example is updated to use an ID selector which will override the scoped style with its specificity of 1-0-0.