Мой вопрос - в широком смысле - достаточно обширен.
Так что... терпение, только терпение.
Правильно ли я понимаю суть BEM?
1) Блок - это независимый структурный элемент страницы (логотип, комментарий, строка поиска и пр. и пр.), который может быть перемещен в любое место без необходимости переписывать стили? Т.е. его стили не привязываются ни к одному из родительских элементов? Он самодостаточен?
2) Тут же возникает второй непонятный момент. Предполагается, что блок может быть свободно перемещен внутри страницы, например -
https://ru.bem.info/methodology/key-concepts/. Если взять пример по указанной ссылке, то там сказано, что логотип может быть поменян местами с формой авторизации. Но ведь это не возможно, т.к. блок станет зависимым и это противоречит концепции BEM. Я не смогу взять этот же блок (например, с position: absolute; right: 10px; top: 10px - внутри блока с position: relative) и воткнуть его на другую страницу, на которой он должен находиться слева. Чтобы переместить логотип, ему нужно будет назначить другой стиль. Единственным вариантом, который не ломает концепцию, является помещение этих независимых блоков в своеобразные плейсхолдеры. Какое место тогда отведено этим плейсхолдерам? Это что, тоже блоки? И даже если их и использовать, то перемещение не такое простое, как говорится. Не факт, что плейсхолдеры у взаимозаменяемых блоков будут подходящих друг под друга размеров. Поясните этот момент.
3) Элемент - совсем не может быть использован вне блока. Если так, то как описывать их стили? Вся иерархия от первого родительского блока: .block1 .block1__element? Или нужно указать только сам элемент, в имени которого и содержится уникальный признак, относящий этот элемент к конкретному блоку, в виде его имени?
4) Может ли элемент находиться внутри элемента? Полагаю, что да. Это лишь будет означать, что данный элемент не отделим от своего родителя. Как тогда именуется элемент внутри элемента?
5) Как обстоят дела с блоками внутри блоков? С одной стороны, блок нижнего уровня отделим от блока верхнего уровня, т.е. может быть использован отдельно. С другой стороны, в блоке верхнего уровня имеется определенное место для блока нижнего. И, возможно, если убрать часть блока верхнего уровня в виде блока нижнего уровня, то блок верхнего уровня может потерять смысл своего существования.
6) Пример из сети:
<div class="menu cf">
<a href="#" class="menu__trigger js-trigger">
<i class="ion-navicon-round"></i>
</a>
Что за cf? Можно ли вот так засовывать какие-то стили? И что, если мне нужно, чтобы при щелчке на каком-то конкретном элементе блока, происходило определенное действие? Я присвою стиль элементу. Вот только как обозвать этот стиль, что-то, с использованием синтаксиса BEM?
Простой
Средний