Название БЭМ: «элемент block__element» или «block__element block__element - модификатор»? - PullRequest
Новая
       12

Название БЭМ: «элемент block__element» или «block__element block__element - модификатор»?

0 голосов
/ 07 января 2020

Этот вопрос относится к данной документации https://en.bem.info/methodology/css/#external -геометрия и позиционирование

Родительский класс - "заголовок", а кнопка - кнопка "кнопка заголовка__". Обычно я использую (и вижу в других руководствах) «кнопка кнопка - заголовок».

Мой сайт использует выпадающие меню с классом «раскрывающееся меню», и я также использую «раскрывающееся меню - nav "но является ли" --nav "подходящим модификатором? По логике c в документации я должен использовать "dropdown-menu navbar__dropdown-menu". Я заблудился, потому что вижу, что navbar и выпадающее меню являются их собственными блоками, но когда они взаимодействуют друг с другом, я не уверен. Если навигационная панель является блоком, а выпадающее меню является элементом, следует ли мне использовать «dropdown-link navbar__dropdown-link» вместо «dropdown-menu__link dropdown-menu__link - nav» для ссылок?

Я мог видеть Подход "element block__element" работает лучше, потому что спецификация блока c для этого элемента будет ближе к стилизации блока, а не со стилизацией элемента в качестве модификатора.

1 Ответ

1 голос
/ 07 января 2020

Пример использования BEM для примера кнопки и раскрывающегося меню: https://codepen.io/SROwl/pen/eYmVzBE

Объяснение:

Я бы написал раскрывающееся меню - навигация как раскрывающийся -menu__nav, поскольку это компонент раскрывающегося меню. Кроме того, я склонен перебазировать внутренние компоненты, показанные в примере навигации ниже.

Пример кнопки используется для отображения нескольких классов, используемых для создания нужного вам вида кнопки. Однако, если у класса .button нет тех же стилей, что и у .header__button, то в этом нет необходимости. Вы бы просто использовали .header__button.

Я бы использовал модификатор, если бы я хотел изменить цвет кнопки, например: .header__button - зеленый.

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

. Я использую расширение S CSS для включения свойств header__button в header__button - зеленый, так что разметка заканчивается так:
, а не включает оба класса. Это личное предпочтение, некоторым людям не нравятся удлинители, так как им трудно управлять или им не нравится способ компиляции css. 
BEM
<!-- How BEM states it should be done -->
<div class="button">Shop Now</div>
<div class="button header__button">Shop Now</div>
<div class="button header__button header__button--green">Shop Now</div>

BEM EXTEND
<!-- How I prefer to do it -->
<div class="button2">Shop Now</div>
<div class="header__button2">Shop Now</div>
<div class="header__button2--green">Shop Now</div>

BEM NAV
<div class="dropdown-menu">
  <div class="dropdown-menu__header">
    Menu
  </div>
  <ul class="dropdown-menu__nav">
    <li class="nav__link">Link 1</li>
    <li class="nav__link--active">Link 2</li>
    <li class="nav__link">Link 3</li>
  </ul>
</div>

    body {
  font-family: sans-serif;
}
// BEM WAY
.button {
  background: #000;
  color: #fff;
  border-radius: 5px;
  font-size: 16px;
  text-align: center;
  max-width: 200px;
  padding: 5px 15px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.header__button {
  font-size: 32px;
  color: #ccc;

  &--green {
    background-color: green;
  }
}

// BEM-ish way
.button2 {
  background: #000;
  color: #fff;
  border-radius: 5px;
  font-size: 16px;
  text-align: center;
  max-width: 200px;
  padding: 5px 15px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.header__button2 {
  @extend .button2;
  font-size: 32px;
  color: #ccc;

  &--green {
    @extend .header__button2;
    background-color: green;
  }
}

// BEM-ish menu
.dropdown-menu {
  background: gray;
  width: 300px;
  padding: 15px;

  &__header {
    background-color: #ccc;
    padding: 5px;   
  }

  &__nav {
    background: darken(#ccc, 20%);
    padding: 10px;
    list-style-type: none;

    .nav {
      &__link {
        text-transform: uppercase;
        color: purple;
        padding: 5px;
        &--active {
          @extend .nav__link;
          color: pink;
          background: gray;
        }
      }
    }
  }
}
...