БЭМ? Блоки внутри блоков?

Немного не уверен, когда начинать новый контекст в БЭМ.

Должны ли все дочерние элементы всегда ссылаться на блочный элемент?

Например,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>bem</title>
    </head>
    <body>
        <div class="header">
            <div class="header__left">
                <!-- Left column content -->
            </div>
            <div class="header__search">
                <!-- Should this be attached to the header? Or a new context <div class="search"> as it can be used elsewhere on the site? -->
            </div>
        </div>
    </body>
</html>

Здесь поиск находится внутри блока «заголовок», но должны ли мы действительно прикреплять его к заголовку, поскольку его можно использовать в другом месте сайта?

У вас есть новые блоки внутри блоков?

Ваше здоровье


css bem
person Joe Consterdine    schedule 26.10.2016    source источник
comment
Я бы предложил привести пример вашего лучшего предположения и позволить другим прокомментировать его. Я думаю, что то, что вы спросили здесь, слишком расплывчато.   -  person Jeremy Cook    schedule 26.10.2016

Ответы (1)


arrow_upward
13
arrow_downward

Насколько я понимаю, нет никаких проблем с перекрытием блоков, если css, используемый для нацеливания на каждый блок, является дискретным и отдельным. Таким образом, стиль search не должен зависеть от стиля header, если его можно использовать в других местах. Точно так же стиль header не нуждается в дальнейшем снижении, как только он теряет актуальность для своих дочерних элементов.

Будет ли что-то вроде этой работы; Имеет ли это смысл?

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>bem</title>
    </head>
    <body>
        <div class="header">
            <div class="header__left">
                <!-- Left column content -->
            </div>
            <div class="header__right">
                <div class="search">
                    <input class="search__input>
                    <button class="search__button>GO!</button>
                </div>
            </div>
        </div>
    </body>
</html>
person Jonathan Bowman    schedule 26.10.2016
comment
Но правильно ли я поступаю, когда стилизую панель поиска, выполняя: .header .search__input {}? Или изменить его с помощью модификатора тогда? - person Robbert; 14.06.2018
comment
Панель поиска, вероятно, разделяет стили с другими текстовыми входами, и, поскольку вы хотите как можно меньше повторять код, я бы использовал отдельный класс/модификаторы для стиля ввода, например o-input, и использовал его для стиля ввода поиска. Классы для вашего поиска могут выглядеть как search__input o-input o-input--text o-input--large или что-то в этом роде. ЕСЛИ стиль настолько специфичен, что он будет применяться только к этой строке поиска, тогда этот стиль относится к классу search__input. Это делает вещи более многоразовыми. - person Jonathan Bowman; 14.06.2018