Вопрос о стилизации блока

Форум /

Помогите определиться с тем, как подойти к стилизации блока с табами. Скажем, у меня есть простой блок Tabs с модификаторами horizontal и vertical. Без стилей (за исключением смены flex-direction в зависимости от этих модификаторов). Чтобы не плодить модификаторы, отвечающие за стилизацию самого блока Tab, за стили кнопок и табов отвечают примиксованные к ним элементы другого блока.

Например:

<div class="tabs tabs_type_horizontal booking">
    <div class="tabs__header">
        <button class="tabs__heading tabs__heading_active booking__heading" data-tab="tab_1">Tab #1</button>
        <button class="tabs__heading booking__heading" data-tab="tab_2">Tab #2</button>
        <button class="tabs__heading booking__heading" data-tab="tab_3">Tab #3</button>
    </div>

    <div class="tabs__content">
        <div class="tabs__tab tabs__tab_active booking__content" id="tab_1">
            <!-- content -->
        </div>

        <div class="tabs__tab booking__content" id="tab_2">
            <!-- content -->
        </div>

        <div class="tabs__tab booking__content" id="tab_3">
            <!-- content -->
        </div>
    </div>
</div>

Сейчас на активное состояние табов и кнопок указывает модификаторы элементов блока Tabs. Но как быть с блоком Booking. Ему для стилизации тоже нужно знать активное состояние. Будет ли правильным с точки зрения БЭМ-подхода использовать здесь такую "контекстную" стилизацию .tabs__heading_active.booking__heading?

8 years ago

tadatuta

@IngvarSchnaider здесь есть противоречие между простотой реализации и концептуальной чистотой кода: если хочется сделать идеальный БЭМ, то правильнее будет выставлять модификатор и на booking__heading. Но на практике почти наверняка окажется, что блок booking в принципе невозможен без использования блока tabs внутри себя, поэтому он вполне может «знать» о том, что он базируется на tabs и сократить лишний код за счет такой вот связи.

Примерно такая же ситуация происходит при составлении любых сложных блоков на основе более простых: dropdown знает, что основан на button + popup, за счет этого удается избежать копипаста. Другое дело, что важно сохранить эту связь только от парента к чайлдам и не позволять потомкам завязываться на родителя или сиблингам знать о существовании друг друга.

8 years ago

viT-1

Возможно вам поможет MDL: https://github.com/google/material-design-lite/tree/mdl-1.x/src/tabs

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