Имеет ли такое соглашение для названий компонентов и классов во vue.js право на жизнь?

Очередной раз размышляя на тему структуры своего проекта и изучая style guide vue.js я пришёл к своему варианту нейминга компонентов и стилей в них. Основным вопросом для меня была проблема с тем как называть вложенные компоненты. Раньше я использовал такие имена: Component.vue, ComponentNestedElement.vue и т. д. Но что это нам даёт? Как нам понять структуру вложенности компонента по его имени? Как понять, что ComponentNestedElement.vue вложен в компонент Component.vue, а не в ComponentNested.vue, который в свою очередь вложен в Component.vue? Данное соглашение для имён компонентов используют кажется вообще все, но ведь оно явно приводит к путанице.
Так же я использовал для имен классов БЭМ, который в свою очередь тоже имеет те же проблемы.

Итого я пришёл к такому соглашению для имён компонентов: ComponentName-NestedComponentName
И вот такому соглашению для имён классов: ComponentName-NestedComponentName__elementName-nestedElementName--modifierName

Почему что-то подобное не используют все?
  • Вопрос задан
  • 936 просмотров
Решения вопроса 2
Извращение какое-то. В этом нет никакой нужды. БЭМ, с которого вы, определенно, сделали кальку, прекрасно применяется к иерархии директорий, что позволяет понять, что куда вложено, по импорту. Тот же БЭМ, кстати, пропагандирует самодостаточность компонентов с минимальными зависимостями между оными. Исключения - когда какой-то элемент действительно предназначен для конкретного домена, там можно и нужно указать принадлежность. HeaderMenu, TableCell и так далее.

Тем более, вложенность. Сегодня она у вас такая, а завтра - этакая. Я давно остановился на domain-driven структуре и не жалею, на мой взгляд, она идеальна. Просто декларативно распределяем компоненты по зонам их ответственности, по доменам. HeaderMenu в Header и так далее.
Ответ написан
Aetae
@Aetae Куратор тега Vue.js
Тлен
Просто не храните компоненты кучей в одной папке. Никто вам не запрещает создавать подпапки...
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ni55aN
@Ni55aN
Названия компонентов отвечают только за то, чем они являются/какую роль выполняют. Зачем перекладывать на них описание структуры, с которой хорошо справляются директории?

Композиция компонентов как раз и ложится на иерархическую структуру директорий.
Если компонент B используется только в компоненте A, тогда В и должен быть вложен в директорию, в которой находится A. Если компонент C используется и в A, и в B, тогда его можно вынести на соответствующий уровень в shared директорию

Например
/src
  /components
    /Header
      index.vue
    / Main
      /Sidebar
        index.vue
      /shared
      index.vue
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы