В БЭМ-методологии 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;
}