Put all styles in `@layer` for lowered specificity

vuejs / vitepress

Vite & Vue powered static site generator.

https://vitepress.dev

MIT License

13.29k stars 2.15k forks source link

Put all styles in `@layer` for lowered specificity #4125

Closed felix-bohlin closed 3 months ago

felix-bohlin commented 3 months ago

Problem I'm trying to solve: I want to use Vitepress to document my own component library. The issue I have is that Vitepress' own styling sometimes override my own components. By putting all of Vitepress' own styles inside @layer we lower the specificity of those styles and make sure they are easily overridden.

brc-dd commented 3 months ago

It doesn't meet our current baseline (Chrome/Edge >= 88, Firefox >= 78, Safari >= 14).

felix-bohlin commented 3 months ago

@brc-dd Ah, too bad. Thanks for your reply! :)