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

Question

[abasiuk]

Скажу сразу, суть вопроса, возможно, не донесу с первого раза, так как очень много деталей. Вопрос скорее не для ответа одной строчкой, а для разсуждений. Если что то недописал, спрашивайте, буду отвечать, так как интресно все-таки разобраться в этом все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 - тоже есть своя теория))

Answer 1

[Павел Коковин]

На мой взгляд, следует сделать отдельные компоненты в таких случаях и подключать их. Тем более вы сами сказали, что требуется их идентичное оформление, что уже достаточно для выноса в отдельный компонент (компоненты не обязаны нести функциональную составляющую). Так будет намного меньше кода в шаблонах, не нужно подключать css и придумывать как глобально подключить стили, которые глобальными быть не должны)
1. Глупые vue компоненты не должны быть большими и могут содержать больше одного блока только в рамках исключения.
2. Из этого следует вывод, что хоть методология БЭМ и остается почти неизменной, но всю бэмовскую нотацию во vue файлы тащить не стоит. Для примера: можно избавиться от добавления класса блока беред классами элементов, так как блок один, а классы уникальные благодаря scoped. (Единственное - нужно учитывать, что к рутовому блоку по классу может обратиться родитель компонента, но это уже частности)
Как-то так)

Comments

[abasiuk]

Боюсь в больших проектах этих компонентах без функциональности будет очень много, что создаст отдельные проблемы при поиске нужного компонента, разве что выделить директорию, именно под такие компоненты.) Да, я писал нащет идентичного оформления, но дальше упоминал про использование миксин, что тоже создаст сложности при выносе блока в отдельный компонент.
Идеальным, как мне кажеться был бы вариант, если бы можно было отдельные блоки подгружать в глобальные стили при первом использовании их на странице. Но хз можно ли это реализовать ))
Нащет scoped - это же реализовано за счет добавления атрибутов тегам, то есть на скорость загрузки страницы, может и немножко но влияет. Как по мне, нужно уже использовать или скопет или бэм, так как по сути они для решения одних задач предназначены или хотя бы похожих задач ))