БЭМ: небольшая стилизация без модификатора?

Question

[thehighhomie]

Можно ли к примеру для навигации оформлять ссылки без модификаторов, иначе очень много классов писать приходится и это напрягает.
Вот к примеру:

<nav class="navigation entry__navigation">
        <ul class="navigation__menu">
          <li class="navigation__menu-item">
            <a href="#" class="navigation__menu-item-link">Меню 1</a>
          </li>
          <li class="navigation__menu-item">
            <a href="#" class="navigation__menu-item-link">Меню 2</a>
          </li>
          <li class="navigation__menu-item">
            <a href="#" class="navigation__menu-item-link">Меню 3</a>
          </li>
        </ul>
      </nav>

.navigation {

  height: 70px;
  line-height: 70px;

  &__menu {
    float: right;

    &-item {
      float: left;
      margin-right: 20px;

      &:last-child {
        margin-right: 0;
      }

      &-link {
        color: #fff;
        display: block;
        font-size: 14px;
        text-decoration: none;
      }
    }
  }

}

то есть сращу оформлять ссылки цветом к примеру, добавить теней, размер?

Answer 1

[BB 8]

Насколько мне известно, то у элемента не может быть другой элемент:

navigation__menu - элемент, navigation__menu-item - элемент внутри элемента??
navigation__menu-item-link - это что ???

Элемент - это часть блока, но никак не часть другого элемента.
Из БЭМА:

Модификатор

Cущность, определяющая внешний вид, состояние или поведение блока либо элемента.

Особенности:

Название модификатора характеризует внешний вид («какой размер?», «какая тема?» и т. п. — «размер»: size_s, «тема»: theme_islands), состояние («чем отличается от прочих?» — «отключен»: disabled, «фокусированный»: focused) и поведение («как ведет себя?», «как взаимодействует с пользователем?» — «направление»: directions_left-top).

Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_).

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

Comments

[thehighhomie]

вы ошиблись. найдите тут строку `search-form__input` или `search-form__content-input`

[BB 8]

thehighhomie, И в чем состоит моя ошибка ?

search-form__input - serch-form - блок, s-f__input - элемент. s-f_content-input - разницу чувствуете ?

А теперь посмотрите сюда:

<nav class="navigation entry__navigation">
        <ul class="navigation__menu">
          <li class="navigation__menu-item">
            <a href="#" class="navigation__menu-item-link">Меню 1</a>
          </li>
          <li class="navigation__menu-item">
            <a href="#" class="navigation__menu-item-link">Меню 2</a>
          </li>
          <li class="navigation__menu-item">
            <a href="#" class="navigation__menu-item-link">Меню 3</a>
          </li>
        </ul>
      </nav>

Или нет никакой разницы ?

Да и там черным по белому написано:

Вложенность

Элементы можно вкладывать друг в друга.

Допустима любая вложенность элементов.

Элемент — всегда часть блока, а не другого элемента. Это означает, что в названии элементов нельзя прописывать иерархию вида block__elem1__elem2.

[thehighhomie]

BB 8, 'menu-item-link' имя элемента, которое идет после __, это правильный код с точки зрения бэм

[BB 8]

thehighhomie,

Спасибо, учту. Но читабельность в данном примере получается так себе.

[thehighhomie]

BB 8, да я уже понял, тупанул что-то.

Answer 2

[Олег]

- Сделайте блок .link (базовое оформление ссылок), миксуйте когда нужно.
- Сократите классы без ущерба для читаемости, например:

<nav class="nav entry__nav">
  <ul class="nav__items">
    <li class="nav__item">
      <a href="#" class="link nav__link">Меню 1</a>
    </li>
    <li class="nav__item">
      <a href="#" class="link nav__link">Меню 2</a>
    </li>
    <li class="nav__item">
      <a href="#" class="link nav__link">Меню 3</a>
    </li>
  </ul>
</nav>

- Пользуйтесь инструментами, которые ускоряют написание БЭМ кода, чтобы было меньше боли.

В целом делайте так как удобно, БЭМ ничего не запрещает, методология вносит порядок в код, дает рекомендации по структуре и поддержке, самое главное правило БЭМа - думать головой.

Comments

[thehighhomie]

спасибо. но я немного не понял, по такой структуре:

<nav class="nav entry__nav">
  <ul class="nav__items">
    <li class="nav__item">
      <a href="#" class="link nav__link">Меню 1</a>
    </li>
    <li class="nav__item">
      <a href="#" class="link nav__link">Меню 2</a>
    </li>
    <li class="nav__item">
      <a href="#" class="link nav__link">Меню 3</a>
    </li>
  </ul>
</nav>

можно стилизовать ссылки, или все-таки добалять миксы?

[Олег]

thehighhomie, зависит от ситуации, опишите ее.

[thehighhomie]

Олег, ну я же отписал, цвет поставить, размер, тень

[thehighhomie]

Олег, hover к примеру еще

[Олег]

thehighhomie, варианты:

1. Модификатор для ссылки (.link--{mod}), если ссылка незначительно отличается от обычной, а также подобный стиль еще где-то встречается на сайте

2. Микс блока (.link) и элемента (.nav__link), если ссылка незначительно отличается от обычной и эти отличия есть только в этом блоке (.nav)

3. Просто элемент (.nav__link), если ссылка в блоке (.nav) не похожа на обычную вообще и встречается только в этом блоке (.nav)

4. Создать новый блок, если ссылка не похожа на обычную вообще и встречается где-то на сайте еще