Смотрел на днях какой-то доклад, на котором пообещали новую версию сайта bem.info. Когда ожидать?)

Задача научиться рендерить Virtual DOM из текущих шаблонов на bemhtml

Состав команды: @nik-kor @amel-true @khvostov @voischev @awinogradov. Все супер котаны!)

Результат

Написали движок для рендера bemhtml шаблонов и положили аккуратно в PR https://github.com/bem/bem-xjst/pull/235. Экспортит атрибуты в виде массива вида ['div', {...attrs}, content, ...anotherContent].
Сделали адаптер для React https://github.com/bem-contrib/react-xjst, который использует бандл из шаблонов в bemhtml и инстанс React для создания Virtual DOM , с помощью библиотеки react-dom.
Начали доставлять bem-components в React, используя bemhtml шаблоны и стили. Собирается с помощью Webpack и специального лоадера для него https://github.com/alfa-bank-dev/bem-loader, который резолвит все нужное по депсам через bem-deps. Можно дописывать bemhtml шаблоны на уровне проекта как и раньше;)
Запилили песочницу для bem-xjst с переключателем движков: BEMHTML, BEMTREE, VIDOM – https://github.com/bem/bem-xjst/pull/238. Одни шаблоны на все времена, тестить, сравнивать, все, что душе угодно можно делать.
Так же планировали поработать над интеграцией с Redux. Но так сложилось, что задача решилась автоматически. На уровне React ничего не изменилось, поэтому данные как и раньше доезжают до компонентов, где формируется bemjson для функции рендера.

Превью готовых компонентов http://awinogradov.github.io/react-xjst-example/ и песочницы http://vladkhvo.github.io/.

Зарелизить react-components – библиотеку, которая использует шаблоны и стили из bem-components, но логику React в БЭМ-терминах.

Ура?;) Теперь мы имеем одни шаблоны и стили для параллельных стеков. Поддерживаем в одном месте и в ус не дуем! Предположительно можно написать подобных адаптеров и для других технологий;)

Добрый день. Прошу сделать урок по bem-xjst. Я вот честно не врубаюсь как пользоваться. Спасибо.

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

В этот раз мы расскажем об open-source библиотеке БЭМ-блоков bem-components, используемой в Яндексе. Она вобрала в себя весь накопленный опыт и учитывает множество тонких нюансов от пуленепробиваемости благодаря БЭМ методологии и полному покрытию тестами, до соответствия высоким требованиям доступности (a11y).

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

Это вебинар для тех, кто уже немного знаком с БЭМ, знает HTML и CSS хотя бы на базовом уровне, понимает общие процессы веб-разработки и умеет пользоваться командной строкой. Также пригодятся знания, полученные на прошлых вебинарах. Для выполнения заданий понадобится терминал с установленными git, node.js и npm.

Обратите внимание, трансляция начнется в 17:00 16 марта на отдельной странице.

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

Не пропустите два доклада про БЭМ на сегодняшнем Я.Субботнике.

В 17:30 @miripiruni расскажет про только-только вышедшую версию bem-xjst. А сразу после него я расскажу про новости из мира БЭМ и постараюсь ответить на все ваши вопросы.

PS: Остальные доклады тоже обязательно посмотрите! ;)

Если у кого то уже есть реализация - просьба поделиться.

Есть планы сделать такой редактор. Хотелось бы спросить у сообщества, как вы видите удобный редактор для людей не знающих БЭМ. Основная идея - сделать максимально просто для непосвященного пользователя, и в то же время дать продвинутые возможности тем кто разбирается в БЭМ.

Для начала, как думаете, в каком формате лучше хранить контент: markdown, json, html?

Привет!

Мы долго не могли решиться, но наконец набрались смелости и переименовали организацию bem-incubator в bem-contrib.

На наш взгляд, новое название гораздо лучше передает смысл — проекты в этой организации могут быть вполне production-ready, смысл в том, что они развиваются и поддерживаются сообществом.

Если вы используете (или разрабатываете) какие-либо пакеты, следует обновить пути к репозиторию (какое-то время github поддерживает редиректы автоматически). В качестве инструкции можно использовать https://help.github.com/articles/changing-a-remote-s-url/

// cc @blond @remnev @awinogradov @zxqfox @levonet @arikon @voischev @4ok @Guria @aristov @h4 @kompolom @sameoldmadness @sipayrt @teryaew @Yeti-or

Ребятки, бывает возникают вопросы, на которые ответ пару сек внимания от профессионала и сразу помогает, а бывает искать по сайту или задать вопрос на форуме, занимает продолжительное время. Я сделал скайп-чат по БЭМу, присоединяйтесь по ссылке: https://join.skype.com/dAeR8XdFMuMj или напишите мне в скайп, я добавлю: rus2def

Дополнительные плюсы для сообщества:

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

Вот в этом посте о результатах хакатона по инструментам сборки, Виталя упоминал созданный нами инструмент bem-tools-find.

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

Написаны тесты
Есть CI
Есть достаточный объем документации по использованию этого инструмента

В конце концов выпущена версия 0.0.1 пакета bem-tools-find.

Пользуйтесь им на здоровье и не забывайте присылать ваши идеи и замечания.

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

Новости библиотек

Выпустили bem-core 2.8.0. Главная тема релиза — интернационализация (i18n) из коробки.
Продолжаем работать над мажорным релизом bem-core, который принесёт множество заметных улучшений в ядро.
Выпустили bem-components 2.4.0. Главная тема релиза — обеспечение доступности (a11y) контролов, теперь они не уступают нативным.
Выпустили bem-history 3.1.0.
Реализовали dist-поставку библиотек bem-core и bem-components: вы можете подключить собранные CSS + JS и использовать блоки, просто копируя HTML из документации на bem.info.
Силами сообщества, выпустили bem-grid 2.2.0 и готовится к выпуску bem-forms 1.0.0.
Новости технологий

Полностью переписали https://github.com/bem/bem-xjst — ядро для BEMHTML и BEMTREE. Оно стало заметно быстрее (как при сборке, так и при выполнении шаблонов), не требует компиляции, позволяет добавлять новые шаблоны в рантайме и вот-вот обзаведется новыми полезными фичами вроде source maps. Попробовать на деле можно здесь.

Новости инструментов

В начале декабря мы провели очередной Хакатон по БЭМ, посвященный разработке инструментов.

По итогам Хакатона появились:

Кроме этого, мы активно работали над ENB:

Выпустили ENB 1.0.0.
Поработали над плагинами ENB:
- enb-bem-techs v2.0.0
- enb-stylus v2.0.0
- enb-bh v1.0.0
- enb-xjst v2.0.0 и enb-bemxjst v2.0.0
- выпустили новый плагин для ENB, который ведет себя, как DefinePlugin для Webpack: ищет в коде бандла плейсхолдеры с названием переменных и заменяет их на соответствующие значения.
  Новости документации

Опубликовали новые документы:

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

Обновили документы:

Как создать свой проект на БЭМ — документ обновлён до новых версий библиотек.
История создания БЭМ.
Новости мероприятий
Провели два вебинара по БЭМ:
- первый про декларативные шаблоны, провел @vitkarpov;
- второй про i-bem.js — @tadatuta.
Организовали большой Хакатон по БЭМ, который был посвящен разработке инструментов для БЭМ. Хакатон был в основном внутренним, снаружи мы пригласили всего трёх человек. Отчеты о хакатоне и реализованных проектах можно прочитать в блоге на bem.info.
@tadatuta рассказал подробный доклад на Субботнике о том, чем bem-components отличается от Bootstrap и в чем его превосходит.
Ещё @tadatuta провел вебинар на GeekWeek про разработку веб-интерфейсов по БЭМ-методологии.
В мире БЭМ
BEM – CSS Code Organization Methodology.
Длинная телега про Бутстрап.
BEM, Sir!.
19 принципов разработки по БЭМ, или что должен знать каждый разработчик библиотек.
Плагин для posthtml будет особенно полезен тем, кто хочет продолжать писать HTML руками.

Интересные темы на форуме

Привет, пришла и моя очередь рассказать о содеянном на минувшем хакатоне.

Основная мысль, которая преследует меня уже долгое время — возможность сборки БЭМ-проектов с помощью любого инструмента. И именно с этой идеей я пришёл в то раннее утро субботы агитировать собравшихся присоединиться ко мне, в надежде немного приблизить неизбежное будущее, в котором нет ENB.

Несмотря на невнятную речь, ко мне присоединились очень крутые ребята, без которых мы бы не продвинулись так далеко: @arikon, @zxqfox, @awinogradov, спасибо вам огромное!

Ставь задачу правильно

Утверждение «сборка БЭМ-проектов с помощью любого инструмента» звучит слишком абстрактно.

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

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

Готовь сани летом

На самом деле основная работа была сделана заранее.

Специфика сборки БЭМ проектов заключается в организации уровней переопределения и использовании зависимостей блоков. Подробнее об этом можно почитать на bem.info.

Необходимость модульной сборки была сформулирована уже давно. На прошлогоднем хакатоне мы решили задачу интроспекции уровней — bem-walk.

Кроме того, к этому хакатону я написал прототип модуля для работы с зависимостями блоков — bem-deps.

Работа оказалась проделанной не зря. Модуль для работы с зависимостями пригодился не только нам, но и команде, занимающейся сборкой с помощью webpack. А интроспекция и вовсе оказалась нужна каждой команде.

Результаты

Проект: @bem/gulp.

Сборка project-stub: ветка feature/gulp

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

import gulp from 'gulp';
import bem from '@bem/gulp';
import concat from 'gulp-concat';
import merge from 'gulp-merge';
import bemhtml from 'gulp-bemhtml';
import stylus from 'gulp-stylus';
import postcss from 'gulp-postcss';
import postcssUrl from 'postcss-url';

// Создаём хелпер для сборки проекта
var project = bem({
    bemconfig: {
        /* загружаем информацию об уровнях с помощью `bem-config` */ 
    }
});

// Создаём хелпер для сборки бандла
var bundle = project.bundle({
    path: 'desktop.bundles/index',
    declPath: 'index.bemdecl.js'
});

gulp.task('css', function () {
    return bundle.src({tech: 'css', extensions: ['.css', '.styl']})
        .pipe(stylus())            
        .pipe(postcss([
            postcssUrl({ url: 'inline' })            
        ]))
        .pipe(concat(`${bundle.name()}.css`))
        .pipe(gulp.dest('desktop.bundles/index'));
});

gulp.task('js', function () {
    return
        merge(
            gulp.src(require.resolve('ym')),
            bundle.src({ tech: 'js', extensions: ['.js', '.vanilla.js', '.browser.js'] })
        )
        .pipe(concat(`${bundle.name()}.js`))
        .pipe(gulp.dest('desktop.bundles/index'));
});

gulp.task('bemhtml', function () {
    return bundle.src({ tech: 'bemhtml.js', extensions: ['.bemhtml.js', '.bemhtml'] })
        .pipe(concat(`${bundle.name()}.bemhtml.js`))            
        .pipe(bemhtml())
        .pipe(gulp.dest('desktop.bundles/index'));
});

gulp.task('build', gulp.series('css', 'js', 'bemhtml'));
gulp.task('default', gulp.series('build'));

По скорости в текущем состоянии сборка project-stub оказалась соизмеримой со сборкой на стеке ENB.

Что дальше?

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

Мы уже получили массу пожеланий и предложений, которые обязательно учтём.

Как только всё будет готово, обязательно расскажем вам. А самое главное — будем внедрять в реальные проекты и реагировать на фидбэк.

Общие модули bem-walk и bem-deps оказались универсальными, и в каком-то смысле уже проверенными в бою. Поэтому, кроме использования их для сборки на gulp и webpack, мы планируем внедрить их в ENB.

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

Присылайте свои идеи и задавайте вопросы на форуме или в ишьюсах к репозиториям из организации gulp-bem.

Спасибо за внимание!

12-13 декабря у нас был хакатон по разработке инструментов БЭМ. Я участвовал в команде переосмысления и разработки прототипа bem-tools, напишу, что у нас получилось.

В нашей команде было 6 человек:

Решили, что bem-tools надо делать по архитектуре «минимальное ядро + плагины». Ядро не умеет ничего, кроме общей обвязки про CLI, поиска локально или глобально установленных пакетов bem-tools-something и запуска указанной пользователем команды.

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

Плагин предоставляет JS API, которое ничего не знает про CLI (файл index.js в корне) и CLI интерфейс (файл cli.js). Это позволяет рассматривать каждый плагин, как отдельный пакет, который можно использовать независимо от всех остальных.

Мы успели сделать минимальные версии bem-tools-init, bem-tools-make, bem-tools-create и bem-tools-find. А так же вспомогательные bem-fs-scheme и bem-config. Миша Баранов делал плагин для IntelliJ IDEA для создания БЭМ-сущностей из интерфейса IDE.

Как это обычно бывает после хакатона, всё в сыром состоянии, использовать в работе это всё пока нельзя, но зато можно успеть повлиять на API и помочь нам с доработками.

Обо всём этом ниже подробнее.

Скачиваем bem-tools:

npm i bem/bem-tools#WIP
bem

Если всё прошло успешно, после запуска bem увидим:

Tools to work with files written using the BEM methodology.
See https://bem.info for more info.


Usage:
  bem [OPTIONS] [ARGS]


Options:
  -h, --help : Help
  -v, --version : Version

Установим команду init:

npm i bem-incubator/bem-tools-init

Запускаем ещё раз bem и видим, что появилась команда init:

Tools to work with files written using the BEM methodology.
See https://bem.info for more info.


Usage:
  bem COMMAND [OPTIONS] [ARGS]
  bem [OPTIONS] [ARGS]

Commands:
  init : Init

Options:
  -h, --help : Help
  -v, --version : Version

Запуск bem init my-test-project создаст my-test-project и в ней файл bemconf.json с содержимым

{
   "root": true
}

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

Для работы с конфигом сделали простую библиотеку bem-config (https://github.com/bem-incubator/bem-config/) и накидали примерную структуру файла конфигурации. Файл конфигурации ищется в текущей директории и выше до корня. Используется ближайший найденный, также к нему добавляется ~/.bemconf.json.

Хотим, чтобы команда init была более умной, например, могла помимо пустого проекта создать заготовку по шаблону. Как вариант, клонировала project-stub. Сейчас это пример минимального плагина, можно использовать его для написания своего.

Следующая не менее минималистичная команда — make:

npm i bem-incubator/bem-tools-make

Просто вызывает enb :)

Ещё мы сделали прототип команды create:

npm i bem-incubator/bem-tools-create

Она поддерживает, как «классический» синтаксис bem-tools:

bem create -b b1 -t css -t js -l .
bem create -b b2 -t css -t js -l .

так и более простой:

bem create {b1,b2}.{css,js}

Есть шаблоны для технологий по умолчанию. Можно задать свои в конфиге, получаемом через bem-config. Они могут быть локальными для уровня, для проекта или браться из конфига пользователя.

Для построения имён БЭМ-сущностей используется bem-naming, для путей на файловой системе — bem-fs-scheme (пока реализована только nested схема, но легко можно добавить другие). И то, и другое можно задать в файле конфигурации.

Есть ещё что доделывать, постепенно доработаем и выпустим в рамках bem-tools 2.0.

Андрей Кузнецов и Илья Исупов написали прототип команды find (https://github.com/bem-incubator/bem-tools-find/), которая позволяет искать БЭМ-сущности и показывать их в разном виде.

Например, нам нужно найти все файлы про модификатор type для блока input:

bem find -b input -m type
/Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_password.bemhtml
/Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_password.bh.js
/Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_search.bemhtml
/Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_search.bh.js

или то же самое, но в виде дерева:

bem find -b input -m type -v tree
tree
└─┬ /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks
  └─┬ input
    └─┬ _type
      ├─┬ password
      │ ├── bemhtml: /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_password.bemhtml
      │ └── bh.js:   /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_password.bh.js
      └─┬ search
        ├── bemhtml: /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_search.bemhtml
        └── bh.js:   /Users/vitaly/sites/project-stub/libs/bem-components/common.blocks/input/_type/input_type_search.bh.js

Миша Баранов делал плагин для Intellij IDEA (WebStorm, PhpStorm, etc), который будет позволять создавать БЭМ-сущности из контекстного меню (https://github.com/bem-incubator/bem-tools-intellj-plugin).

Плагин предоставляет только интерфейсную обвязку для встраивания в контекстное меню и показа диалога пользовательского ввода, а потом всё что ввёл пользователь передаёт bem create, который уже и делает всю основную работу.

Content menu

Dialog

Что же дальше? А дальше --Новый год-- у нас есть хитрый план: довести всё перечисленное до рабочего состояния, покрыть тестами и написать документацию. А потом... не останавливаться на достигнутом, а реализовать ещё bem rm, bem cp, bem mv, а там, глядишь, и сообщество подтянется со своими плагинами. ;)

Привет,

хочу рассказать о результатах нашей команды на минувшев хакатоне в рамках Я 12-13 декабря.

Наша команда состояла из Бориса Сердюкова, Константина Гладких, Евгения Константинова и меня и в рамках хаккатона мы решили попробовать собрать бэм-проект project-stub на webpack. Забегая вперед, могу сказать, что это получилось и результат можно посмотреть здесь: https://github.com/just-boris/project-stub/blob/webpack/webpack.config.js

Так как webpack - модульный сборщик, который рассчитан на работу с JavaScript модулями и умеет подключать сторонние технологии как js-модули, то мы решили, что в качестве входной точки для сборки у нас будет статический bemjson файл, а на выходе было желание получить список реальных файлов, которые участвуют в сборке. Все вот это удалось свести к цепочке лоадеров:

{
  test: /\.bemjson.js$/,
  loader: 'bemdecl-to-fs!deps!bemjson?-stringify'
}

которые на выходе возвращают вот такой результат:

require('./libs/../b.js');
require('./libs/../b.styl');
// and etc

На мой взгляд, это довольно крутой результат, так нам удалось свести всю специфичность БЭМ методологии, связанную с депсами, к простой композиции лоадеров, что позволяет использовать стандартные решения для популярных технологий. Например, стили собрать можно как-то так: http://webpack.github.io/docs/stylesheets.html

Так как мы собирали проект на bem-core, то для JS модулей мы использовали ymodules-loader. Вопрос с шаблонизатором решили частично, остановились на bh и решили попробовать написать плагин для webpack, который будет превращать исходный bemjson в статический html, что сейчас работает.

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

Также в проекте есть webpack-dev-server, который вотчит изменения и кэширует результаты сборки.

Сам конфиг получился такой: https://github.com/just-boris/project-stub/blob/webpack/webpack.config.js Также решили сгруппировать наши технологии в рамках организации https://github.com/bempack

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

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

p.s. для интересующихся по webpack'у есть довольно хороший скринкаст: https://learn.javascript.ru/webpack-screencast

Добре!

Есть идейка продвинуть застоявшиеся анклавы задач в БЭМ проектах.

Может организуем хакатончик с одной целью сделать за сутки задачи которые давно подвисли на проектах БЭМ?

Нужены будут кураторы из мантейнеров проектов И конечно добровольцы!

Кто за?

На предыдущих вебинарах мы говорили о декларативных возможностях CSS и BEMHTML, используемых в БЭМ. В этот раз — 16 декабря в 17:00 — мы расскажем и покажем, что декларативно можно писать не только стили и шаблоны, но и код на JavaScript — в том числе и для уровней переопределения. Применяется i-bem — специальный JavaScript-фреймворк для БЭМ.

Это вебинар для тех, кто уже немного знаком с БЭМ, знает HTML и CSS хотя бы на базовом уровне, понимает общие процессы веб-разработки и знаком с командной строкой. Также пригодятся знания, полученные на прошлых вебинарах. Для выполнения заданий понадобится терминал с установленными git и node.js.

Чтобы стать участником, пожалуйста, зарегистрируйтесь. Регистрация завершится 15 декабря в 16.00.

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

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

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

Если у вас есть комментарии или предложения, не стесняйтесь делиться ими здесь.

Подробности и форма регистрации.

Привет!

Скажите пожалуйста когда будет продолжение серии вебинаров Дмитрия Белицкого? Вот на чем остановились еще пол года назад: https://events.yandex.ru/lib/talks/2890/

На мой взгляд это лучшее что сейчас есть в сети на тему БЭМ!

Не пропустите наш опросник, пожалуйста!

С удовольствием посмотрел запись выступления Владимира :). Для себя услышал одну очень простую, казалось бы, фразу, но упрощающую очень сильно понимание bemhtml.

До этого я пытался с ним работать, но выбор пал на сторону bh.

А вот вчера вечером, смотря запись услышал: "Это то же самое, что CSS". @tadatuta показал как они похожи и по какой логике работает bemhtml. После этого у меня прояснилось в голове и появилось желание использовать именно данный шаблонизатор.

Спасибо за удачное сравнение :) Мне его не хватало.

Выпустили большой и жирный шестой дайджест новостей БЭМ с новой рубрикой — «Инкубатор БЭМ-проектов».

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

Последние проекты Инкубатора:

ng-bem-components от Алексея Гурьянова (@Guria) — это обертка, которая помогает использовать bem-components в проекте на Angular. Посмотреть на результат в деле можно здесь.
enb-ng-techs от него же предоставляет технологии ng-annotate и ng-templates для сборки Angular-проектов на ENB.
bem-flux от Романа Парадеева (@sameoldmadness) — это реализация FLUX-парадигмы для bem-core.
html2bemjson от Владимира Гриненко (@tadatuta), как и следует из названия, позволяет превратить любой HTML-код в BEMJSON. Недавно вышла новая версия пакета.
Антон Виноградов (@awinogradov) выпустил мажорный релиз bem-grid 2.0.0, в рамках которого сетка перешла на использование lost.
bem-scrollspy от Евгения Баранова (@kompolom) — это реализациея scrollspy на i-bem.js.

Если у вас есть полезные инструменты или библиотеки на БЭМ, присоединяйтесь к нашему БЭМ-инкубатору, и мы обязательно расскажем о них в следующих выпусках!

Ну и поддерживайте наш дайджест в твиттере :)

Я тут услышал что был какой то конкурс по разработке проекта на полном стеке bem. Планируется ли в будущем ? И откуда про это можно узнать ?

Ребята, rss на форум для отслеживания новых тем можете прикрутить?

Привет!

В результате разговора с @voischev в слаке случилась тулза под гордым названием bem-deps-lint. На самом деле она умеет лишь проверить наличие на файловой системе сущностей, которые оказались в deps-бандле.

Причем, в силу обстоятельств реальной жизни, выдает кучу false positive (например, реализации модификаторов size, active, hovered, disabled, visible физически находятся в файлах _theme_islands, так что такие «лишние» депсы не являются ошибкой) и напрочь лишена тестов и документации. Но внезапно с ее помощью удалось найти несколько проблем в алгоритме сборки deps-бандлов и библиотеках блоков.

Так что тулза потенциально полезная, но на тесты и документацию сил нет.

Есть ли желающие помочь?

Практикуюсь по мастер классу Мастер-класс+наоборот+вы+пишете+БЭМ-проект,+а+мы+подсказываем+—+Евгений+Константинов,+Дима+Белицкий Клонирую репозиторий https://github.com/bem/do-it-yourself-workshop Теперь надо установить зависимости через npm i. Вместо этого получаю ошибки. Работаю в Ubuntu 15.04 Прилагаю скриншот установки зависимостей. https://yadi.sk/i/GIFiNVGtgyRDi

Рома @sbmaxx запилил песочницу BEMHTML.

Привет!

Сегодня в нашей компании проходил мой мастер-класс по БЭМ. Брали самые азы — CSS и файловую структуру. Задание делали прямо "на сцене", по очереди. Вот слайды, задание там внутри http://varya.me/bem-css-workshop/

В конце смогли сравнить изменения, которые мы сделали без всякого БЭМ https://github.com/varya/bem-css-workshop-source/pull/1/files и то же самое с БЭМ https://github.com/varya/bem-css-workshop-source/pull/2/files Получилось очень наглядно, и вроде бы это "продаёт" идею гораздо лучше презентаций и статей.

Кстати, для многих стало открытием, что SASS и LESS поддерживают БЭМ-селекторы, хотя этой фиче уже больше года.

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

Встретилась на Хабре весьма полезная статья про сложность инструкций. Существующая документация отличная, но когнитивное сопротивление у неё на самом деле очень высокое. Сейчас по терминологии Купера я уже "апологет" и нормально ориентируюсь в документации. Но по ощущениям множество "уцелевших" не могут воспользоваться замечательными инструментами, в первую очередь из-за сложности входа в мир БЭМ. Очень хочется цитировать вторую главу "Психбольницы в руках пациентов", а параграф про "Апологетов и уцелевших" хоть полностью сюда вставляй.

Здравствуйте, сегодня мы провели вебинар — «Верстаем веб-страницу по БЭМ-методологии». Надеюсь вам было интересно и полезные знания влились в ваши головы.

Видеозапись будет доступна в течении двух недель.

Ссылки для изучения: — Методология. Определения — История создания БЭМ — Видео: История создания БЭМ. Кратко, сбивчиво и неполно — Side effects in CSS — Методология. Организация файловой системы

Ссылка на слайды на github.com. Ссылка на проект.

Конфиг vim — это форк vimi.

Всем БЭМ.

Привет! Мне нужно будет провести мастер-класс по БЭМ на час. Не презентацию, а именно мастер-класс, когда люди сидят со своими компьютерами и вместе что-то делают. Важно сосредоточиться именно на CSS и немного на декомпозиции и сборке. JavaScript и шаблоны пока не нужны. Кто-нибудь делал подобное? Может быть в ШРИ такое было? Поделитесь, пожалуйста, черновиками, ссылками на репозитории или (ну, вдруг мне повезет) видео. Спасибо!

Столкнулся с такой вещью, что документации много, но подача её очень разрознена... Это очень путает и отталкивает. Сделал небольшой план/эскиз того, что хотелось бы видеть будучи новичком. Сделал правда на коленке, не все моменты продуманы. Основная идея - никакого погружения, до момента осознания! Всё должно быть по минимуму и поэтапно. Обновления плана буду скидывать сюда.

А сейчас эту версию назовём 0.1

БЭМ

Этап 0. Методология

История, основная идея
Этап 1. Заготовка
Установка nodejs
Установка project-stub
Этап 2. Создание простого проекта
Описание bemjson и зачем он нужен
Коротко о bemhtml, bh (Что назначение одно и тоже, но подходы разные)
Вёрстка простой страницы (просто вёрстка, без логики!)
Этап 3. Добавление логики (i-bem)
Коротко об i-bem
Декларации блоков
Связи между блоками
Этап 4. Пора в продакшен
Создание статистической версии
Использование на back-end'е
- nodejs
- php
- ruby
- и т.д.
  Этап 5. Внесение изменений в готовый проект
Что нужно, для того, чтобы сделать правки в продакшене
Головокружительное погружение в БЭМ
миксы
библиотеки
уровни переопределения
технологии
борщик
ну в общем вся документация по-полочкам

Задача научиться рендерить Virtual DOM из текущих шаблонов на bemhtml

Результат

Далее

Новости библиотек

Новости технологий

Новости инструментов

Новости документации

Новости мероприятий

В мире БЭМ

Ставь задачу правильно

Готовь сани летом

Результаты

Что дальше?

БЭМ

Этап 0. Методология

Этап 1. Заготовка

Этап 2. Создание простого проекта

Этап 3. Добавление логики (i-bem)

Этап 4. Пора в продакшен

Этап 5. Внесение изменений в готовый проект

Головокружительное погружение в БЭМ