Как правильно написать класс по методологии бэм?

Question

[xxvxx]

<section class="banner-top container">
    <div class="banner-top__bg"></div>
    <div class="banner-top__before">
        <p class="ico_s point">text</p>
    </div>
    <div class="banner-top__middle">
        <h1>title</h1>
        <p>text</p>
    </div>
    <div class="banner-top__after">
        <div class="slider-logo owl-carousel">
                <div class="slider-logo__item">
                    <a target="_blank" href="<?= $item["link"] ?>">
                        <img src='./img/.png' alt='img' srcset='./img/svg/.svg'>
                    </a>
                </div>
        </div>
    </div>
</section>

как правильно назвать классы меня смущает этот блок и мне кажется тут не по бэмовски названы классы вообще пишите вашу структуру и указывайте на ошибки буду рад!!!

Comments

[Alex_mos]

Мне кажется то что у вас before,after , bg итд лучше писать как модификаторы а у вас они как элементы, но могу ошибаться

[xxvxx]

Alex_mos, нет это точно элементы. Цвет, размер и тд это модификаторы

[Alex_mos]

xxvxx, просто модификаторы вроде обозначаются .block__еlem_mod или .block__elem--mod
А у вас .block__elem

Сам пытаюсь разобраться, могу ошибаться))

[xxvxx]

Alex_mos, .block__еlem_mod вот так верно у меня так и названно banner-top__before бефор это элемент

[Ankhena]

1. Я бы не стала называть классы banner-top, banner-top__after и т.д.
Будет очень странно, если баннер окажется внизу при переиспользовании или перестроении. Тоже самое с after - сейчас после, завтра в другом месте.

2. banner-top__bg - просто лишний блок.
Фоны делаются стилями.
Если вам хочется написать пустой блок, с очень большой вероятностью вы делаете что-то не то.
Исключением могут быть блоки подготовленные для выводы информации из js и т.д.
Очень редко встречаются дизайнерские навороты, когда действительно не обойтись псевдоэлементами.

3. Не ясно что это за блоки ico_s point, почему это блоки и почему их там два. Но, может, так и надо.

4. slider-logo__item тоже скорее всего лишняя обертка. Но без макета это не точно.

5. По классике БЭМ у всего должны быть классы.

И ещё пачечка нюансов, связанных с тем, что вы будете писать в стилях.
Например, тут slider-logo owl-carousel это два блока. Но если вы в них напишете что-то про положение и внешнюю геометрию, то это будет ошибкой. И где-то там должен быть еще и класс элемента от блока верхнего уровня.
Я бы убрала одну из оберток и сделала banner-top__after slider-logo owl-carousel, если бы была уверена, что мне действительно там нужны два класса блоков.

Есть альтернативный вариант: вместо второго класса блока (owl-carousel) примешивать его стили в css. Но нужно позаботится, чтобы js от карусели не сломался. (Кстати, зачем вам устаревший owl при наличии живого swiper? В нем и классы можно указать в скрипте)
Такой вариант будет, возможно, более БЭМовский, но менее понятный человеку. Я по крайней мере отдала бы предпочтение понятности происходящего.

[xxvxx]

Ankhena, Спасибо за ваш развернутый комментарий он мне был полезен

[FrelFrloich]

А для чего вообще вам бэм? если учесть что классы в крупных проектах генерируются а не пишутся то это вообще непонятно. Ряду фреймворков, плагинам и готовым решениям, вообще плевать ваш бэм, как и всему западному рынку в предачу.

[FrelFrloich]

Вот как выглядит ваш бэм в метрике, вы реально думаете это вручную задаётся?

Answer 1

[karmyskove]

Вставь код сюда: https://yoksel.github.io/html-tree/
Сервис покажет где у тебя проблемы

Comments

[Ankhena]

Дело в том, что если туда вставить код с обычными классами, то ошибок не будет. Типа всё это блоки - всё норм.