Добрый день. У меня проблема. Пока читаешь "Быстрый старт" все здорово все красиво, как только начинаешь делать не складывается. Очень сильно интересуют блоки.
Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование. Т.е. я не имею права пользоваться такими вещами для блока как margin, padding, border, position, float и т.д.???
Каким образом тогда их так просто и красиво меняют местами в примерах? https://ru.bem.info/methodology/key-concepts/
раздел "Свободное перемещение".
Дают красивый пример с блоком Head block внутри которого очень легко и не принужденно двигают еще 3 блока logo, search, auth. "Так, например, логотип и форму авторизации можно поменять местами. При этом вносить изменения в CSS или JavaScript-код блока не нужно." - сказано в примере.
Но с точки зрения HTML мы имеем слеющий код
<div class="headblock">
<div class="logoblock"></div>
<div class="searchblock"></div>
<div class="authblock"></div>
</div>
(все отлично, все красиво. Мы имеем блок в который вложены другие блоки)
А с точки зрения CSS у них как минимум у всех будут значения float а это уже противоречит методологии БЭМ, и для других проектов мы эти блоки использовать не сможем, потому что они потребуют редактирование CSS.
Как быть?
На самом деле ответ есть там же — на bem.info: https://ru.bem.info/methodology/css/#Внешняя-геометрия-и-позиционирование
@tadatuta Хорошо, а если у меня есть блок MENU, и меню это я хочу сделать фиксированным. Мне создать еще 1 класс например MENU_POSITION?
да, можно и так, если фиксированное меню имеет смысл само по себе (безотносительно контекста использования)
Но ведь это не правильно!?
блок и элемент получился на одном DOM-элементе так можно разве?
Не только можно, но и нужно. Это называется микс
В варианте с меню я бы сделал через родительский блок, например блок
page. Примиксовал бы блокуmenuэлементpage__menuи в нем уже указал позицию.