0

После ознакомления с документацией и перехода к практике, все равно возникли проблемы с пониманием структуры, постоянно закрадываются сомнения в правильности использовании элементов вместо миксов и т.д. Просьба оценить разметку по БЭМ-у

<header class="header">
    <div class="header__container container">
        <div class="header__menu">
            <a href="#" class='header__logo logo'>spirit8</a>
            <nav class="navigation">
                <a href="#" class="navigation__link">home</a>
                <a href="#" class="navigation__link">about</a>
                <a href="#" class="navigation__link">services</a>
                <a href="#" class="navigation__link">portfolio</a>
                <a href="#" class="navigation__link">testimonials</a>
                <a href="#" class="navigation__link">contact</a>   
            </nav>
        </div>
        <div class="header__slogan slogan">
            <h2 class="slogan__title">welcome on  <span class="slogan__title_accent">spirit8</span></h2>
            <p class="slogan__subtitle">We are a digital agency with <span class="slogan__subtitle_accent">years of experience</span> and with <span class="slogan__subtitle_accent">extraordinary people</span></p>
        </div>
        <div class="header__transition">
            <img src="img/circle.png" class="header__circle" alt="">
            <img src="img/arrow.png" class="header__arrow" alt="">
        </div>
    </div>
</header>

скрин верстаемой по БЭМ шапки

1 ответ 1

2

Предлагаю:

  1. Чаще пилить сложные структуры на блоки (которые в то же время могут быть элементами объемлющего блока), выделяя самостоятельные единицы страницы-слайда. Пример может быть немного утрирован, но суть такова.
  2. Хэдером наречь только верхний бар с лого и ссылками ("хэдер" на весь экран - это странно).
  3. Меню сделать честным списком ссылок (ведь это не что иное).

Примерно так:

/* SASS/LESS */

.top-slide {
  &__container{}
  &__header{}
  &__slogan{}
  &__transition{}
}

.header{
  &__logo{}
  &__navigation{}
}
  
.navigation {
  &__list {}
  &__list-item {}
  &__link {}
}

.slogan {
  &__title {}
  &__title-accent {}
  &__subtitle {}
  &__subtitle-accent{}
}

.transition {
  &__circle {}
  &__arrow {}
}
<div class="top-slide">
    <div class="top-slide__container">

        <header class="top-slide__header header">
            <a href="#" class='header__logo'>spirit8</a>

            <nav class="header__navigation navigation">
                <ul class="navigation__list">
                    <li class="navigation__list-item"><a href="#" class="navigation__link">home</a></li>
                    <li class="navigation__list-item"><a href="#" class="navigation__link">about</a></li>
                    <li class="navigation__list-item"><a href="#" class="navigation__link">services</a></li>
                    <li class="navigation__list-item"><a href="#" class="navigation__link">portfolio</a></li>
                    <li class="navigation__list-item"><a href="#" class="navigation__link">testimonials</a></li>
                    <li class="navigation__list-item"><a href="#" class="navigation__link">contact</a></li>   
                </ul>
            </nav>

        </header>

        <div class="top-slide__slogan slogan">
            <h2 class="slogan__title">welcome on  <span class="slogan__title-accent">spirit8</span></h2>
            <p class="slogan__subtitle">We are a digital agency with <span class="slogan__subtitle-accent">years of experience</span> and with <span class="slogan__subtitle-accent">extraordinary people</span></p>
        </div>

        <div class="top-slide__transition transition">
            <img src="img/circle.png" class="transition__circle" alt="">
            <img src="img/arrow.png" class="transition__arrow" alt="">
        </div>
    </div>
</div>

7
  • спасибо, ситуация немного прояснилась!
    – Stasia
    26 янв 2020 в 0:08
  • Проблема понимания бэма а том, что именование классов является следствием (а не причиной как многие думают) использования серверного шаблонизатора, на котором пишут в известной компании. Поэтому самый простой способ это дробить на небольшие логические блоки. Это поможет избежать сложных монструозных именований 26 янв 2020 в 1:32
  • @free_ze, спасибо, еще вот образовался вопрос, что лучше использовать микс классов или @extend, например: class="top-slide__container container" в top-slide__container вводится мин. высота(т.к. для каждого блока она разная), а container задает общую ширину для контента на странице или просто при стилизации писать так: top-slide__container: @extend .container
    – Stasia
    26 янв 2020 в 1:32
  • 1
    Есть еще хорошее правило - за геометрию дочернего отвечает родительский класс. То есть не стесняйтесь использовать наборы классов, одним классом редко удается достичь гибкости 26 янв 2020 в 1:34
  • 1
    @Stasia, согласно БЭМ, составных селекторов в CSS стоит избегать. Иначе блоки будут жестко связаны между собой, что убивает идею модульности.
    – free_ze
    26 янв 2020 в 10:46

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.