Правильный ли БЭМ?

Question

[warcevil]

Всем привет! Оцените пожалуйста качество css по БЭМ и насколько хорошо я его совмещаю с sass. Как можете увидеть, через дефис прямо конкатенацией я присоединяю как бы под-элементы чтоли.. И еще интересно, может ли допустим в большой секции какого нибудь ленда к примеру не быть блоков внутри? Я так понимаю, что вполне, потому что если мы не собираемся использовать какое нибудь шапочное меню в другом месте, то и не стоит делать его отдельным блоком, таким образом пункт меню будет такой - header__menu-item. Я здесь правильно понимаю? Если же нет, то как давать тогда нейм этому меню, если скажем у меня 3 вида меню на странице? Не будешь же писать menu-1, menu-2 и т.д.. А если привязывать к названию класса его положение: menu-sidebar, menu-top, menu-bottom и т.д. то и смысл теряется. Вообщем проясните плиз мои непонятки..

.section-videos {
  &__slider {
    margin-top: 20px;
  }

  &__box {
    text-align: center;
    padding: 16px 18px 40px 18px;
    background: #121d44;

    &-title {
      color: #fff;
      font-size: 28px;
      margin-left: 68px;
      position: relative;
      display: inline-block;
      padding-top: 12px;
      margin-bottom: 24px;
    
      &_alloc {
         background: #545543;
}

      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: -68px;
        width: 50px;
        height: 56px;
        background: url("../img/logo.png");
        background-size: 100% 100%;
      }
    }

    &-text {
      display: inline-block;
      color: #fff;
      font-size: 24px;
      margin-bottom: 34px;
    }
  }
}

Comments

[warcevil]

Да и еще такой случай.. К примеру у меня есть секция, а в ней title. И как быть, если у одной секции какой то он скажем приподнят.. Это модификатор?

[Furyisa]

Да как угодно можно. Можно через модификатор, можно миксами, суть почти одна.

[Furyisa]

это про sass

Answer 1

[alexesDev]

Я бы не делал третий уровень вложения (исключаея before, after и модификаторы)... вы экономите немного в селекторе, но там куча пробелов в замен и вообще оригинальные БЭМ стили плоские совсем.

Comments

[warcevil]

Да, я тоже думаю что не надо так делать.. А что за оригинальные стили, вы о чем?

[alexesDev]

Оригинальные, которые в bem-components и подобных офф репозиториях, раньше там не использовали препроцессор.
Сейчас там все же 2 уровня https://github.com/bem/bem-components/blob/v5/desi...

PS. Если вы используете node, то смотрите в сторону css-modules, а есть React, то styled-compnents. Оригинальным BEM все же не так удобно пользоваться.

Answer 2

[Vasyl Kovbassa]

Слишком сложно, Sass есть инструмент для облегчения жизни, а ты ее усложняешь.
Сделай пример на codepen, ато глаза разбегаются.
Несколько моих примеров для понимания подхода, может пригодится:
codepen.io/kovbassa/pen/ObrqZv?editors=1100 - нативный scss
codepen.io/kovbassa/pen/MJveyr - scss с bem миксином (+ комменты)

Comments

[warcevil]

Большое спасибо за примеры, стало понятней.. Но и у вас вижу проблемы в коде.. Во-первых вы вешаете дополнительный класс на кнопку при ее использовании, а не оборачиваете ее в контейнер. Таким образом придется помнить что есть обертка, а что доп. класс. Как то нехорошо. Во вторых title не может быть блоком думаю, это как раз элемент и он не может использоваться отдельно.

[Vasyl Kovbassa]

warcevil: относительно обертки, ничего не понял, можно на примере?
А относительно title, так это вопрос скорее не к даному примеру, а к реальному макету. Если между всеми заголовками в макете есть нечто общее то очень даже может быть блоком. Единственное, что не совсем корректно с title - это то, что я на селектор блока повесил цвет.