БЭМ. Не понятие основных понятий — блок, элемент, модификатор?

Question

[kid-programmer]

Элемент - составная часть блока, которая не может использоваться в отрыве от него. (из офф дока)

.post{}
.post__date{} // может использоваться как дата в комментариях к посту
.post__header{} //может использоватся как заголовок страницы
.post__body{} //может использоватся в том же комментарии

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

<div class="post"> 
   <div class="header header_post">Заголовок поста</div>
   <div class="date date_post">19.19.1900</div>
   <div class="body body_post">текст</div>
</div>
<div class="comment"> 
   <div class="date date_comment">19.19.1900</div>
   <div class="body body_comment">текст</div>
</div>

Выше html по БЭМ или нет? тогда что такое элемент ?

Comments

[Александр Зачиналов]

в чем вопрос то? расшифровать термины?

[kid-programmer]

исправил.. Выше html по БЭМ или нет? тогда что такое элемент ?

[kid-programmer]

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

Answer 1

[Думай Головой]

БЭМ - шляпа.
Слишком много противоречий и требует лишней траты времени.
Юзай smacss, можно в связке с OOCSS

Comments

[Сергей Протько]

БЭМ норм, просто работает это хорошо только в больших масштабах. На маленьких да, избыточно.

[Думай Головой]

Максим Зайцев
Сергей Протько

шляпа по одной простой причине:

1) у нас есть блок
.block
и элемент
.block_el

2) у нас есть блок
.box, отличный по стилям от .block
и есть элемент .box_el, идентичный по стилям элементу .block_el
если придерживаться неймспейсов, то мы не может .block_el засунуть в .box, поэтому придётся создавать дополнительный класс .box_el, и в css файле через запятую дописывать его к .block_el стилям - и где тут модульность? каша получается

[Сергей Протько]

Думай Головой: ммм... а можете оформить пример на codepen?

[Думай Головой]

Сергей Протько
codepen.io/anon/pen/EVvwVj

вот есть два разных блока: block и box. Надо чтобы элементы внутри них имели одинаковые стили.
Можно через запятую конечно в css проставить (закоментировал эти строки), но какая-то каша получается, особенно если кроме box будут другие блоки, но с такими же элементами.
А вставить элементы .block_el в .box вроде как бэмовская религия не позволяет - неймспейсы же

[kid-programmer]

Сергей Протько, Думай Головой имел ввиду следующее (пусть поравит если я не прав) codepen.io/anon/pen/epEGVp

[Думай Головой]

@kid-programmer
Если сильно упростить, то да.

[Сергей Протько]

kid-programmer: codepen.io/anon/pen/MavEBw и нет проблем.

[Сергей Протько]

kid-programmer: соль в том что все дублирующееся - это явно блок.

[Думай Головой]

Сергей Протько
хо хо) Что и требовалось доказать..
это если очень простой пример.
в моём примере придётся вводить как минимум уже 3 класса. И что там от бэма тогда останется?)

[Думай Головой]

Сергей Протько
Как заголовок или параграф текста может быть блоком? Какой-то разрыв шаблона получается.

[kid-programmer]

Сергей Протько ну тогда получается что элементы блока это просто элементы позионирования в нутри блока других блоков.. рекурсия какая-то)) и в итоге мы дойдем до тэгов которые уже будут компонентом UI... блин ничего не понимаю)))

[kid-programmer]

парсер съел... дойдем до тэгов "<"button">" "<"p">" "<"h1">" которые уже будут компонентом UI.

[Думай Головой]

@kid-programmer
да просто бэм шляпа. его придумали укурившись и только кто присутстовал на той пати могут понять что они вылепили)))

[Думай Головой]

@kid-programmer
что касается тегов - бэмщики предлгают полностью от них отказаться, писать класс чуть ли не для каждого параграфа и спана. я серьёзно

[Сергей Протько]

Думай Головой: ну как бы так оно и есть, только классы должны присутствовать в селекторах.

kid-programmer: именно так, все разбивается на блоки, внутри блоков другие блоки... в плодь до отдельных атомарных блоков, таких как параграфы, кнопки и т.д.

Повторюсь, это все хорошо работает при большом количестве проектов трубеющих примерно одинаковый UI и оформление, когда на сотню проектов можно реюзать блоки. Для маленьких проектов это не особо имеет смысла.

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

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

[kid-programmer]

Сергей Протько "по хорошему так же можно вводить свои элементы" ты имел ввиду блоки? =)

[Сергей Протько]

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

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

[kid-programmer]

Сергей Протько а можно ссылочку, погуглил что-то мало инфы

[kid-programmer]

Сергей Протько я про cssmodules

[Сергей Протько]

kid-programmer: https://github.com/css-modules/css-modules

это очень молодая штука.

Answer 2

[Сергей Протько]

Получается что блок это чисто Namespace для других сущностей.

как-то так да. Вот только у вас пример не правильный.

<div class="blog"> 
   <div class="header header_blog">Заголовок блога</div>
   <div class="date date_blog">19.19.1900</div>
   <div class="body body_blog">текст</div>
</div>
<div class="comment"> 
   <div class="comment_date date">19.19.1900</div>
   <div class="comment_body body">текст</div>
</div>

Вот так правильно.

Далее, помимо того что блок это "неэмспейс" он так же может содержать базовые стили, но не размеры и позиционирование. За это отвечают элементы.

Грубо говоря.

.blog{}
.blog__date{} // задает положение даты в... блоге? В блоге нет дат, даты есть у постов, так что выносим это в .post
.blog__header{} // задает положение заголовка, ширина, паддинги, маргины
.blog__body{} //задает положение содержимого в блоге, только положение на странице, ширина, паддинги, маргины

Comments

[kid-programmer]

ууу.. я чуть ошибся, blog я имел ввиду post

[kid-programmer]

поправил

[kid-programmer]

грубо говоря элементы это враперы для позионирования других блоков в блоке?

[kid-programmer]

мне бы было понятно еслиб они в оф доках говорили что-то типа ООП в CSS post(как класс) post__date(его свойство), то тогда понятно, а не может использоваться в отрыве от него, не понятно =(

[Сергей Протько]

kid-programmer: ну потому что это все объекты, а не "классы". Классы это вообще рак ООП, но удобно.

Есть объект "блок" задача которого - инкапсулировать какой-то UI компонент. Например блог пост, лэйблочка с временем добавления, тело поста, аватарка пользователя и т.д. Все это блоки. Элементы это объекты, принадлежащие блоку, занимающиеся "расстановкой" блоков внутри друг дружки. Модификаторы - объекты расширяющие стили. И для них так же справедливо ограничения по тому какие стили в них могут быть, а именно... модификатор для элемента должен только менять расположение дочерних блоков. А модификатор для блока в идеале не должен влиять на позиционирование, менять только оформление.

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

Посмотрите на cssmodules, это пожалуй самое актуальное на данный момент, во всяком случае идея мне нравится, но пока сырова-то.

[kid-programmer]

Сергей Протько, спасибо за развернутый ответ, cssmodules посмотрю обязательно, теперь вроде понятно хотя вопросов всеровно море. Почему бы не сделать разделение на сетку позиционирования и объекты... ведь получается что элементы это .row и .col в сетке. А уже внутри обьекта инкапсулировать его обьекты.

[Сергей Протько]

kid-programmer: потому что далеко не всегда объекты должны располагаться по сетке, все обычно много сложнее.

Answer 3

[Antony Bark]

BEM шляпа.