БЭМ: Может ли блок быть собственным элементом?

Question

[altkov]

Скажем, у нас есть какой-то блок, в котором элементы идут в строчку.

<div class="card">
    <div class="card__elem1">...</div>
    <div class="card__elem2">...</div>
</div>

Однако, что если нам понадобиться добавить элемент снизу, но при этом оставить его в рамках текущего блока? Делаем подобную верстку.

<div class="card">
    <div class="card__row">
        ...
    </div>
    <div class="card__bottom">...</div>
</div>

Однако теперь нам придется изменить и верстку всех старых блоков, которые без элемента снизу:

<div class="card">
    <div class="card__row">
        ...
    </div>
</div>

Старые блоки переусложнены, внутренний контейнер здесь не нужен.

Вот и вопрос: а что если мы скомбинируем блок и его элемент на одном html-элементе?

<div class="card card__row">
    ...
</div>

Теперь блок сам себе элемент.

Вполне себе лаконично.
С сайта бэм: (Элемент) "Составная часть блока, которая не может использоваться в отрыве от него."
Условие выполнено. Мы и правда не используем элемент в отрыве от блока.
Вот и вопрос бред это или можно практиковать.

Comments

[cssfish]

вот для этого модификаторы и придуманы.

[altkov]

cssfish, очень сомневаюсь что именно для этого

[cssfish]

altkov, можно придумать любую методологию, главное - прописать моменты и им следовать. тогда это все работает. Т.е. никто не мешает записать себе "делаю по бэм, но могу миксовать блок с элементом", и следовать.

А если "по бэм" то в вашем примере:
1) был .card, содержащий элементы в строку
2) добавили контент снизу, функционал .card перетек в .card__row, сам .card перешел в роль обертки
3) что делать со старыми .card без контента снизу? или добавлять внутрь .card__row аналогично, или просто сделать мод .card--row.

[altkov]

cssfish,

можно придумать любую методологию, главное - прописать моменты и им следовать. тогда это все работает

верно

Т.е. никто не мешает записать себе "делаю по бэм, но могу миксовать блок с элементом", и следовать.

блоки с элементами и так можно миксовать, вопрос можно ли миксовать блок с собственным элементом и еще непонятно по бэму это или нет.

Определение элемента:

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

Например, пункт меню вне блока меню не используется, значит является его элементом.

Составная часть блока

спорно, хотя почему нет.

которая не может использоваться в отрыве от него

выполняется

Элементы не существуют вне блока

выполняется

Каждый элемент может принадлежать только одному блоку

выполняется

Например, пункт меню вне блока меню не используется, значит является его элементом.

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

1) был .card, содержащий элементы в строку
2) добавили контент снизу, функционал .card перетек в .card__row, сам .card перешел в роль обертки
3) что делать со старыми .card без контента снизу? или добавлять внутрь .card__row аналогично, или просто сделать мод .card--row.

Ну это я с самого начала написал

[cssfish]

altkov, соглашусь в том, что дословно запрета на микс блока с собственным элементом там нет. Но это не юридический документ и не спецификация, всех моментов там вполне могли и не учесть.

Из истории становления этой методологии - статей, конференций и примеров кода - негласно все приняли что элемент - он внутри блока, а не на одном уровне. Если есть желание жестко закрепить это в документации - лучше всего написать прямо туда.

Второй момент, ограничение методологии может быть связано с бем-инструментами., которые ожидают на входе определенную структуру. Например, имхо, запрет на "элемент элемента" ка краз из этой серии

Answer 1

[altkov]

На самом деле проблема решается модификатором.

<div class="card card_is-row">
    ...
</div>

(card_is-row вместо card_row для того чтобы избежать путаницы с элементом card__row)
Однако, все равно хочется узнать, можно ли по БЭМ делать блок собственным элементом.

Answer 2

[Виталий Першин]

Нет, так нельзя. Для блоков есть модификаторы, а элементы блока являются его содержимым. Ваш пример без контекста проблемы не понятен, тем не менее смысл БЭМ не только в переиспользовании, но и в возможности модифицировать, дорабатывать и обновлять согласовано с методологией. И да, если вам нужна внутренняя обертка, а её нет, то придется её добавить во всех блоках, либо придумать способ модифицировать блок под конкретную задачу в конкретном месте.

Comments

[altkov]

пруф?

[Виталий Першин]

altkov, Документация БЭМ и наглядные примеры. Есть блок и есть элементы блока, элементы, это содержимое( или компоненты) блока, блок может быть элементом только другого блока, но не самого себя иначе это уже модификатор, почему модификатор, потому что: Модификатор - Cущность, определяющая внешний вид, состояние или поведение блока либо элемента. . А поскольку ваш элемент является модифитором значит он и должен быть оформлен как модификатор. В этом месте вы уже противоречите документации

[altkov]

Виталий Першин, вы щас не приводе аргументы из документации, вы её трактуете.

Дальше можете не отвечать.

[Виталий Першин]

altkov, А вы её трактуете по своему, можно еще много чего придумать, чего явно не указано, только зачем это делать, если применяя логику, документацию и примеры всем все понятно. Ваша смекалка интересна только вам, и если мое мнение для вас не авторитетно, вы можете написать непосредственно на форуме БЭМ где вам скажут тоже самое

[Виталий Першин]

altkov, Для особо смекалистых есть даже схема/рисунок:

На схеме довольно четко нарисовано, что элементы внутри блока, а не на уровне и уж тем более не вне блока

[altkov]

Виталий Першин, "четко нарисовано"? "четко нарисовано" это твой пруф? ты бэм по картинкам изучаешь?
"четко нарисовано" твое нихрена не стоит, на заборе вообще сам знаешь что написано.
С чего ты вообще взял что у тебя есть компетенция решить этот вопрос?
"ну блок это блок элемент это элемент". Да как же я сам то не догадался!
Абстрактное мышление вообще отсутствует.

[Виталий Першин]

altkov,

Судя по всем у тебя вместо мозгов абстракция. На таких умников жалко время тратить, но кто-то же должен.
Советую остыть, отключить эффект Даннинга-Крюгера и начать думать. Ты в курсе что такое примеры? Это когда такие как ты чего-то не понимают, но если им показать, то возможно у них тумблер щелкнет. Так вот во всех примерах элемент находиться внутри блока и чтобы уж точно было понятно там пишут что это правильная структура:

Ой, простите за мои картинки из документации это так по детски, мало ли что там написано..

Еще немного картинок:


Я не знаю в курсе ли ты, скорее всего нет, но БЭМ это далеко не про название классов, там все намного глубже и там где БЭМ применяется по взрослому, то есть в самом Яндексе, есть свои сборщики с декларациями, которые тебе не позволят делать х..ю. А еще у них есть песочница, в который ты можешь поумничать самостоятельно

Простой наглядный пример шаблонизации:


Владимир Гриненко, разработчик в Яндексе и непосредственный участник всего что связано с БЭМ провел очень много лекций, конференций и уроков, он демонстрировал сотни примеров и отвечал на тысячи вопросов, вполне возможно что такой тупой вопрос ему тоже задавали, так что посмотри хоть пару лекций, чтобы не кидаться на людей, когда они с тобой не согласны.

И напоследок, если бы ты внимательно читал документацию, то увидел, что там есть пример четко дающий ответ на твой вопрос:


Да, прикинь, если ты в ручную делаешь html, то придется менять везде

Вот и вопрос бред это или можно практиковать.

Да, бред.

С чего ты вообще взял что у тебя есть компетенция решить этот вопрос?

У меня как минимум есть опыт, я читал доку и смотрел лекции разработчиков яндекса, которые эту доку писали эти знания у меня под коркой. Но самое главное, если я задую тупой вопрос я готов выслушать любой ответ и не оскорблять людей которые мне хотят помочь.