@wakenby

Как именовать классы во vue компонентах?

Как правильно писать классы во vue компонентах? С префиксом имени компонента? (Имеется ввиду лучшая практика)

Вариант 1:
// TodoItem.vue
<template>
  <div class="todo-item">
    <div class="todo-item-left">...</div>
    <div class="todo-item-button">...</div>
  </div>
</template>


Вариант 2:
// TodoItem.vue
<template>
  <div class="todo-item">
    <div class="left">...</div>
    <div class="button">...</div>
  </div>
</template>


Вариант 3:
// TodoItem.vue
<template>
  <div class="todo-item">
    <div class="todo-item__left">...</div>
    <div class="todo-item__button">...</div>
  </div>
</template>


Во втором варианте есть неприятная особенность, если есть компонент Title.vue, с содержимым:
// Title.vue
<template>
  <div class="title">Заголовок</div>
</template>


И мы его импортируем в другой компонент, у которого есть уже свой title:
// Home.vue
<template>
  <div class="home">
    <Title/> // Конфликт c class="title"
    ....
    <div class="title"></div>
  </div>
</template>


То у компонента Title.vue будет конфликт классов, на него будут действовать стили из Title.vue, и из Home.vue

Какая хорошая практика именования классов?
  • Вопрос задан
  • 79 просмотров
Пригласить эксперта
Ответы на вопрос 2
Попробуйте второй вариант, если нравится, но в компоненте добавляйте scoped
По идее стили не пересекутся
<style scoped>
Ответ написан
AlexeyCaTHaR
@AlexeyCaTHaR
БЭМ? Т.е. Блок(функциональный)-элемент-модификатор. Пересечений не должно быть из-за того, что функциональные блоки не дублируются в РАЗНЫХ компонентах(т.е. для одного функционального блока один компонент)
Ответ написан
Ваш ответ на вопрос

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

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