Блок, Элемент, Модификатор (БЭМ, BEM): Начало

Попытка ~~завоевать мир~~ сделать лучший Web Framework, действительно облегчающий разработку и поддержку сайта.

А так же систематизировать подходы к вёрстке и описать удобную схему вёрстки сайтов, как больших, так и маленьких.

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

Если у вас есть вопрос по использованию БЭМ, задайте его в клубе. Мы с радостью ответим на него. А также просим всех — знаете ответ, подключайтесь и помогайте друг другу!

Откуда мы все? Где пользуются БЭМом? Лучше всего на этот вопрос вам ответит картинка by «БЭМом меньше всего пользуются только в Нигерии »

mrWebic

CSS Framework с этого сайта?

1000 раз нет!)

И одного бы хватило

Ну раз лучший веб-фреймворк, надо понаблюдать.

xstroy

завоевать мир

А какой интерес к этому проявляют за рубежом? И есть ли он?

toivonens

Пока у нас есть только одна страница, переведённая на английский (http://bem.github.com/bem-method/html/all.en.html). Сейчас, по данным Яндекс.Метрики её ежедневно открывают 90 раз. Из них за пределами СНГ ~ 25-30 раз.
В данный момент мы готовим материалы для англоязычных разработчиков.

Omgovich

Ребята, очень не хватает примеров реализации верстки сайтов сделанной по методологии БЭМ. Очень много всяких мастер-классов, описаний утилит, но, блин, ниодного реально удобного примера (только проектики из 3 слов или одной бедной ссылочки).

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

Понять что-то читая код разнообразных сервисов Яндекса просто нереально.

Хочеться увидеть какой-нибудь относительно обычный сайт (шапка, навигация, сонтенты, сайдбар, футер, ссылочки, списочки, таблички) сверстанный на БЭМ.

Вам нужен пример который бы сразу показывал как надо делать странички на БЭМ. Просто скомпиленная HTML-страница, выложенная в сеть (скажем на github), посмотрев на которую станет понятно, как надо работать с БЭМ.

Спасибо

vitaly

Да, мы это понимаем. Будет, всё будет со временем.

popitch

Главная идея проекта (как скромно понял) в наследовании свойств блоков/элементов.

Иерархия наследования совпадает с естественной иерархией портал/сайт/страница.

Конечно, хотелось бы живых примеров проясняющих: формирование структуры страницы, формирование CSS-стилей на верстку, и самое главное на мой взгляд - наследование JS-логики.

С JS вопросов много: как происходит наследование инициализации элемента/блока, усложнение поведения, отмена какого-то заведенного выше поведения (или предлагается особая культура минимализации описания на верхнем уровне с детализацией вниз - при таком подходе ошибки будут дорого стоить).

Кстати, а где вообще описание, наставления, регламент для написания JavaScript-а блоков/элементов/модификаторов? Полагаю, где-то это есть.

ПС. В принципе блок это тот же элемент, у которого есть фича быть контейнером, все остальное: наличие модификаторов - у обоих одинаково. То есть "блоковость" нужна только для определения вложенности элементов.

В общем заинтересовали, спасибо огромное!

toivonens

Про JS есть документация: http://bem.github.com/bem-bl/sets/common-desktop/i-bem/i-bem.ru.html

И мастер-класс: http://clubs.ya.ru/bem/replies.xml?item_no=1154

Элементы не обязаны быть вложены в блоки. Они не имеют смысла без блоков (абстрактно), но контейнера может и не быть.

Вообще самая теоретическая статья здесь http://bem.github.com/bem-method/pages/beginning/beginning.ru.html

toivonens

Ссылка на теоретическую статью была приведена неправильно, я отредактировала комментарий.

dmitry-zelenetskiy

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

И очень хочется, чтобы была документация по bemhtml и xjst с большей практической направленостью. Мне очень понравилась идея xjst и хочется включить в текущую работу его, но сейчас представляется понимание их, только освоив ometajs, что занимает время.

toivonens

Что касается bemhtml, то пока можнно только "на примерах" учиться. Постепенно, вся документация будет, но сами понимаете, команда маленькая, а задач много. Ну и проект open source'ный, если вы в чём-то разобрались по исходникам, можете поучаствовать в написании документации. Если у вас есть время и желание, я объясню, как.

dmitry-zelenetskiy

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

voischev-ivan

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

khat-roman

вопрос перенесен в отдельную тему

banzalik

есть еще один способ - генерировать из bemhtml не html, а шаблоны для вашего шаблонизатора

khat-roman

Тогда все же теряется возможность использования блоков внутри страниц, сверстанных на чистом asp.net

да и это лишний шаг, сначала сгенерировать из bemhtml aspx-шаблон, затем его отрендерить в htlm, оверхед

banzalik

Я не предлагаю генерировать aspx-шаблон на лету, просто описывать шаблон мы будем в БЭМ методологии с помощью bemhtml+bemjson.
Затем единожды генерировать и раскатывать на сервера именно сгенерированные шаблоны. В качестве бонуса получать своеобразную БЭМ методологию на проекте.
Но, конечно, это не самый оптимальный вариант, это просто еще один из способов.

khat-roman

Ага, я понял смысл, как вариант - вполне, да.

спасибо

vitaly

Напиши лучше отдельный пост, а не в этот. Люди, которые не подписаны на этот пост не получат уведомления.

khat-roman

Написал, теперь пост висит на модерации

khat-roman

Где можно почтитать подробнее про deps.js, bemdecl.js, bemjson.js? Исходники ?

khat-roman

toivonens

Пока только исходники

khat-roman

Просто в windows с nodejs 0.6.16 у меня не получается собрать тестовый проект. Не могу поразбираться со сборкой. Поэтому совсем непонятно что из чего строится автоматически и зачем нужно

Класс

Присоединяюсь

http://clubs.ya.ru/bem/replies.xml?item_no=1878

geromond

Всё ещё актуально.

banzalik

У тебя есть на примете простенький макет?

Например, в виде PSD?

tadatuta

далеко не идеально и совсем-совсем просто: https://github.com/tadatuta/gorod-mechty-www

geromond

С вёрсткой всё не так плохо.
Основные трудности возникают с реализацией динамики на сайте с помощью js, ajax, библиотек.
Вот мой вопрос - http://clubs.ya.ru/bem/replies.xml?item_no=3797, будет здорово, если поможете его решить, или дадите ссылки на примеры реализации.

aleksei-polyakoff2014

Поробовал собрать этот проект, но получаю ошибку:


Error: undefinedundefined
    at /Users/apolyakov/Sites/gorod-mechty-www/.bem/techs/html.js:36:45
    at TidyWorker. (/Users/apolyakov/Sites/gorod-mechty-www/node_modules/htmltidy/htmltidy.js:130:5)
    at TidyWorker.EventEmitter.emit (events.js:92:17)
    at ChildProcess. (/Users/apolyakov/Sites/gorod-mechty-www/node_modules/htmltidy/htmltidy.js:66:10)
    at ChildProcess.EventEmitter.emit (events.js:98:17)
    at Process.ChildProcess._handle.onexit (child_process.js:789:12)
From previous event:
    at Cmd.exports.Cmd.Cmd._do (/Users/apolyakov/Sites/gorod-mechty-www/node_modules/bem/node_modules/coa/lib/cmd.js:424:14)
    at /Users/apolyakov/Sites/gorod-mechty-www/node_modules/bem/node_modules/coa/lib/cmd.js:510:22
    at /Users/apolyakov/Sites/gorod-mechty-www/node_modules/bem/node_modules/coa/node_modules/q/q.js:893:30
    at /Users/apolyakov/Sites/gorod-mechty-www/node_modules/bem/node_modules/coa/node_modules/q/q.js:360:35

Вообщем посмотреть живой сайт на БЭМ снова не удалось(

tadatuta

хмм...
сделал буквально следующее:

git clone git@github.com:tadatuta/gorod-mechty-www.git
cd gorod-mechty-www
npm i
bem make

все собралось.

Но из стектрейса очевидно, что проблема в модуле htmltidy, который используется для приведения html в вид, пригодный для распиливания на php-шаблоны, так что в контексте изучения БЭМ совершенно не нужен. Дебажить htmltidy я не готов. Предлагаю сделать:

git diff
diff --git a/.bem/levels/bundles.js b/.bem/levels/bundles.js
index 051d07b..a3783ea 100644
--- a/.bem/levels/bundles.js
+++ b/.bem/levels/bundles.js
@@ -21,7 +21,7 @@ exports.getTechs = function() {
'ie9.css' : 'v2/ie9.css',

'bemhtml' : join(BEMBL_TECHS, 'v2/bemhtml.js'),
- 'html' : join(PRJ_TECHS, 'index.html.js')
+ 'html' : join(BEMBL_TECHS, 'v2/html.js')
};

};

Это применит технологию сборки html из библиотеки bem-bl. Отлчия от того, что задумано в проекте — имена html-файлов будут соответствовать имени бандла (в проекте они всегда называются index.html) и весь код будет в одну строку вместо отформатированного.

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

wesseloh

сказал бы 1000 раз спасибо!