Здравствуйте!
Подскажите пожалуйста, как правильно организовать код для стилизации hover состояний у элементов блоков.
Структура такая:
b-control
__title
b-control__title.less
__descr
b-control__descr.less
b-control.less
При таком подходе получается, чтобы навесить при наведении на блок b-control hover для заголовока b-control__title я должен внутри файла b-control.less сделать следующую запись:
.b-control {
&:hover {
.b-control__title {
color: @green;
}
}
}
Мне кажется не правильным прописывать внутри файла b-control.less стили для состояния элемента, который описан в другом файле. Как правильно с точки зрения БЭМ реализовать такой кейс? При условии что навешивать на сам заголовок hover я не могу, нужно чтоб при наведении на контейнер он изменялся.
При сохранении переносы убрались, поэтому получилась каша в описании структуры.
@jazz-ik я чуть отформатировал код.
по сути вопроса ответ зависит от того, является ли
__titleопциональным элементом.если он существует всегда и без него
b-controlне существует, то лучше положить код про ховер в b-control.less. при прочих равных общее правило такое: блок может знать про свои вложенные элементы, а элементы не должны знать про блок.но если у тебя есть задача оставить тайтл опциональным, то в данном случае можно унести все знание про него в файл элемента, большой беды, конечно, не будет.
Хорошо. давай представим, что он опциональный.
У меня есть базовые стили для b-controll. Я начинаю использовать его в другом проекте, где внутри контролла попросили разместить тайтл и он должен менять свой цвет при наведении на любую область контролла. В этом случае получается, что я должен использовать уровни переопределения? К примеру базовые стили b-controll лежат в папке blocks, а есть еще папка project, где я создаю еще один файл b-controll, который подключается позже и в нем прописывается hover для опционального элемента?
да, все верно