Как правильно по методологии БЭМ, вот у меня есть логотип и он стоит по центру страницы с отступом от верха, что нужно выносить в Модификаторы?

Question

[Василий]

Как правильно по методологии БЭМ, вот у меня есть логотип и он стоит по центру страницы с отступом от верха, что нужно выносить в Модификаторы?
Нужно же учесть, что этот блок можно использовать где-то в другом месте проекта, и там будут другие размеры логотипа и отступы другие вот тут нужна помощь более опытных товарищей.

<div class="logo-log-in logo-log-in-size-large logo-log-in_layout">
       <img class="logo-log-in__img" src="img/Logo.svg" alt="Logo Mercury Developers">
</div>

Answer 1

[Анита Ковалева]

Всё делается очень просто. Есть у вас header-block, в нем лежит ваш logotype.
Вы делаете ваш logotype отдельным элементом, прописываете для него общие стили, без позиционирования и привязки к структуре header-block. По итогу:

.header-block ---------------------------> Ваш основной бэм блок
  .header-block__logotype logotype      ------------> где,  header-block__logotype
(вы прописываете позиционирование),  logotype -  у вас независимый элемент).

В чем профит: вы можете использовать logotype сколько угодно раз на всех страницах, меняя его вид модификатором, допустим header-block__logotype--large и по аналогии с любым элементом, который повторяется на странице больше одного раза.

Comments

[Василий]

Я правильно понимаю что у меня должно получиться вот так?

<div class="header-block">

<div class="header-bloc__logo logo">

       <img class="log__img" src="img/Logo.svg" alt="Logo Mercury Developers">

</div>

а по стилям, позиционирование мы задаем классу header-block

[Анита Ковалева]

<div class="header-block">      -------------> Обычная обертка header, задаете глобальный стиль flex

<div class="header-bloc__logo logo"> ---> позиционирование(отступы) задаете header-block__logo, logo - основные стили

       <img class="log__img" src="img/Logo.svg" alt="Logo Mercury Developers">

</div>

В итоге logo вы добавляете куда угодно на страницу, он имеет базовый стиль, не привязанный к блоку.

[Анита Ковалева]

Василий,

Для лучшего понимания)

[Василий]

Анита Ковалева, спасибо за помощь!

У меня не много другая структура, но все равно спасибо.

[Анита Ковалева]

Василий, Вам главное понять идеалогию БЭМ, она подвержена идеалогии DRY(Don't repeat yourself) - когда вы видите элемент, который повторяется, рекомендованная практика в разработке - сделать элемент один раз, дабы не дублировать код. Ну и плюс налегайте на CSS. На самом деле манипулироть стилями можно и без БЭМ, просто банальной каскадностью, когда вы обращаетесь к одному и тому же logotype, не напрямую - а через родителя.
Например у вас есть logotype(у него свои стили)

.header-block .logotype -------> одни стили
.footer-block .logotype -------> другие стили

Каскадность тоже решает) css гибкий "язык".