Здравствуйте. Ситуация такая: есть блок меню, который на сайте повторяется 3 раза. В каждом случае меняются его элементы - ссылки.
https://jsfiddle.net/user150/egzgstqu/
Как правильно изменять элементы в подобных ситуациях?
Предположения:
можно ставить модификатор для блока и менять элементы контекстным селектором:
.nav-menu--main .nav-menu__link
Во 2 и 3 случае так и сделал.
В 1 случае решил сделать микс 2 элементов. Пробовал через модификатор блока, но показалось, что выходит слишком много каскада и высок риск выстрелить в ногу делаю что то не так.
При этом есть сомнения:
- во 2 случае есть модификатор nav-menu__link--active который становится зависимым от модификатора блока nav-menu--main. Такого ведь не должно быть?
- знаю, что микс 2 элементов возможен, но кажется, что смесь получилась слишком сложная:
<a class="nav-menu__link buy-panel__link icon icon--basket" href="#">
Можете подсказать: что верно, что нет и как правильно?
Все использованные варианты — правильные. Где какой использовать зависит от знания (или интуиции) о том, как эти компоненты будут использоваться/переиспользоваться в дальнейшем (например, если проект заморозят и верстка не будет меняться, то можно экономить время, а если на его основе будет запускаться соседний, куда потребуется перенести часть готовой верстки — то нужно оптимизировать качество).
Я понимаю, что это не очень помогающий ответ, но, увы, реальность такова, что универсального правильного способа не существует :)
Это уже хорошо.
Предположим, что верстка будет развиваться и поддерживаться. Какое решение в этом случае, будет более реиспользуемым и модифицируемым? Пытаюсь продумать варианты развития интерфейса в конкретном случае. У меня мало опыта применения БЭМа и пока не очевидно, какие проблемы могут возникнуть при использовании 1 или 2 решения.
Как вы считаете, какой из 2 вариантов больше подходит для реиспользуемости и поддержки? Какие проблемы могут возникнуть в одном или в обоих вариантах, в конкретном примере?