Scoped CSS specificity problem

[franciscolourenco]

What 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

[haoqunjiang]

Have you tried CSS Modules?

[franciscolourenco]

@sodatea CSS Modules in Vue have an inferior developer experience since they require you do use this syntax: :class="$style.red">.

[haoqunjiang]

I think that's a design tradeoff.
Writing class="my-class" while transforming it to class="my-class-j04ckg578h" is quite misleading - users may expect .my-class is also able to target this element.

[posva]

What other css libraries? The only classes I find myself using that are supposed to take precedence are utility classes and they usually have an important to make sure they override things. If using something like tailwind, you want your scoped CSS to have higher specificity.

I guess an option to customize could make sense but this should go in vue-loader

[franciscolourenco]

@sodatea not if the user is aware of the way it works and opted in into the behaviour. This should be an option.

@posva You wrote 2 things which contradict. Tailwind is made of utility classes and it has an option to enable !important, to be able to override css which has been written with high specificity. So what you actually want, is your utility classes to override the css by default, which they do, as long as you don't use scoped.

The reason you want to avoid enabling !important in tailwind, and have the lowest possible level of specificity in your code, is to be able to override tailwind by increasing specificity, for instance in media queries, without having to use !important all over the place.

Forwarding to vue-loader.

[franciscolourenco]

@sodatea also the example you gave could be used to make the opposite argument. Hashed classnames would prevent elements from being accidentally targeted by unscoped css.

[Justineo]

Vue Loader’s scoped styles implementation works not only for class selectors. Scoped styles allow any selector so generating hashed class names is not enough.

[franciscolourenco]

@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?