Правильно ли я понял суть именования классов в BEM?

Question

[Владислав Безенсон]

У меня относительно большая вложенность блоков в блоки и классы получаются вот такие:

.news-grid - сетка новостей
.news-grid__item - элемент новости
.news-grid__item__more-btn - кнопка "Читать далее" в элементе новости
.news-grid__item__more-btn__icon - иконка со стрелочкой в этой кнопке.

И так классы могут расти еще больше. Это нормально или я чего-то не понимаю?

Answer 1

[VisualIdeas]

Не совсем верно.
Если вы хотите чтобы вся сетка новостей была одним блоком, а не сетка=блок + новость=блок, то в вашем случае логично будет использовать так:

.news-grid - сетка новостей
.news-grid__item - элемент новости (наверное элемент новостЬ)
.news-grid__more-btn - кнопка "Читать далее" в элементе новости
.news-grid__btn-icon - иконка со стрелочкой в этой кнопке.

Блок__Элемент--Модификатор, а не Блок__Элемент__Элемент--Модификатор)))
Название БЭМ, а не БЭЭЭЭМ...

Посмотрите видео www.youtube.com/watch?v=kBgHdSOj33A - недлинно и понятно

Comments

[Ленар Фаттахов]

Очень полезное видео, оказывается я не совсем по БЭМу писал)

[Nikolay Talanov]

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

[VisualIdeas]

Nikolay Talanov: Читал, что Б__Э__Э__Э--М приглянулось на западе. А использовать - да, такое надо только если уверены что других вариатов нет или это сильно упростит все.

[Сергей delphinpro]

Nikolay Talanov: >> блок__элемент__элемент бывают
НЕ БЫВАЮТ! Не знаю насколько авторитетных людей вы там смотрите, но рекомендую посмотреть видеозаписи по БЭМу от команды Яндекс.

Answer 2

[rhost]

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

Comments

[VisualIdeas]

То что описал автор, это не БЭМ, это обычный каскад где пробелы с точкой заменены двойным подчеркиванием:
.news-grid__item__more-btn__icon = .news-grid .item .more-btn .icon

[rhost]

VisualIdeas: ну хорошо, а в чем собственно плюс использования БЭМ?

[VisualIdeas]

rhost: в простейшем понимании: модульность отделение css от html ну и так далее... если попробовать, становится проще, сам долгое время не понимал нафига это надо)

[rhost]

VisualIdeas: ну вот эта "модульность" "независимые блоки" а что если я подефолту верстаю так?)

[VisualIdeas]

rhost: Ну если вы свободно можете перемещать блоки внутри документа и между сайтами и они не зависят от того используете вы html5 синтаксис или обычные div - то ваш подход вполне имеет право на жизнь.Но если вас будет 10 человек в команде то БЕМ методология оч вам поможет работать независимо и не навредить) Хотя допустим для размера фалов и скорости загрузки БЭМ это просто ужас! Но я пользуюсь grunt-revizor для сокращения названий классов

[rhost]

VisualIdeas: Ну собственно так и есть, могу свободно перемещать блоки (если под них есть место), все завязано на классах так что не важно это html5 тег или обычный div. Ну, в общем тогда выходит я не найду плюсов в бэм.

[VisualIdeas]

rhost: Да, для вас и так все ОК)

[65536]

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

[VisualIdeas]

65536: "быть .button ну или максимум .delete_button .open_button" ну смотрите, допустим, если просто то при переносе его в другое место стили явное потеряются. Класс .delete_button - тоже не очень хорошо, ибо привязанно к контенту)))

[65536]

VisualIdeas: да пользуйтесь на здоровье)

[Антон]

65536: ох, еще один «не понимаю, но осуждаю». БЭМ ≠ длинные классы. БЭМ подразумевает, что у вас есть блок, и если нужно, то элементы и модификаторы. Мы используем БЭМ, и вы не поверите, у нас кнопка имеет класс .button. Вот это да! А кастомная кнопка: "button button_type_delete". При этом нужно писать эти классы руками. И сразу понятно, что от чего унаследовалось. В лесс\саас же со временем перестаешь понимать, что от чего унаследовалось, дебажить на порядок сложнее.

[Владислав Безенсон]

Антон: препроцессоры вы очень странно тут упоминаете. Как будто это какая-то методология)) Препроцессоры упрощают и ускоряют процесс разработки. А дебажить сложнее или нет - это уже от того, как код написано зависит.

[Антон]

Владислав Безенсон: Про препроцессоры заговорил не я, а 65536. Конечно, это вещи слабосвязанные, но вот товарищ предлагают на них (т.е. на каскадность) переложить роль построения структуры сложных блоков + наследование через миксы и прочее, что на мой взгляд — тот еще адъ.

[65536]

Антон: VisualIdeas: Да сейчас пригляделся к исходникам страниц кинопоиска, оказывается я об этом и говорил. Не знаю где я раньше смотрел и чем, у меня неправильное представление сложилось, хоть и про методологию читал по диагонали. Ну в общем я и сам этот бэм оказывается придумал https://i.gyazo.com/028716ca114bb5cb21cf6434445384...

Про препроцессоры я ни в коем разе не имел в виду их наследование, это была бы полная сатана эту логику для организации верстки использовать. Мне тогда показалось что они для всего придумывают уникальные названия классов (а не только для блоков)