Как в БЭМ обнулять браузерные стили, правильно создавать модификаторы, независимые блоки?

Question

[r_g_b_a]

Здравствуйте.
Изучаю БЭМ и на некоторые вопросы не могу найти ответ:

1) Как обнулять браузерные стили по умолчанию?
Согласно БЭМ

Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование.

Что делать, если у нас есть блоки <ul class="nav"> или <button class="button">, у которых по умолчанию присутствует браузерный margin? Каждый раз миксовать с классом элемента (например, <ul class="parent__nav nav">) и уже на нем обнулять margin?
На сайте https://ru.bem.info/ для .nav они просто прописали margin: 0, что идет в разрез с их же правилами.

2) Как правильно выносить стили в модификаторы?
Пример: есть такой код для кнопки

.button {
	padding: 20px;
	...
	тут много других правил
}

Через некоторое время возникла необходимость сделать такую же кнопку, но поменьше. Изначально при верстке макета я бы сделал так:

.button {
	...
	тут много других правил
}
.button_size_large {
	padding: 20px
}
.button_size_small {
	padding: 10px
}

Но сейчас у нас два варианта:
1 - переписать стили по примеру выше, найти все старые кнопки в html и добавить им модификатор button_size_large;
2 - сделать только класс button_size_small, который будет переопределять старый padding для .button, при этом нужно следить, чтобы класс в таблице стилей находился ниже .button, либо повышать специфичность, что не по БЭМ'у.
С постоянными такими доработками код превращается в кучу мусора, и нормально он выглядит только после первоначальной верстки до каких-либо правок. В чем тут преимущество БЭМ от обычного написания стилей с вложенностью, !important и т.д., или я что-то не так делаю?

3) Согласно БЭМ'у блоки не зависимы, можно как угодно менять их положение на странице, при этом они должны корректно выглядеть.
Предположим, что есть заголовок с размером шрифта 30px. Я знаю, что он на момент разработки шаблона используется только в .content (width:80%) и нормально там выглядит. Должен ли я думать о том, что в будущем заголовок могут поместить в .sidebar (width: 20%), и там 30px явно будет много.
Или цвет заголовка в .content красный, при этом .sidebar имеет красный фон, и при добавлении его туда текст будет не читабельным.
То же касается адаптива.
Как я должен обеспечивать независимость блока от контекста использования?

4) Сколько не искал, ни разу не находил шаблон сверстанный по БЭМ-методологии, который бы на 100% соответствовал их подходу. Такие вообще существуют?
Тот же https://ru.bem.info как я писал выше, обнуляет margin для БЭМ-блока. И тут все нормально, пока не возникнет необходимость еще где-то использовать это меню с другим отступом.
Часто вижу сообщения в стиле

БЭМ - это не набор строгих правил, а лишь рекомендация...

А потом куда не посмотришь, у каждого "свой" БЭМ, со своими исключениями и правилами, которые известны лишь автору.

Answer 1

[Realetive]

1)

они просто прописали margin: 0, что идет в разрез с их же правилами

— Нет, как раз нулевое значение для всех блоков и позволяет соблюсти «невлияние на внешнюю геометрию». Т. е. это нормально и допустимо для любого блока — обнулить его margin, position (border'ы, в принципе, можно оставить при указании корректного box-sizing)

2) в идеале должно быть достаточно «сделать только класс button_size_small», а за порядком должен следить сборщик. Если использовать «вложенные селекторы», то будет нагляднее:

.button {
  padding: 20px;

  &_size_small {
    padding: 10px;
  }
}

3) Размер шрифта вполне может быть задан в модификаторе size:

.heading {
  margin: 0;
  font-feight: bold;

  &_size_s { font-size: 18px; }
  &_size_m { font-size: 24px; }
  &_size_l {  font-size: 30px; }
}

А тот, кто будет менять положение блока в HTML, помимо «вырезать-вставить» сможет ещё и обновить модификатор, изменив размер шрифта без залезания в CSS.

4) Следовать БЭМ достаточно непросто, если держать эти правила в голове. БЭМ-разработчики используют инструменты (т. н. «БЭМ-стек»), которые автоматизируют всю рутину, но порог вхождения достаточно высок. Могу лишь посоветовать не стесняться задавать подобные вопросы в чатике https://t.me/bem_ru

Comments

[r_g_b_a]

1) Но ведь если написать так

.sidebar__button {margin: 10px}
.button {margin:0}
<button class="sidebar__button button">

то отступ не появится из-за того, что мы для БЭМ-блока задали внешнюю геометрию (пусть и нулевую). Из-за этого нам либо нужно держать в голове, что у этого блока обнуляется отступ и использовать для него обертку, а не микс. Либо соблюдать порядок стилей (обязательно использовать сборщик, БЭМ-стек)

3) А как насчет адаптива?
Например, у меня есть форма с полем и кнопкой, которые выводятся в ряд или колонку в зависимости от ширины блока (пусть родителем будет .content), в котором они находятся на момент разработки шаблона.

.form {
	display: flex;
	flex-direction: column;
}
@media (min-width: 768px) {
	.form {
		flex-direction: row;
	}
}

Если в теории в будущем я захочу поместить этот блок в узкий .sidebar, то мне придется для него прописывать другие media-запросы. Должен ли я это изначально учитывать, прописывая media-запросы основываясь на текущем местоположении блока:

.content__form {
	display: flex;
	flex-direction: column;
}
@media (min-width: 768px) {
	.content__form {
		flex-direction: row;
	}
}

[Realetive]

r_g_b_a,

1) Да, всё верно — держать в голове или научить сборщик. БЭМ не даст ответ на этот вопрос.

3) Тут тоже нет однозначного ответа. Если представление компонента зависит от ширины родительского блока, то это выходит за понимание методологии — придётся использовать или CSS Container (Element) Query, или соответсвующие модификаторы.

P. S. Как любят говорить БЭМ-евангелисты: «Руководствуйтесь здравым смыслом» — БЭМ помогает напоминать о том, что полезно задумываться о том, какие CSS-свойства откуда проистекают, но best-practices не так много, потому что некоторые решения довольно специфичны. По себе могу сказать, наверное, только то, что это (в большей степени) приходит с опытом (за последние пару лет вёрстки я не встречал каких-то новых паттернов, кроме заведомо абсурдных).