@profcat

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

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

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

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

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

Как наиболее правильно с точки зрения 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"/>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Посмотрите вместо VUE.JS библиотеку с одной функцией includeHTML.
Это будет значительно проще использовать для вашей задачи, чем vue.js
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы