@ihabia

Правильно ли сверстано по БЭМ?

Пытаюсь осваивать и внедрять методологию БЭМ, но пока есть сомнения со вложенностями, названия классов всё длиннее становятся, чем глубже ) Не уверен, что правильно пока понимаю это.
Я сверстал небольшую часть, хотелось бы узнать, правильно ли я делаю?

<header class="header">
    <div class="container">
        <div class="header__logo">
            <h2 class="header__title">APP Design</h2>
            <p class="header__description">Free PSD Website Template</p>
        </div>
        <form action="" class="header__search">
            <input type="text" placeholder="" class="header__search-field">
            <button class="header__search-button">Search</button>
        </form>
    </div>
</header>
<section class="featured">
    <div class="container">
        <div class="featured__img">
            <img src="images/phones.png" alt="">
        </div>
        <div class="featured__text">
            <h1 class="featured__title">Cursus penati saccum nulla.</h1>
            <p class="featured__description">
                This is a W3C standards compliant free PSD website template from OS Templates. This template is distributed using a Website Template Licence. For more free PSD templates visit
                <br><a class="featured__link" href="https://www.os-templates.com/">OS-Templates.com</a>
            </p>
            <a class="featured__btn" href="https://www.os-templates.com/">
                <img src="images/icon_iphone.png" class="featured__btn-icon">
                <span>Now on the app store</span>
            </a>
        </div>
    </div>
</section>
  • Вопрос задан
  • 440 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
ihabia, Класс не может разрастаться до безобразия из-за вложенности,
потому что вложенность всего лишь одна Блок -> Элемент.

В вашем случае у вас есть косяк в разметке.
1. Логотип это вполне самостоятельный блок.
2. Поиск тем более.
3. Вкладывать прослойки в блоки в принципе допустимо, это не косяк, но когда речь идет лишь о декорации, то вряд ли стоит.

Итого имеем четыре блока (ну и контейнер, как сущность модульной сетки):

<header class="header-section">
    <div class="container header">
        <div class="header__logo logo">
            <h2 class="logo__title">APP Design</h2>
            <p class="logo__description">Free PSD Website Template</p>
        </div>
        <form action="" class="header__search search-form">
            <input type="text" placeholder="" class="search-form__field">
            <button class="search-form__button">Search</button>
        </form>
    </div>
</header>


.header-section {}

.header {
  &__logo {}
  &__search {}
}

.logo {
  &__title {}
  &__description {}
}

.search-form {
  &__field {}
  &__button {}
}


Достаточно простая разметка, простые стили, независимые блоки.

Вторая секция более-менее нормально размечена.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы