Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Scoped CSS specificity problem
See original GitHub issueWhat problem does this feature solve?
Vue achieves scoped css by combining classnames with randomly generated attributes. This increases the specificity of the selectors, making it hard to combine with other CSS libraries.
What does the proposed API look like?
This is a feature request for scoped css through classnames with a hash, without using attribute selectors.
.my-class-j04ckg578h
There should be a way to configure this option on a project level
Issue Analytics
- State:
- Created 4 years ago
- Comments:8 (8 by maintainers)
Top Results From Across the Web
Specificity - CSS: Cascading Style Sheets - MDN Web Docs
Specificity is an algorithm that calculates the weight that is applied to a given CSS declaration. The weight is determined by the number...
Read more >Can you scope styles without increasing specificity? - Geoff Rich
By adding a scoping class, Svelte increases the specificity of your component's styles, which may mean that global styles don't apply when you ......
Read more >Strategies for Keeping CSS Specificity Low
Keeping CSS specificity low across all the selectors in your project is a worthy goal. It's generally a sign that things are in...
Read more >272653 - Scoped styles are not obeying CSS specificity rules
Issue 272653: Scoped styles are not obeying CSS specificity rules · 1. Create a scoped style underneath the body tag · 2. Create...
Read more >The State of CSS Specificity, Part 1 - CodinGame
Like any other programming language, CSS should be reusable, maintainable, and scalable. If you are adding CSS selectors on top of it to...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I think that’s a design tradeoff. Writing
class="my-class"while transforming it toclass="my-class-j04ckg578h"is quite misleading - users may expect.my-classis also able to target this element.@Justineo That is a good point, no feature parity. At the same time I have no interest in that feature whatsoever. Can you think of an example where that would actually be a good practice?