Несколько вопросов по БЭМ

Форум /

Вот на практике я столкнулся с несколькими вопросами по БЭМ и, хотя, я пересмотрел, наверное, все БЭМ-митапы и многие другие видео по БЭМУ, для меня ответы на, казалось, такие очевидные вопросы остались не совсем очевидными.

Допустим, у меня есть такая структура:

...
<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? Что сделать в этом случае?

3 years ago

Realetive

1) Родительского. Т. е. достаточно сделать корневой блок, например, page и повесить его класс на <body class="page">, тогда все вложенные сущности автомтически станут элементами блока page:

<body class="page">
  <header class="page__haader header">…</header>
</body>

.page__header {
  margin: 10px;
}

2) В продолжение ответа, раз эти отступы диктуются расположением в блоке page, то становится очевидно, что это отступы у этих элементов.

.page_route_contacts .page__header {
  margin-bottom: 15px;
}

4) Да, h-заголовок — вполне самостоятельная сущность, «заслуживающая» самостоятельного блока. Я предпочитаю называть heading (а не title, чтобы не было путаницы с одноимённым тегом). А размеры — это модификации:

<h1 class="heading heading_size_l">Heading</h1>

А если нужно выделить новое состояние, вполне логично сделать это через модификатор:

<h1 class="heading heading_size_l heading_home">Home</h1>

Если размер 30px — единственный и больше нигде не встречается, он станет частью класса heading_home, если повторяется — тогда это не heading_size_l, а heading_size_xl.

Главное, чтобы стили подключались последовательно (сначала heading_size_*, потом heading_home).

3 years ago

saudadeandbliss

О, огромное спасибо, там еще я не выделил в вопрос (после 2) но это было вопросом:

Но что если для второго такого-же блока мне нужно, чтобы правый внешний отступ был 20px: margin-right: 20px (и это исключительно особенность его расположения на этой страницы, как и внешние отступы по 10px, просто для второго такого-же блока правый отступ нужен в 20px).

Те у меня будут:

...
<body class="page">

<header class="header page__header">
  <span class="header__logo">LOGO</span>
</header>

<h1heading heading--home>Its home page</h1>

<div class="some-block page__some-block">
  <p class="some-block__text">Some stuff</p>
</div>

<div class="some-block page__some-block">
  <p class="some-block__text">Some another stuff</p>
</div>

</body>
</html>

Тут в модификатор не выделю (some-block--home), тк нельзя внешнее позиционирование для модификатора блока.

Что в этом случае?

3 years ago

Realetive

Как на счёт:

<div class="some-block page__some-block">
  <p class="some-block__text">Some stuff</p>
</div>

- <div class="some-block page__some-block">
+ <div class="some-block page__some-block page__some-block_special">
  <p class="some-block__text">Some another stuff</p>
</div>

.page__some-block_special {
  margin-right: 20px;
}

3 years ago

saudadeandbliss

аааа, точно, спасибо))))

Чтобы оставлять комментарии, необходимо авторизоваться.