Как пользоваться BEM?

Question

[hbuser]

Мой вопрос - в широком смысле - достаточно обширен.
Так что... терпение, только терпение.
Правильно ли я понимаю суть 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?

Answer 1

[Danila]

1) Всё верно.

2) В стилях блока мы описываем только его внешний вид, внутренние отступы и т.д, блок не знает где он находится и какой его размер, позиционировать можно элементы.
к примеру у нас есть блок авторизации в хедере

<header class="header">
  <div class="header__auth">
    <div class="auth">
      <div class="auth__item"></div>
      <div class="auth__item"></div>
    </div>
  </div>
</header>

в .header__auth мы описываем положение и размер элемента, в .auth описываем внешний вид.

3) Только класс элемента, но бывают исключения, например используя модификаторы иногда можно воспользоваться каскадом.

4) Может, называете точно так-же как и другие элементы
пример:

<ul class="props__list">
    <li class="props__item">
        <span class="props__label">Weight:</span>
        <span class="props__value">128</span>
    </li>
</ul>

хорошие примеры можете посмотреть тут

5) Не совсем понял вопроса.

6) cf = clearfix, общепринятый класс, используется как исключение из правил БЭМа, хотя и не приветствуется. Для интерактивности и щелчков нужно использовать модификаторы.
пример:
<a class="button button--is-active">click me</a>

Comments

[Erling]

Данила хочется увидеть ваше мнение, будет ли ошибочным именованием классов для элементов, например:
- props__item
-- props__item-label
-- props__item-value

[Danila]

Erling: это ни к чему, у элемента не может быть элементов
если вам нужно, можно props__item вынести как отдельный блок
например:
-prop
--prop__label
--prop__value

либо использовать элементы, как указано в первом примере

Answer 2

[Олег]

1. Да
2. У блока не должно быть позиционирования, для этого можно использовать миксы, например:

<div class="header">
	<div class="logo header__logo"></div>
</div>

на .header__logo вещаем позиционирование или делаем обертку элементом.

3. Только сам элемент, в бэме лучше избегать каскада.
4. Элемент у элемента - это не правильно и означает, что это блок, а не элемент. Вкладывать элементы одного блока друг в друга можно.
5. Отлично, блоки внутри других блоков - это норма.
6. Плохой пример, хороший бем описывает сам себя, исходя из классов можно практически точно сказать, что это и зачем.