Правильно ли это по БЭМ?

Question

[godsplan]

<header class="header">
  <div class="header__logo logo">
    <a class="logo__link"><img class="logo__image" /></a>
  </div>
</header>

Правильно ли будет так указывать классы для логотипа и его детей?
Или нужно как то так:

<header class="header">
  <div class="header__logo">
    <a class="header__link"><img class="header__image" /></a>
  </div>
</header>
</header>

Comments

[Ankhena]

Правильно ли будет так указывать классы для логотипа и его детей?

Правильно.
Логотип в большинстве случаев - блок.

[Сергей delphinpro]

Первый вариант предпочтительнее.

Answer 1

[Василий Банников]

Оба варианта правильные. Зависит от того, считаешь ли ты логотип самостоятельным блоком или просто составной частью хедера.

Comments

[Сергей delphinpro]

Во втором случае классы header__link и header__image слишком абстрактны в рамках шапки. В принципе шапки бывают разные, там могут быть и другие ссылки и картинки.

Answer 2

[Денис Инешин]

Первый вариант более правильный. Суть в том чтобы не пихать всё в одну корзину.
Так гораздо проще поддерживать код и читать его. Можно всё положить в разные папочки и быстро находить.

К тому же первый вариант позволит вам переиспользовать логотип в другом месте, например в подвале сайта или еще где-то.

Comments

[godsplan]

В таком случае в css правильнее обращаться так?

.header {
  .logo {
    &__link {

    }
    &__image {
      
    }
  }
}

а не так:

.header {
  &__logo {

  }
  &__link {

  }
  &__image {
    
  }
}

[Денис Инешин]

godsplane, вообще нет, в данном случае это не CSS, а LESS (или какой-то аналогичный препроцессор).

В бэм все классы независимы, друг в друга не вложены.

Посмотртите какой CSS у вас будет после компиляции.

Нужно отдельно header, отдельно logo

[godsplan]

Денис Инешин, хм. разве тогда вяс концепция вложенности селекторов не теряется?и зачем тогда нужен sass/less

[Денис Инешин]

SASS/LESS совсем не предлагает бесконечную вложенность, зачем это? достаточно простых конструкций вроде

.logo {
  foo: bar;

  &__link {
  }
}

И вообще это не главная фича CSS препроцессовров. Они позволяют лучше организовать CSS код, использовать сложные миксины и т.п. В современном CSS где уже есть переменные, они уже почти не нужны. Я бы использовал только для очень сложных проектов с комплексным дизайном.