«Темизация» блоков по Методологии

Форум /

Здравствуйте. По этой ссылке http://jsbin.com/xulado/7/edit размещено два экземпляра виджета табов. Примеры выдернуты из рабочего проекта. Цель — сделать виджеты, которые не поломают верстку и JS. К стилю контейнеров применены селекторы тем. Интересует насколько приемлемо с точки зрения методологии БЭМ применять такой способ изменения внешнего вида блоков. Может будет лучше дописывать к каждому элементу модификатор?

10 years ago

tadatuta

для тем действительно лучше подходят модификаторы, чем миксы.

я бы предложил примерно такую структуру для табов:

<div class="tabbed-pane tabbed-pane_theme_soft">
    <ul class="tabbed-pane__tabs">
        <li class="tabbed-pane__tab">таб1</li>
        <li class="tabbed-pane__tab tabbed-pane__tab_active">таб2</li>
        <li class="tabbed-pane__tab">таб3</li>
    </ul>
    <div class="tabbed-pane__panels">
        <div class="tabbed-pane__panel">панель1</div>
        <div class="tabbed-pane__panel tabbed-pane__panel_active">панель2</div>
        <div class="tabbed-pane__panel">панель3</div>
    </div>
</div>

10 years ago

asakasinsky

да, спасибо, так выглядит лучше и смысла больше.

Меня смущает в использовании для тем модификаторов Элементов то, что нужно «помнить» куда их нужно применить. В моём случае используется микс (так ведь, да?), что в моём понимании не противоречит Методологии с одной стороны: Блок должен быть независим, но стили Элементов могут быть зависимы от стилей Блока; но противоречит с другой, потому что используется каскад, от которого убегаем.

Проблемы как таковой нет, но есть желание понять как оптимальнее внести независимые блоки в сторонние проекты без «поднимания» инфраструктуры БЭМ или написания своих инструментов.

Сейчас, пока писал ответ, подумал, что для виджетов можно просто передать название темы в конструктор JS через опции, а код виджета добавит модификаторы к нужным элементам.

Спасибо.

10 years ago

tadatuta

темы логичнее делать целиком для блоков и стилизовать элементы через каскад — блоки по-прежнему останутся независимыми, такой каскад «хороший» :)

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

10 years ago

asakasinsky

То есть я «правильно» иду? :)

для тем действительно лучше подходят модификаторы, чем миксы.

Так в моём примере микс используется?

10 years ago

asakasinsky

«Хороший каскад». Запомнить надо :)

10 years ago

tadatuta

Так в моём примере микс используется?

Да. Модификаторы предполагают «неймспейс», например, block1_modifier (или block1__elem1_mod1 для элемента).

А наличие на одной ДОМ-ноде нескольких классов без общего имени блока — это и есть микс нескольких блоков. В частности в БЭМе нет понятия «глобального» модификатора, но при этом может существовать некий блок, который можно будет миксовать к любым другим блокам. Примером может служить блок clearfix.

10 years ago

asakasinsky

Тогда получается у меня модификатор, неймспейс есть.

Чтобы оставлять комментарии, необходимо авторизоваться.