В БЭМ-методологии CSS используется для оформления страниц и является одной из технологий реализации блока.

HTML для CSS

Как сделать HTML-обертку?

Традиционно, HTML-обертки применяются с целью:

  • расположить HTML-элементы относительно других;
  • позиционировать элементы внутри блока.

В БЭМ для решения аналогичных задач, используют миксы или создают дополнительный элемент блока. Не стоит создавать дополнительные абстрактные блоки-обертки. Они не несут никакой дополнительной специфики.

Расположение блока относительно других блоков

Для позиционирования блока относительно других блоков, в большинстве случаев, используется микс.

Пример

HTML-реализация:

<body class="page"> 
  <!-- верхний колонтитул и навигация -->
  <header class="header page__header">...</header> 
  <!-- нижний колонтитул --> 
  <footer class="footer page__footer">...</footer> 
</body>

CSS-реализация:

.page__header { 
  padding: 20px; 
} 
.page__footer { 
  padding: 50px; 
}

Позиционирование элементов внутри блока

Для позиционирования вложенных HTML-элементов, в большинстве случаев, создается дополнительный элемент блока (например, block__inner).

Пример

HTML-реализация:

<body class="page"> 
  <div class="page__inner"> 
    <!-- верхний колонтитул и навигация --> 
    <header class="header">...</header> 
    <!-- нижний колонтитул --> 
    <footer class="footer">...</footer> 
  </div> 
</body>

CSS-реализация:

.page__inner { 
  margin-right: auto; 
  margin-left: auto; 
  width: 960px; 
}

results matching ""

    No results matching ""