Кто как делает разметку по БЭМ?

Question

[Muvka]

Здравствуйте. Продолжаю пытаться освоить верстку по БЭМ, но не могу найти внятных ответов по нескольким моментам. Поделитесь своим опытом.
1. Допустим, в 90% блоков заголовки имеют одинаковые стили. Стоит ли для них делать отдельный класс или лучше у каждого блока стили заголовков прописывать в каждом блоке отдельно? Это можно реализовать миксином, не сложно, но правильно ли это? Ведь css больше по размеру становится.
2. Центровщик. Тот же вопрос. У каждого блока прописывать или создать класс container? Просто где то этот центровщик будет снаружи блока

<div class="block container">
  
</div>

А где-то внутри

<div class="block">
  <div class="block__container container">
    
  </div>
</div>

Это правильно будет?
3. И еще. Можно ли использовать глобальные стили в body для задания размера, цвета и шрифта? Для самого часто повторяющегося шрифта. Или лучше в каждом блоке отдельно задавать?
Может вопросы глупые, но ответа не могу найти, а разобраться очень хочется.

Comments

[Сергей delphinpro]

Заголовок вполне может быть, и чаще всего есть, отдельным блоком. Дополнительные стили в контексте родительского блока миксуются через элемент этого блока.

Контейнер тоже есть самостоятельный блок. И к нему так же могут миксоваться дополнительные стили.

Всё нормально, никаких противоречий.

[Muvka]

Сергей delphinpro, С одной стороны вроде и так, но с другой - зависимость от другого блока. Я не знаю, хорошо это или плохо) Потому и спрашиваю.

Answer 1

[Алекс Глебов]

1) миксины
2) .page__container
3) .page ему задайте, ну и для body стили можно
А стили шрифта в бем наследуются и это нормально

Comments

[Muvka]

по 2 вопросу - мне нужно понять, правильно ли использовать отдельный класс(блок) для центровщика. То, что он будет или элементом page или элементом block, это понятно.

[Алекс Глебов]

Да, центровщик и сетка отдельными элементами хороший тон

[Johny Smith]

Muvka, вы хотите добавлять в атрибут class напр. слово center чтобы чтото центрирвовать в конечном счёте, так?

<div class="block container center">
  
</div>

[Muvka]

Johny Smith, Нет. Класс container - это и есть центровщик. Он ограничивает максимальную ширину блока и центрирует

.container {
  width: 100%;
  max-width: 1200px;
  padding: 0 15px;
  margin: 0 auto;
}

[Johny Smith]

Muvka, не суть, но я бы лучше назвал что оно делает, потому что контейнер вроде обычно это подразумевается wrapper, через 2 года ябы не вспомнил что класс контейнер центрирует что-либо, ябы потом подумал что это просто какойто блок

[Muvka]

Johny Smith, Я постоянно container использую. По памяти из bootstrap. Потому, лично я, вряд ли забуду)

[Johny Smith]

Muvka, bootsrap по официальным докам учили, или сможете посоветовать какойто клёвый видос?

[Muvka]

Johny Smith, А чего там учить то? Официальная документация. Но я сам уже не использую бутстрап. Есть флексы. Это раньше проблемно было)

Answer 2

[McBernar]

1. Стилизую H1. Семантически это гораздо более правильно, нежели навешивать классы на теги.

2. Не надо быть заложником методологии. Если у вас есть модификатор для разных страниц и разных элементов — гораздо удобнее выносить его отдельным классом. Как, в общем-то, и делает большинство фреймворков.

3. Задаю отдельно, но это мой персональный бзик. Так проще твикать каждый стиль отдельно.

Comments

[Breeze1]

1. А если потом seoшник например решит, что это вовсе не h1, а span какой-нибудь. Вся вёрстка поедет

[McBernar]

Breeze1, не, с h1 точно не решит. И с h2 и h3. Это же семантика. Конечно, есть вариант, что дизайнер и фронт дурачки, но такое нет смысла рассматривать.