Priority is decided by the browser, using the usual CSS specificity rules. It doesn’t take into account the order that the classes appear in the
In your example all the rules seem to be using single class selectors. This gives them equal specificity, so priority is determined by the order they’re pulled in. That order can differ between dev and production builds, so you need to be very careful.
It’s difficult to give specific advice without seeing the relevant code. Some suggestions that might apply:
- Usually if one component extends another then Vue will build the CSS in the right order.
- You might be better off using props to tell the
base-input what to do, so that all the CSS is part of that component, rather than applying styles from the outside. Using a
class to apply styling from the outside can violate encapsulation.
- You can bump up specificity by repeating the class in the selector. e.g.
The browser doesn’t know about the
scoped attribute when it decides the priorities. That attribute will add an extra attribute to the CSS selectors during the build process, which will indirectly increase the specificity of those selectors.