Именования классов в БЭМ?

Question

[Виталий Ильницкий]

Могу ли я при большой вложенности использовать такой стиль .header-page__main-nav___items___link, или как мне нужно писать?

Comments

[Виталий Ильницкий]

Прокомментируйте пожалуйста код

<header class="header-page">
  <div class="header-page__wrapper">
    <nav class="header-page__main-nav">
      <ul class="header-page__items">
        <li class="header-page__item"><a href="#" class="header-page__link">Item 1</a></li>
        <li class="header-page__item"><a href="#" class="header-page__link">Item 2</a></li>
        <li class="header-page__item"><a href="#" class="header-page__link">Item 3</a></li>
      </ul>
    </nav>
  </div>
</header>

<div class="reviews">
  <div class="reviews__wrapper">
    <h3 class="reviews__title">Отзывы</h3>
    <div class="reviews__slider">
      <div class="reviews__slide">
        <b class="reviews__slide-title">Слайд 1</b>
        <img src="#" alt="#" class="reviews__slide-img"/>
      </div>
      <div class="reviews__slide">
        <b class="reviews__slide-title">Слайд 2</b>
        <img src="#" alt="#" class="reviews__slide-img"/>
      </div>
      <div class="reviews__slide">
        <b class="reviews__slide-title">Слайд 3</b>
        <img src="#" alt="#" class="reviews__slide-img"/>
      </div>
    </div>
  </div>
</div>

[ivan1kazantsev]

= получаем main-nav - независимый от хедера блок, header-page__main-nav - и тот же блок в роли элемента, где уже как раз какие-то внешние стили для его жизни внутри хедера. Думаю, принцип поймешь ;)

[ivan1kazantsev]

<nav class="main-na header-page__main-nav">= получаем main-nav - независимый от хедера блок, header-page__main-nav - и тот же блок в роли элемента, где уже как раз какие-то внешние стили для его жизни внутри хедера. Думаю, принцип поймешь ;)

[ivan1kazantsev]

<nav class="main-nav header-page__main-nav">= получаем main-nav - независимый от хедера блок, header-page__main-nav - и тот же блок в роли элемента, где уже как раз какие-то внешние стили для его жизни внутри хедера. Думаю, принцип поймешь ;)

[Виталий Ильницкий]

ivan1kazantsev: все понял, это я и хотел понять, спасибо

Answer 1

[Олег]

Нет, нужно так:

.header-page__main-nav
.header-page__items
.header-page__link

Comments

[Виталий Ильницкий]

еще можно конкретны пример когда использовать модификатор?

[Олег]

Виталий Ильницкий: Когда необходимо незначительное изменение сущности, например размер:
.title--size-xl{font-size: 3em;}

Answer 2

[ivan1kazantsev]

main-nav - БЭМ-блок, main-nav__item, main-nav__link - БЭМ-элементы.

Comments

[Виталий Ильницкий]

спасибо

Answer 3

[dom1n1k]

Этот вопрос обсуждается во всех руководствах по БЭМу одним из первых!

Answer 4

[Шамсудин Сердеров]

БЭМ - и спрашивать не нужно
Адекватный примеры
Как работать с CSS-препроцессорами и БЭМ