Наименование классов по БЭМ

700

24 ноября 2016, 10:12

Как правильно задать имена классов по методологии БЭМ для следующего кода:

<div class="wrapper">
    <div class="container">
        <header class="header">
            <div class="header__logo"></div>
            <div class="header__slogan"></div>
        </header>
        <section class="content">
            <div class="content__bigTitle"></div>
            <div class="content__inputArea">
                <div class="content__inputArea__name">
                    <span>
                        <input id="name" type="text" class="content__inputArea__name__input"/>
                    </span>
                </div>
            </div>
            <div class="content__sponsor">Sponsor
                <div>
                    <span>
                        <input type="radio" name="sponsor" value="Yes" class="content__sponsor__yes">
                        <label for="yes">No</label>
                    </span>
                    <span>
                        <input type="radio" name="sponsor" value="No" class="content__sponsor__No">
                        <label for="no">Yes</label>
                    </span>
                    <span>
                        <input type="radio" name="sponsor" value="No" class="content__sponsor__Maybe">
                        <label for="maybe">MayBe</label>
                    </span>
                </div>
            </div>
            <div class="content__Greek">Greek level
                <div class="content__Greek__slider">
                    <span>Novice</span>
                    <span>Good</span>
                    <span>Expert</span>
                </div>
            </div>
        </section>
        <footer class="footer">
            <div class="footer__date">
                <label for="date">Date of hire</label>
                <span>
                    <input id="date" type="text" class="footer__date__input">
                </span>
            </div>
        </footer>
    </div>
</div>

...или нужно делать иерархию бэм короче, например, inputArea__name вместо content__inputArea__name?

Answer 1

"content__inputArea__name__input"

Элемент — всегда часть блока, а не другого элемента. Это означает, что в названии элементов нельзя прописывать иерархию вида block__elem1__elem2.

Поскольку блоки можно вкладывать друг в друга, вы можете вместо иерархии создать новый блок, но "дробить" до мельчайших частиц не всегда нужно.(Без причины даже не рекомендуется.)
Здесь стоит определить будет/сможет ли данный блок использоваться дальше.

Так же элемент html может быть как элементом блока, так и самим блоком "header__logo logo".
Где классу logo вы задаете внешний вид, а через элемент header__logo позиционируете его. И дальше вложенную картинку(элемент) в этот блок вы можете назвать logo__img.
Вместо content__inputArea__name__input вы можете прописать class="content__inputArea field" и дальше инпуту уже "field__input-text".

Методология https://ru.bem.info/methodology/quick-start/ в ней описано, что есть элемент, а что блок и как правильно их именовать.

P.S. label связывается с input по id.

UPD.@CodeGust блок logo можно использовать дальше в любой части сайта. Суть блока в том, что его можно вставить в любое место и выглядеть он будет также. А header__logo нет, потому что элемент и он решает локальные задачи.Для примера, у меня на сайте есть карточка товара на 3 разных страницах. И расположены они в разных местах, но вид имеют один. Поэтому классы у этих карточек такие "catalog__item product-card", "related__item product-card", "new-products__item product-card". Где для product-card у меня прописаны стили внешнего вида, а вот через классы элементов я их позиционирую.