Как разметить эту простую конструкцию в соответствии с БЭМ?

Question

[pacman123]

Пытаюсь разобраться в БЭМ, не уверен что правильно понимаю концепцию.
Если вы владеете БЭМ, не могли бы разметить эту простую конструкцию для примера?
https://codepen.io/anon/pen/ReOqgM

Answer 1

[Ankhena]

div__title для заголовка
div__button (если нужен) btn двойной класс для кнопки (зачем p внутри кнопки я не знаю)
div__text для абзацев

Comments

[pacman123]

вопрос - почему два нижних подчеркивания? они ведь ставятся перед модификатором?

[Ankhena]

pacman123, есть 2 варианта написания

имя-блока__имя-элемента_имя-модификатора
имя-блока__имя-элемента--имя-модификатора

мне больше нравится второй, визуально проще отделять одно от другого.

[pacman123]

Ankhena, понял, большое спасибо

[pacman123]

Ankhena, как выглядил бы модификатор применительно к данному примеру?

.div__button--active {
      background-color: red;
      }

Так?

[Ankhena]

pacman123, да
button class="div__button div__button--active"

[Froggyweb]

pacman123,
синтаксис и подчеркивание - это вкусовщина и попытки отделить код. Раньше весь бем писался через b-блок
button - наверняка переиспользуемый блок. Может быть модификатор слайдер, или еще какая-то хрень.
название блока див - дичь. Такие классы даже в СSS недопустимы.

[Ankhena]

pacman123,
Но лучше бы не так.
Лучше так

button class="div__button (если нужен) btn btn--active"

потому что кнопки переиспользуются

[pacman123]

Ankhena, ок, а если блок, у которого в разных местах будет разное фоновое изображение. то как это отразить? модификатор может быть у блока? надеюсь понятно сформулировал.

[Ankhena]

Froggyweb, через b- писали для того, чтобы отделить блоки, которые переписали по БЭМ, от тех, которые остались по-старому.
Если кто-то так писал в новом сайте, ну что.. сочувствие ему.

Название класса div это примерно как возьмем n яблок.

[Ankhena]

pacman123, да, у блока может быть модификатор.
Выше написала пример для кнопки.

[pacman123]

Ankhena, спасибо, вроде въехал

[Ankhena]

pacman123, На сайте БЭМ всё достаточно хорошо изложено https://ru.bem.info/methodology/quick-start/

[pacman123]

Ankhena, пожалуйста гляньте правильно ли прописана вложенность для текста?
https://codepen.io/anon/pen/ZqNjYZ

[Ankhena]

pacman123, нет
у элементов не бывает элементов
а двойной элемент элемента это я даже придумать не могу зачем

[Ankhena]

pacman123,
либо так

<div class="block1">
  <div class="block1__block2">
    <p class="block1__text block1__text--red">Lorem ipsum</p>
  </div>
</div>

либо так

<div class="block1">
  <div class="block1__block2 block2">
    <p class="block2__text block2__text--red">Lorem ipsum</p>
  </div>
</div>