@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;
    }
  }
}
  • Вопрос задан
  • 914 просмотров
Решения вопроса 2
@alexesDev
Я бы не делал третий уровень вложения (исключаея before, after и модификаторы)... вы экономите немного в селекторе, но там куча пробелов в замен и вообще оригинальные БЭМ стили плоские совсем.
Ответ написан
movasyl
@movasyl
semper tiro
Слишком сложно, Sass есть инструмент для облегчения жизни, а ты ее усложняешь.
Сделай пример на codepen, ато глаза разбегаются.
Несколько моих примеров для понимания подхода, может пригодится:
codepen.io/kovbassa/pen/ObrqZv?editors=1100 - нативный scss
codepen.io/kovbassa/pen/MJveyr - scss с bem миксином (+ комменты)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
gzhegow
@gzhegow
aka "ОбнимиБизнесмена"
Неправильный

Минимум
а1 .section-videos
а2 .section-videos__slider
а3 .section-videos__text
а4 .section-videos__title

Второй блок по желанию (в этом случае а3 и а4 не нужны, т.к. есть б2 и б3)
б1 .section-video-slider
б2 .section-video-slider__text
б3 .section-video-slider__title
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы