Are you using scoped styles when using vue?

Question

Vue.js

Personally, I've always marked my styles as scoped and never had a problem with it.
However, lately I have encountered several times that someone deliberately refuses this and, for example, resorts to the help of BEM or something else.
What are the disadvantages of using scoped styles?

Answer 1

First of all - weak encapsulation. More precisely, it is almost non-existent. scoped styles inject an attribute with a hash into the target DOM element, which in no way protects against external classes with the same name.
That is, if you have a scoped example class with color: red, the output will be something like:

.example[data-v-hsfg3e3] {
  color: red;
}

And if another component without scopes or global styles has an example class with background-color: red, you're in trouble.
In general, I see no reason to use scoped when there are css modules out of the box that do not have these shortcomings.