БЭМ и вёрстка похожих элементов

Форум /

Предположим, что у нас есть макет, в котором два элемента выглядят одинаково, но по смыслу разные (недавно возникла такая ситуация в рабочем проекте). Например: меню в сайдбаре выглядит как список походих постов.

Как стоит верстать / разбивать на блоки?

У меня возникли следующие варианты (с их недостатками):

1. Сверстать как один блок. Проблемы начнутся, когда в новой версии дизайна один из этих блоков вдруг начнёт выглядеть по-другому или, что ещё хуже, чуть по-другому. Тогда потребуется мешать лапшу из модификаторов и каскадов, что не гуд. Ещё недостаток - как назвать этот блок?..

2. Сверстать как два разных блока. Недостаток - дублирование кода; зато внесение изменений в один из блоков не затронет другой. И с называнием проще.

3. Сверстать как два разных блока, но вынести общие визуальные свойства в примеси. Решается проблема дублирования, но добавляется вот такой ужас: nav.sidebar-menu.i-rounded.i-bordered.i-dashed.i-something-else.

Как бы вы поступили и почему?

bivihoba

Разные компоненты — разные блоки. Возможность внесения изменений важнее, чем быстрое создание.

Дублирования кода можно избежать, если использовать препроцессор.

Если представление всё же выносится в блок, то это должно быть чем-то оправдано, например, скоростью разработки, спецификой проекта или чем-то еще, что поможет очистить совесть)

Естсственно, что ни в коем случае нельзя определять вид одного смыслового блока, через другой.

lev-sun

Для начала спросите дизайнера, почему блоки столь похожи. В вашем примере это может быть просто некий обобщённый стандартный список. Тогда я не вижу препятствий делать один блок, возможно, с минимальными модификаторами. Когда потребуется сильное изменение, это уже будет другой блок.

yuri

я бы делал примерно так

block: 'b-myblock', // блок по сути
mix: { block: 'b-theme', theme: 'mytheme' }, //добавляет нужный look and feel
content: { 
    block: 'b-menu' // разруливает лэйаут (возможны вариации)
}

блок отделен от лэйаута: можно вставить заголовок в любой момент отделен от дизайна: легко изменить оформление

sergey-syrkin

тему делать для каждого look? Или только для второго?

yuri

не понял вопрос

sergey-syrkin

Я имел ввиду: делать один основной а второй в качестве модификатора, или сделать абстрактый блок и к нему два вида стилизации?

yuri

надо на конкретную задачу смотреть
или 2 стилизации и два микса или дефолтное для всех и микс

sergey-syrkin

ок, понятно

golikoffartem

Не совсем понял, что имеется в виду. А вы можете дать пример в другом формате (например, в html)?

yuri

   class="b-my-block b-theme b-theme_theme_mytheme">
     class="b-menu">
        ...

golikoffartem

А как в этом случае будет выглядеть html похожих постов (второй блок из примера, который выглядит также, но семантично другой)?

yuri

два варианта: или писать все зависимости каскадом в b-theme_theme_mytheme или делать элементы b-theme__whatever и миксовать их к элементам b-my-block

golikoffartem

Признаюсь честно, не понял ни ответ, ни как он относится к теме)

yuri

что именно непонятно?

golikoffartem

всё не понятно)

зависимости кого от кого? что такое тема (b-theme) относительно задачи (меню и список постов)? что такое b-my-block?

yuri

зависимости могут быть двух типов
.b-theme_theme_mytheme .b-my-block__elem { color: red }
или

.b-theme_theme_mytheme ..b-theme_elem { color: red } << который примешан к элементу .b-my-block__elem

b-my-block любой блок