Каким образом реализовать HTML структуру по БЭМ?

Question

[fregire]

Здравствуйте! Столкнулся с проблемой: можно ли в блоке создавать элемент, который центрирует весь контент этого блока? Сделал это таким образом:

<div class="page__header">
		<div class="page__wrapper">
			<header class="header">
				<div class="header__left-content">
					<div class="logo">
						<!-- Logo -->
					</div>
				</div>
				<div class="header__right-content">
					<ul class="nav">
						<!-- Li -->
					</ul>
					<div class="header__search">
						<!-- Input -->
					</div>
				</div>
			</header>
		</div>
	</div>

Можно было бы сократить вложенность, если сделать header__wrapper внутри блока header, но правильна ли такая структура?

Answer 1

[Serj-One]

Зачем создавать элемент, если можно создать модификатор блока?
<div class="header header--center"></div>

Comments

[fregire]

Спасибо)) Не додумался)

[fregire]

И то есть так можно делать на каждый блок?

[Serj-One]

fregire, Да, любой блок и элемент может быть изменён/дополнен модификатором.

Answer 2

[rusglov]

<div class="page__wrapper">
      <header class="header page__header">
        <div class="header__left-content">
          <div class="logo">
            <!-- Logo -->
          </div>
        </div>
        <div class="header__right-content">
          <ul class="nav">
            <!-- Li -->
          </ul>
          <div class="header__search">
            <!-- Input -->
          </div>
        </div>
      </header>
    </div>
  </div>

Все это можно сделать с помощью миксов, а не через модификатор, т.к через модификатор настраивается внешний вид, а не позиционирование.

Comments

[fregire]

Спасибо)