Вот на практике я столкнулся с несколькими вопросами по БЭМ и, хотя, я пересмотрел, наверное, все БЭМ-митапы и многие другие видео по БЭМУ, для меня ответы на, казалось, такие очевидные вопросы остались не совсем очевидными.
Допустим, у меня есть такая структура:
...
<body>
<header class="header">
<span class="header__logo">LOGO</span>
</header>
<h1>Its home page</h1>
<div class="some-block">
<p class="some-block__text">Some stuff</p>
</div>
<div class="some-block">
<p class="some-block__text">Some another stuff</p>
</div>
</body>
</html>
И CSS:
.header {
background-color: orangered;
}
.some-block {
background-color: orange;
}
.some-block__text {
margin: 0;
}
Первый вопрос. Что если мне нужно для блока Header поставить margin-bottom: 10px
? Так как это блок и я хочу его переиспользовать, то для него задать я не могу. В таких случаях идеально должны подойти миксы, те сделать Header элементом другого блока, НО какого?
...
.???__header {
margin-bottom: 10px;
}
Второй вопрос. Вот у меня на этой странице есть 2 блока Some Block и для них мне нужно сделать margin: 15px
, те мне опять же нужно сделать его элементом какого-то блока (какого и как я пойму из первого ответа) и опять же сделать:
...
.???__some-block (или?) {
margin: 10px;
}
Но что если для второго такого-же блока мне нужно, чтобы правый внешний отступ был 20px: margin-right: 20px
(и это исключительно особенность его расположения на этой страницы, как и внешние отступы по 10px, просто для второго такого-же блока правый отступ нужен в 20px).
Третий вопрос. Что если у меня появились еще 3 дополнительных страницы, например, About, Contacts и Policy на каждой из которых (КРОМЕ Contacts) у блока Header как и на странице Home margin-bottom: 10px
, а на странице Contacts margin-bottom: 15px
(это чисто дизайнерская особенность этой странице и этот отступ для блока Header в 15px
зависит только от того, что он находится на странице Contacts).
Четвертый вопрос. На каждой странице, как в примере со страницей Home у меня есть заголовок (h1), который показывает на какой странице я нахожусь и стили которого я до этого момента оставлял базовыми, но вот теперь я решил задать, что на всех этих страницах он будет размером в 27px
, те мне его нужно выделить в отдельный блок? Или же на каждой странице сделать его элементом какого-то другого абстрактного блока (какого я пойму из первого вопроса)?
И вот я выделил как-то этот заголовок, но что если на странице Home (что является особенностью этой страницы) этот заголовок имеет размер 30px
и color: green
? Что сделать в этом случае?