Как использовать БЭМ-блок на разных HTML-тэгах

Всем привет!

Пытаюсь разобраться как правильно использовать БЭМ для заголовков и пока не могу найти правильное решение.

Поясню на примере: Есть блок title

.title {
    padding: 18px 0;
    font-size: 36px;
    font-weight: bold;
}

который используется так

<h1 class="title">Some text</h1>

Тут на моей странице меняется семантическая структура и тот же самый заголовок семантически становится h2. И теперь у него другие внешние отступы поэтому блок на странице выглядит иначе.

Делать глобальный CSS-reset противоречит БЭМ (поскольку это глобальные стили и могут меняться от проекта к проекту)
Сбросить внешние отступы в самом блоке я не имею права (поскольку это внешняя стилизация)
Вариант который я сейчас вижу кажется мне очень костыльным
```
<div class="title">
  <h2 class="title__text">Some text<h2>
</div>
```
```
.title__text {
  margin: 0;
  padding: 18px 0;
  font-size: 36px;
  font-weight: bold;
}
```
То есть сам блок это пустая обёртка а уже h1 или h2 - это элемент блока, который я могу стилизовать как мне нравится.

Очень хочу услышать ваше мнение поэтому поводу. Как правильно сделать это по БЭМ?

4 years ago

Realetive

Модификторы

4 years ago

mgrinko

@Realetive Прошу прощения Не понимаю как тут помогут модификаторы Ведь в модификаторе блока так же как и в блоке я не имею права устанавливать margin

4 years ago

Realetive

.title {
  margin: 0;
  font-weight: bold;
}

.title_size_m {
  font-size: 1em;
}

.title_size_l {
  font-size: 2em;
}

.title_size_xl {
  font-size: 3em;
}

<h1 class="title title_size_l">Большой заголовок</h1>
<h2 class="title title_size_xl">Очень большой заголовок</h2>
<h1 class="title title_size_m">Нормальный заголовок</h1>

4 years ago

Realetive

При чём тут margin, не понял, если честно. Нужно «отодвинуть» .title от нижележащего контента?

4 years ago

mgrinko

Задача в том чтобы у блока не было непредсказуемых отступов (например марждинов которые могут отличаться в разных браузерах)

А БЭМ запрещает задавать блоку внешнюю геометрию (margin)

Если я теперь смиксую вот такой блок с элементом родительского блока то реальный отступ будет зависеть от порядка подключения компонентов в финальную сборку

<div class="parent">
  <h1 class="title parent__title">Some text</h1>
</div>

Вот так отступ не применится

.parent__title {
  margin-bottom: 30px;
}
.title {
  margin: 0;
}

А вот так применится

.title {
  margin: 0;
}
.parent__title {
  margin-bottom: 30px;
}

Но зависеть от порядка в котором блоки будут добавлены в финальный CSS мы точно не хотим

@Realetive Большое спасибо, что помогаешь разобраться

4 years ago

mgrinko

Сейчас склоняюсь к тому, что переносить блок из проекта в проект это конечно круто, но на практике мы чаще всего работаем в рамках одного проекта, поэтому проще сделать глобальный reset (и это решает все проблемы), чем выдумывать костыли.

4 years ago

Realetive

БЭМ не даст ответа, как решить «проблему» с порядком подключения — это задача сборщиков (в БЭМ-стеке, например, это решалось deps-файлами). В Реакте, например, можно просто соблюсти порядок импортов css-файлов — сначала импотирвать блок Title, потом — подключить стили Parent-Title.

4 years ago

mgrinko

Понял. Ещё раз спасибо за помощь

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