Как правильно использовать БЕМ во Vue?

Скажу сразу, суть вопроса, возможно, не донесу с первого раза, так как очень много деталей. Вопрос скорее не для ответа одной строчкой, а для разсуждений. Если что то недописал, спрашивайте, буду отвечать, так как интресно все-таки разобраться в этом всеm:))
Вопрос по поводу организации верстки во vue-компонентах. На многих форумах читал, что понятия "vue-компонент" и "блок в БЭМ" практически идентичны со стороны верстки. То есть условный vue-компонент == .list-component в БЭМе. Но на практике часто встречаются моменты, когда в vue-компоненте лучше использовать несколько БЭМ блоков(обычно этот блок может использоваться в нескольких компонентах и не несет в себе никаких функциональных действий(то есть не требуется его выносить в отдельный vue-компонент, так как требуется только идентичное его css-оформление)). Для каждного отдельного БЭМ-блока для удобства я создаю отдельный scss-файл и имортирую его в нужном vue-компоненте
@import "assets/scss/components/public/user-elements/arrow"; // простой БЭМ блок
  @import "assets/scss/components/public/component/lesson-about"; // простой БЭМ блок
  @import "assets/scss/components/public/component/times"; // простой БЭМ блок
  @import "assets/scss/components/public/component/finished-lesson"; // БЭМ который совпадает из vue-компонентом

Согласно БЭМу я могу использовать миксины, то есть у меня может быть блок из класами - .arrow.finished-lesson__arrow - для того чтобы немного подкоректировать "стандартный" блок.
Поближе к сути вопроса - правильно ли импортить блок, который используеться в нескольких компонентах в каждном из этих компонентов или же его можно подключить как то глобально?
плюс, если подключать блок в каждном компоненте, это исключает использование миксин(после загрузки нового компонента с блоком .arrow, класс .finished-lesson__arrow перестает действовать).
нащет испольнования scoped - тоже есть своя теория))
  • Вопрос задан
  • 1886 просмотров
Пригласить эксперта
Ответы на вопрос 1
Per_Ardua
@Per_Ardua
Frontend developer
На мой взгляд, следует сделать отдельные компоненты в таких случаях и подключать их. Тем более вы сами сказали, что требуется их идентичное оформление, что уже достаточно для выноса в отдельный компонент (компоненты не обязаны нести функциональную составляющую). Так будет намного меньше кода в шаблонах, не нужно подключать css и придумывать как глобально подключить стили, которые глобальными быть не должны)
1. Глупые vue компоненты не должны быть большими и могут содержать больше одного блока только в рамках исключения.
2. Из этого следует вывод, что хоть методология БЭМ и остается почти неизменной, но всю бэмовскую нотацию во vue файлы тащить не стоит. Для примера: можно избавиться от добавления класса блока беред классами элементов, так как блок один, а классы уникальные благодаря scoped. (Единственное - нужно учитывать, что к рутовому блоку по классу может обратиться родитель компонента, но это уже частности)
Как-то так)
Ответ написан
Ваш ответ на вопрос

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

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