Использование БЭМ в HTML-верстке

112

11 марта 2022, 17:50

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

<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>

Answer 1

Предлагаю:

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

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

/* 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>