Как именовать блок, чтобы показать то, что он является дочерним блоком?

Всем привет!

Надо сверстать блок "О компании", вот кусок моего варианта реализации:

HTML:

<div class="about">
    <div class="about-advantage">
        <div class="about-advantage__item">
            <div class="about-advantage__wrap">
                <img class="about-advantage__img">
                <p class="about-advantage__text"></p>
            </div>
        </div>
        <div class="about-advantage__item">
            <div class="about-advantage__wrap">
                <img class="about-advantage__img">
                <p class="about-advantage__text"></p>
            </div>
        </div>
    </div>
</div>

SCSS:

.about{
  &-advantage{
    &__item{
    }

    &__img{
    }

    &__wrap{
    }

    &__text{
    }
  }
}

Вопросы:

Как показать в имени блока то, что он является дочерним блоком? Его надо именовать как элемент about__advantage? Или создавать микс about__advantage about-advantage?
about-advantage__item и about-advantage__wrap являются элементами блока about__advantage, но в то же время содержат в себе другие элементы, а значит, они являются блоками - как их правильно именовать?

P.S. Буду очень рад примерам хорошей верстки :)

9 years ago

tadatuta

Как показать в имени блока то, что он является дочерним блоком? Его надо именовать как элемент about__advantage? Или создавать микс about__advantage about-advantage?

Сначала нужно определиться с тем, точно ли необходимо явно указать, что блок дочерний. Его точно нельзя использовать вне родителя?

Если ответ на этот вопрос утвердительный, то следующий вопрос — точно ли он должен быть отдельным блоком, а не элементом about? Ведь если он никогда не используется вне родителя, то это как раз про элемент.

Наконец, если все-таки точно должен быть отдельный блок и точно нужно в названии отразить принадлежность к about, то вариант about-advantage вполне нормальный.

Микс about__advantage about-advantage имеет смысл, если можно явно разграничить стили «универсального» about-advantage и специфику, свойственную именно about-advantage внутри about (например, цвета и фон будут относиться к about-advantage, а margin относительно блока about — about__advantage).

about-advantage__item и about-advantage__wrap являются элементами блока about__advantage, но в то же время содержат в себе другие элементы, а значит, они являются блоками — как их правильно именовать?

Элементы можно без ограничений вкладывать в другие элементы. Это не требует превращать родительские элементы в блоки, так что можно смело оставлять все элементами.

9 years ago

qfox

Не надо отображать в названиях блоков DOM структуру. Лучше именовать по смыслу.

1

Что значит «является дочерним блоком»? Если элемент, то about__advantage. Микс удобно использовать если хочется разделить сетку с рюшечками (layout и раскраску).

2

Если элементы в DOM-структуре содержат другие элементы или даже блоки — это не значит, что они сами блоки. DOM-структура никак не влияет на BEM-сущности.

9 years ago

artinnok

Возможно, я некорректно выразился - как мне показать, что advantage является вложенным блоком? К примеру, тут блок head содержит 4 вложенных блока - как их надо именовать?

А если я вкладываю элемент в другой элемент, это не будет элементом элемента?

Почему не надо отображать DOM структуру в классах? Разве это не противоречит самодокументируемому коду? Разве прочитав класс элемента, я не должен понять, к какому блоку он относится и какая у них структура?

9 years ago

qfox

Возможно, я некорректно выразился - как мне показать, что advantage является вложенным блоком?

Стоит начать с того, что нет такого понятия как «Вложенный блок». И уже после думать как это отобразить в именовании и смысле БЭМ-сущностей.

К примеру, тут блок head содержит 4 вложенных блока - как их надо именовать?

В примере с head блоки не являются «Вложенными блоками», хотя и в DOM-структуре реализации блоков находятся внутри другого блока. Вложены не сами блоки (блоки они как классы в OOP), а их отображение в HTML или DOM-элементы. Сами же блоки (head и «вложенные» в него) никак не связаны между собой. Исходя из отсутствия связи именовать их можно как угодно. Если же связь есть, то это уже не блоки, а элементы.

А если я вкладываю элемент в другой элемент, это не будет элементом элемента?

Элементов элементов не бывает. Не нужно смешивать DOM-представление и строение BEM-сущностей. Несмотря на то, что в DOM реализации блоков (DOM-ноды, которыми реализуются блоки, и на которых висят классы блоков) могут быть вложены сколь угодно сложно и в любом порядке (за исключением того, что элементы не стоит использовать вообще без блоков).

Почему не надо отображать DOM структуру в классах? Разве это не противоречит самодокументируемому коду?

Не противоречит. Более того, это только мешает. Мешает искать элементы из JS, мешает двигать элементы в структуре блока, парсить классы инструментами, например, для валидации или поиска зависимостей, генерировать такие классы из структур ({block: 'a', elem: 'e', subelem: 'e1'}?), и т.д.

Про документирование — вполне достаточно связи DOM-узла через класс, описанный именем блока и элемента даже на больших проектах, что уж говорить про домашние странички. Суть самих блоков и элементов стоит описывать в папках блоков, т.к. блоки на разных страницах могут использоваться очень по-разному, а смысл будет одинаковый, и достаточно будет 1 раз для проекта или библиотеки их описать.

Разве прочитав класс элемента, я не должен понять, к какому блоку он относится и какая у них структура?

К какому блоку — и так будет понятно. Структура в большинстве случаев не имеет значения. Ведь если элемент принадлежит блоку, у которого есть четкое назначение, то не важно какая там структура.

Возможно, структура полезна, если приходится руками писать HTML-код, но обычно есть шаблоны и это только мешает.

9 years ago

vithar

Без относительно вопроса, about-advantage напрашивается быть ul, а about-advantage__item быть li.

Чтобы оставлять комментарии, необходимо авторизоваться.