Using BEM in HTML layout

Question

Using BEM in HTML layout

After reading the documentation and moving on to practice, there are still problems with understanding the structure, constantly creeping doubts about the correct use of elements instead of mixes, etc. Please evaluate the BEM-y markup

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

0

html бэм

Author: Stasia, 2020-01-25

Source

1 answers

score 2 · Accepted Answer

I suggest:

It is more common to cut complex structures into blocks (which at the same time can be elements of the enclosing block), highlighting independent units of the page-slide. The example may be a bit exaggerated, but the gist is this.
The header is only the top bar with the logo and links ("header" in full screen - this is strange).
Make the menu an honest list of links (after all, this is nothing else).

Approximately so:

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