Как достигается переиспользование стилей во Vue?

Question

[profcat]

Здравствуйте. Если писать код на Vue.js с использованием одностраничных компонентов каким образом достигается переиспользование стилей и нужно ли оно в принципе? То есть если абстрагироваться от отдельных файлов css и использовать исключительно vue компоненты. Насколько я понял, желательно присваивать стили классам, затем ко всем элементам, на которые навешивается класс в пределах компонента помимо класса навешивается и data-* атрибут с уникальным стандартизированным значением. А если у нас есть две совсем одинаковые кнопки, которые отличаются лишь цветом + находятся в разных компонентах?

Связанный с этим вопрос №2.
Есть цепочка компонентов: приложение - панель - кнопка
Как наиболее правильно с точки зрения good practice назвать имена классов? Т.е. нужно ли употреблять родительские элементы в названии (aka БЭМ) или достаточно лишь передать в имени смысл самого субъекта?

Comments

[Сергей delphinpro]

А если у нас есть две совсем одинаковые кнопки, которые отличаются лишь цветом + находятся в разных компонентах?

А зачем нам две почти одинаковые кнопки?
Мы делаем компонент кнопки и используем его.

<MyButton theme="primary">
<MyButton theme="secondary">
<MyButton theme="orange">

Все стили инкапсулированы в этом компоненте и не повторяются, переиспользуем весь компонент, а не какие-то там стили.

Answer 1

[Alex]

Вам ничего не мешает делать по старинке: один глобальный файл с глобальными стилями.

Ну, или иначе. Если вы хотите инкапсулировать стили — тогда все они дожны быть внутри компонентов.

А если у нас есть две совсем одинаковые кнопки, которые отличаются лишь цветом + находятся в разных компонентах?

Глобальные стили или отдельный компонент с кнопкой.

Как наиболее правильно с точки зрения good practice назвать имена классов?

На самом деле как вам удобно. Лично я использую следующий паттерн

class=" component-root <component-name>-component-root "

UPD.
Если есть необходимость передать какое-то свойство в нутрь компонента, то можно сделать это через кастомные свойства:

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

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

Answer 2

[xmoonlight]

Посмотрите вместо VUE.JS библиотеку с одной функцией includeHTML.
Это будет значительно проще использовать для вашей задачи, чем vue.js

Comments

[profcat]

Моя задача много сложнее, я просто привел пример

[xmoonlight]

profcat, :)) Ну, ок, раз так.