From a BEM point of view, which is better?

A

abusabir2015-12-30 20:20:28

css

abusabir, 2015-12-30 20:20:28

How closer to BEM principles - wrap everything inside the body in an auxiliary center-wrapper or wrap each independent horizontal block (footer, main, header) inside it?
At the same time, centering is really needed, nothing rubber is required

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

N

norman, 2015-12-30
@rushhighflyer

<div class="wrapper">
  <header class="header">
    <div class="header__item">
    </div>
  </header>
  <main class="main">
  </main>
и так далее
</div>

S

sim3x, 2015-12-30
@sim3x

Если предполагается, что блоки будут реюзаться и таки будут центрироваться или блоки будут иметь разное поведение при media queries - нужно использовать обертки для каждого блока
Если нет - оборачивать все в один блок

D

dom1n1k, 2015-12-30
@dom1n1k

От БЭМа это не зависит, это определяется логикой макета.
Один враппер - если есть 100% уверенности, что все блоки будут одной ширины.
А то очень часто бывает, что почти все на (условно говоря) 1000px, но 1 или 2 - на всю ширину экрана (например, какой-нибудь верхний тулбар над шапкой, с социалочками).
Ещё бывает, что где-то в середине блок текста, который сам по себе обычной ширины, но под него подложен фон шириной 100%.

�

Константин Величко, 2016-02-10
@Zoxon

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

<!DOCTYPE html>
<html lang="ru" class="no-js">
  <head>...</head>

  <body class="page">
    <div class="page__wrapper">
      <div class="page__header">
        <header class="header">...</header>
      </div>
      <div class="page__main">...</div>
      <div class="page__buffer"></div>
    </div>
    <div class="page__footer">
      <footer class="footer">...</footer>
    </div>
  </body>

</html>