@profcat

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

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

Связанный с этим вопрос №2.
Есть цепочка компонентов: приложение - панель - кнопка
Как наиболее правильно с точки зрения good practice назвать имена классов? Т.е. нужно ли употреблять родительские элементы в названии (aka БЭМ) или достаточно лишь передать в имени смысл самого субъекта?
  • Вопрос задан
  • 98 просмотров
Решения вопроса 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
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Ready for Sky Санкт-Петербург
от 120 000 до 160 000 ₽
Enapter Санкт-Петербург
от 160 000 до 240 000 ₽