How is style reuse achieved in Vue?

Question

css

Hello. If you write code in Vue.js using single-page components, how is reuse of styles achieved and is it necessary in principle? That is, if we abstract from separate css files and use only vue components. As far as I understand, it is desirable to assign styles to classes, then to all elements on which a class is hung within the component, in addition to the class, a data-* attribute with a unique standardized value is also hung. But what if we have two completely identical buttons that differ only in color + are in different components?
Related question #2.
There is a chain of components: application - panel - button
How is it most correct from the point of view of good practice to name the class names? Those. Do I need to use parent elements in the name (aka BEM) or is it enough just to convey the meaning of the subject itself in the name?

Answer 1

Nothing prevents you from doing the old fashioned way: one global file with global styles.
Well, or otherwise. If you want to encapsulate styles, then they all need to be inside components.
Global styles or a separate component with a button.
Actually whatever is comfortable for you. Personally, I use the following pattern
If there is a need to pass some property to the inside of the component, then you can do this through custom properties:

<style scoped>
.button {
    color: var(--text-color, green)
}
</style>

<button-component style="--text-color: blue"/>

Answer 2

Look instead of VUE.JS for a library with a single includeHTML function .
It will be much easier to use for your task than vue.js