Задать вопрос
MrDecoy

Вадим

Верставший фронтендер
Ответы пользователя по тегу БЭМ

  • Изучила принцип верстки БЭМ, не уверенна что правильно выполнила?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Так как Вы не предоставляете дизайн, то ответ будет основан на опыте и предположениях:
    • <button class="header__btn"> маловероятно что эта кнопка уникальна. То есть тут должен быть базовый класс btn и как микс, если нужно спозиционировать кнопку внутри шапки или задать ей внешнюю геометрию, например margin, header__btn.
    • <a class="header__search__number"> у Вас получается что это элемент элемента, так как 3 слова разделённых двумя нижними подчёркиваниями. Элементов элементов быть не может. Это либо дочерний блок для search(то есть про header__search то же что и в первом пункте), либо имя должно быть что-то типа header__search-number.
    • Аналогично про картинку, nav__items__item и тд.
    • Задавать class для option практически бессмысленно. Так там ещё и батарея слов через 2 нижних подчёркивания стала болье, так ещё и заканчивается на слово select. Почему, если это option а select выше?
    • <ul class="nav__contacts"><p class="nav__contacts__contact">Подписывайтесь на нас:</p>
      - не валидная вёрстка. Для списком прямыми потомками могут быть только элементы списка.
    • пути до картинок не должны содержать пробелов и заглавных буквы.
    • почему div class nav а не nav class nav?
    • Почему навигация вне шапки?


    P.s.
    Все вопросы риторические.
    Ошибаться нормально.
    Ответ написан
    Комментировать
    Комментировать

  • Как по БЭМ правильно прописать классы в данном случае?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    недостаточно информации, но, предположим, что внешний див у вас сетка, внутренние - элементы, и тогда ответ такой:

    1) Если предположение верно, то в сетке вообще о постерах ничего не должно быть. Должно быть что-то типа просто <div class="grid"> или с модификатором, говорящем о двух колонках: <div class="grid grid_col_2">. Ну на худой конец <div class="grid grid_type_posters"> если это какая то уникальная сетка не повторяющаяся в рамках проекта никогда и нигде.
    2) Нижнее подчёркивание или тире - это на Ваш выбор, что использовать для разделения слов. Просто тогда нужно использовать разные разделители для сущностей, чтобы не пересекались с разделителем слов.
    По классической версии нижнее подчёркивание используется для разделения модификатора.
    3) Зачем Вам слово -item тоже не ясно.

    итого:
    <div class="grid">
    <div class="poster"></div>
    <div class="poster"></div>
</div>
    Ответ написан
    Комментировать
    Комментировать

  • Куда (В какой файл) записывать например блок lang?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    В header.scss вы должны описывать только стили для header__logo. И то по упрощённой схеме. Потому что в методологии для каждого блока, элемента и модификатор предлагается создавать отдельные файлы, которые потом сборщиком проекта подключаются.

    Стили для .lang в файле lang.scss.
    Если нет сборщик которые сделает это в автомате, то пишут в основном файле стилей include и перечисляет какие блоки нужно подключить.

    Будет ли блок повторяться в более менее крупных проектах далеко не всегда известно заранее. Соответственно, лучше сделать это сразу, чем выделять потом.
    Ответ написан
    5 комментариев
    5 комментариев

  • Можно ли так писать в bem?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    В целом, вроде всё легально(кроме семантики :-) ).
    Но зависит от того, как Вы дальше стили пропишите.
    https://ru.bem.info/methodology/key-concepts/#%D0%...
    https://en.bem.info/forum/4/

    то есть header__btn никак не должен зависеть от right-lite.
    header__right - про позиционирование внутри header, никак не должно быть связанно с right-lite

    <div class="header__right right-lite"> - яркий пример классического бэм микса. То есть по факту Вам нужен блок right-lite, но для позиционирования внутри header Вы миксуете его как элемент header__right
    Ответ написан
    22 комментария
    22 комментария

  • Можно ли при верстке по БЭМ использовать повторяющийся блок-обертку?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    Можно.
    wrapper у Вас самостоятельный блок, единственная ответственность которого - задать ограничения по ширине.

    И нигде нет запрета что блоки нельзя вкладывать друг в друга, не установив при этом между ними отношения блок-элемент.

    Если бы Вы писали main__wrapper, footer__wrapper, то это означало бы, что у этих wrapper разные стили.
    Ответ написан
    3 комментария
    3 комментария

  • Через какой класс мне позиционировать Бэм элемент?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Любая внешняя геометрия для блока задаётся через микс

    Таким образом, у menu__item могут быть внешние отступы, такие как margin, например, потому что они элементы блока, а вот сам блок menu должен быть спозиционирован через микс.
    Если, скажем, .menu вставляется в .header, то нужно дополнительно на .menu определить класс .header__menu, в котором и задать позиционирование.
    Ответ написан
    2 комментария
    2 комментария