БЭМ-блок: свойство display и задание размеров?

Question

[r_g_b_a]

1) Цитата с документации

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

Сюда входит свойство display? Например, у меня есть кнопка <button class="button"></button> с display: inline-flex, которая является БЭМ-блоком. Я ее миксую с каким-нибудь БЭМ-элементом для позиционирования <button class="button content__button"></button>. Но если вдруг в .content__button окажется иное свойство display, то кнопка развалится. Это же не нормальная ситуация, что микс сломает верстку всего блока?

2) Есть кнопка, которая должна иметь фиксированные размеры 100x50 . Как ее сверстать согласно БЭМ-методологии? Делать внешние обертки?

<div class="button">
	<button class="button__inner" style="width:100px;height:50px"></button>
</div>

Comments

[Ярослав Иванов]

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

Answer 1

[Realetive]

Дополню ответ Виталий на второй вопрос: то, что у кнопки фикс. размер, на самом деле заблуждение. У этой кнопки ширина равна или всей доступной ширине (тогда ширина наследуется от той сущности, в которой лежит кнопка-блок и скорее всего это элемент родительского блока), или ширине доступного контента (например, в кнопке лежит блок-иконка, но ширину мы задаём элементу кнопки, как вы привели пример с .button__inner):

https://codepen.io/Realetive/pen/jOPwRxY