Layout и Bem. Что к чему?

Помогите разобраться с, почти Бем`ом. И так, есть такой html код:
развернуть

<div class="Layout">

	<div class="Layout__row Layout__rowHeader">
		<div class="Layout__cellHeader">
			Пусть это HEADER
		</div>
	</div>

	<div class="Layout__row Layout__rowNavbar">
		<div class="Layout__cellNavbar">
			А это пусть NAVBAR
		</div>
	</div>

	<div class="Layout__row Layout__rowBody">

		<div class="Layout__cellBody">

			<main class="Layout__colMain">
				main
			</main>

			<aside class="Layout__colSide">
				side
			</aside>
		</div>
	</div>

	<div class="Layout__row Layout__rowFooter">
		<div class="Layout__cellFooter">
			Это FOOTER
		</div>
	</div>

</div>


К примеру, Layout__row и Layout__rowHeader - это один CSS файл layout.css.

Насколько правильно, если Layout__rowHeader вынести из layout.css в header.css?
Layout__row Layout__rowHeader
делать так:
Layout__row Header__row

Вообще, разделить на слои всё, это есть хорошо?

Насколько правильно так верстать: https://codepen.io/git2ss/full/jOMwKWz
Дайте критики, совета... Посмотрите на блоки в сайт баре (box`ы).
  • Вопрос задан
  • 499 просмотров
Решения вопроса 2
Realetive
@Realetive
MODX Ambassador России, самозванный БЭМ-евангелист
Насколько правильно, если Layout__rowHeader вынести из layout.css в header.css?
Layout__row Layout__rowHeader


— Ни на сколько. Если Layout__rowHeader «ближе» по стилизации к Header, его лучше вообще удалить, а стили перенести в header.css

Вообще, разделить на слои всё, это есть хорошо?


Хорошо, но если композиция действительно увеличивает переиспользуемость, уменьшая связанность между компонентами.

Насколько правильно так верстать: https://codepen.io/git2ss/full/jOMwKWz


От БЭМа тут только классы «через чёрточку»:
1) Header__row, Body__row и Footer__row объявлены вне своих блоков (элементы не должны существовать за пределами блока)
Ответ написан
delphinpro
@delphinpro Куратор тега CSS
frontend developer
<div class="layout">

  <div class="layout__row header">
    <div class="header__cell">
      Пусть это HEADER
    </div>
  </div>

  <div class="layout__row navbar">
    <div class="navbar__cell">
      А это пусть NAVBAR
    </div>
  </div>

  <!-- variant 1 -->
  <div class="layout__row">
    <div class="layout__container">
      <main class="layout__col layout__col_main">
        main
      </main>
      <aside class="layout__col layout__col_side">
        side
      </aside>
    </div>
  </div>

  <!-- variant 2 -->
  <div class="layout__row">
    <div class="layout__container">
      <main class="layout__main">
        main
      </main>
      <aside class="layout__side">
        side
      </aside>
    </div>
  </div>

  <div class="layout__row footer">
    <div class="footer__cell">
      Это FOOTER
    </div>
  </div>

</div>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы