Как правильно писать классы во 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
Какая хорошая практика именования классов?
