Как правильно структурировать сайт с точки зрения BEM?

Question

[DTX]

Есть знатоки BEM?

Пытаюсь понять, что к чему на реальном примере - получается каша. Нужен совет гуру, как правильно сделать.
Мне не понятно, где использоваться элемент, а где блок. Визуально каждый блоки состоит из других блоков, и возникает дилемма - трактовать элемент как блок или как элемент. Чтобы было понятно о чем речь, предлагаю взглянуть на старательно подготовленную картинку:

Помогите составить правильную структуру сайта.
На всякий случай вот код:
https://codepen.io/DTX/pen/oweoRL

Comments

[Сергей delphinpro]

https://codepen.io/delphinpro/pen/zzdpwr?editors=1100

[DTX]

Сергей: Спасибо!

[DTX]

Сергей: Одно смущает. Классы .username, .stats. Не стоит их сделать более специфичными? На сайте же может быть юзернеймов/сайтов.

[Сергей delphinpro]

DTX: ну один раз-то можно использовать и такие классы, а для других блоков уже придумывать что-то =) в любом случае выбор имени класса к БЭМ отношения не имеет )

[DTX]

Сергей: понял, спс. Отмечу решением, если закинешь в ответы

Answer 1

[Vasyl Kovbassa]

Блок - логически завершенный элемент интерфейста. Которому предоставляются наиболее общие стили а также ресет браузерных стилей.
Блок_модификатор - селектор отвечает за внутренний вид блока. Все от бордера и внутрь. Шрифты, размеры, цвета ...

Блок__элемент - селектор отвечает за позиционирование элемента внутри родительского блока. От своего бордера наружу до бордера родителя.

На одном узле могут присутствовать все три сущности одновременно. Любой блок будучи блоком может быть элементом своего родительского блока.
Но при этом элемент не может иметь дочерних элементов, а только блок.
Тоесть както так:
https://codepen.io/kovbassa/pen/ObrqZv?editors=1100

Comments

[DTX]

В приведенном примере есть только один уровень вложенности. Тут проблем не возникает. А вот на реальном примере можно запутаться. Мб на примере моего codepen попробуете?

Плюс там указаны шрифты в блоках, а в модификаторах как в ответе. В общем, немного запутанно.

[Vasyl Kovbassa]

DTX: Так в том и дело что только один уровень вложенности. Абстрагуйся от от разметки. То, что один div в другом, не значит, что он должен быть его элементом. В терминологии БЭМ они могут быть равнозначными и взаимно независимыми бем сущностями.

[Vasyl Kovbassa]

где-то на скорую так, чтобы сделать правильно надо видеть проект полностью.

.l-site__sidebar
 .sidebar
   .sidebar-header.t-bold.t-center   //- .t-bold & .t-center примеси для шрифтов
     .button.button_ico.button_xl.button_bars.sidebar__bars 
     .image.image_rounded.avatar.sitebar__avatar
     .button.button_ico.button_xl.button_bell.sitebar__bell 
     .title.user-name.sidebar__user-name
     .user-stats.sidebar__user-stats
//-                .......

Answer 2

[Islam Ibakaev]

примерно так

.l-site
  .l-site__main 
  .l-site__sidebar.sidebar
    .sidebar__hamburger
    
    .sidebar__user.sidebar-user
      .sidebar-user__avatar
      .sidebar-user__name
      .sidebar-user__rating
      .sidebar-user__followers
      
    .sidebar__notifications.sidebar-notifications
      .sidebar-notifications__icon
      .sidebar-notifications__value

    ul.sidebar__nav.sidebar-nav
        li.sidebar-nav__item: a.sidebar-nav__link  
        li.sidebar-nav__item: a.sidebar-nav__link  
        li.sidebar-nav__item: a.sidebar-nav__link  
        li.sidebar-nav__item: a.sidebar-nav__link