Войти с помощью github

Привет!

Мы, наконец, выпустили bem-history v4.0.0. История изменений.

По просьбе в нашем Телеграмм-чатике опубликовали мини-библиотечку bem-calendar с календарем на основе bem-components.

Выглядит он вот так: desktop_en

Пользуйтесь на здоровье!

Недавно пришлось пописать на PUGJS... долго не смог это терпеть. Пришлось запилить 100 строчек кода, что бы писать нормальные шаблоны на BEMHTML в ExpressJS.

Код доступен как модуль https://www.npmjs.com/package/express-bem-xjst

Он умеет правильно работать с уровнями, кешируется и даже ничего не портит. Пробовал подключать bem-components — шаблонизирует все правильно.

Приятного использования тем, кто больше не может использовать ничего кроме BEM-XJST в шаблонах 😉

Внезапно, пятничным вечером мы обновили БЭМ в вашем React.

Состав изменений:

И, конечно, мы обновили документацию, где очень подробно про все написали на русском и английском языках ;)

Привет!

Уже в эту пятницу, 27 января в московском офисе Яндекса пройдет очередной митап по БЭМ для новичков.

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

https://www.youtube.com/watch?v=Ai-yt0b8iKE

Кроме того, в программе:

  • архитектура проекта, основанного на компонентном подходе;
  • инструменты, упрощающие жизнь фронтенд-разработчика; и, конечно, ответы на все ваши вопросы.

Участие бесплатное, но не забудьте зарегистрироваться!

До встрече на BEMup-е :)

Коротко о том, как мы завершили прошлый год и с чем вошли в новый.

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

Новости сайта

Выкатили раздел БЭМ-библиотек в новом дизайне:

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

bem-core

  • Выпустили bem-core 4.1.0 и 4.1.1. Все изменения, вошедшие в оба релиза, описаны в CHANGELOG.

bem-components

  • Выпустили обещанную в прошлом дайджесте bem-components v4.0.0 с небольшим обновлением дизайна контролов и переходом со Stylus на postCSS.
  • Выпустили долгожданную версию bem-components 5.0.0, которая под капотом использует bem-core 4.1.1. В версию 5.0.0 вошли сразу два набора стилей: исходники на postCSS и скомпилированный CSS на случай, если вы предпочитаете использовать препроцессор.

bem-history

  • Пока не выпустили в релиз, но призываем вас уже посмотреть и пощупать библиотеку в отдельной ветке v4. Эта версия совместима с bem-core v4.
    Главное изменение — переименование блока uri в элемент uri__querystring, который расширяет базовую реализацию одноименного модуля из bem-core классом Uri. Методы класса сохранились без изменений.

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

bem-react-core

  • Работаем над BEM React Core — библиотекой для описания React-компонентов в виде деклараций БЭМ-сущностей.
  • Разработали полный пакет документации: README, REFERENCE и CONTRIBUTION GUIDE.

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

bem-express

Выпустили очередную партию мажорных обновлений:

  • Обновили bem-core до версии 4.1.1 и bem-components до 5.0.0.
  • Перешли со Stylus к PostCSS. Из коробки поставляется тот же набор плагинов, что и в bem-components.
  • Внедрили опциональный livereload. Подробнее смотри в документации и в README проекта.
  • Добились ускорения сборки за счет прогрева npm-модулей, необходимых для сборки.
  • Отказались от bower для поставки библиотек. Теперь все зависимости ставятся через npm в папку node_modules.

bem-xjst

  • v8.3.1 (v7.4.1)

    • Исправлен баг в режиме extend(). Теперь режим работает как ожидается.
    • Дополнена документация: описание this.extend(o1, o2).
  • v8.4.0 (v7.6.0)

    • Новая опция unquotedAttrs позволяет не выводить двойные кавычки у тех HTML-атрибутов, значения которых позволяют это сделать.
  • v8.4.1 (v7.6.1)

    • Колбек режима extend(function(ctx, json) { … }) теперь принимает такие же аргументы, как и остальные колбеки в других режимах. Первый — ссылка на контекст исполнения шаблона (this), второй — ссылка на узел BEMJSON, на который сматчился шаблон.
  • v8.4.2

    • Функции экранирования теперь возвращают пустую строку, если аргументом был undefined, null или NaN. Раньше вы получали результат приведения к строке, что было исправлено.
  • v8.5.0

    • В BEMTREE добавлены режимы, имеющие отношение к данным: js(), addJs(), mix(), addMix(), mods(), addElemMods(), elemMods(). Остальные режимы, которые имеют отношение только к HTML, доступны в BEMHTML.
  • v8.5.1

    • Исправлен баг с расчетом this.position во время использования режима replace().
  • v8.5.2 (v7.6.4)

    • Исправлен баг в BEMTREE, связанный с рендерингом специального значения поля content { html: '<unescaped value>' }.
    • Обновлена bem-xjst onlinе demo:
      • Добавлен переключатель движков BEMHTML/BEMTREE.
      • Добавлена заглушка для BEM.I18N(), которая возвращает свой второй аргумент. Это удобно для копирования кода из продакшена в песочницу.
    • Обновлен README: описали основные отличия шаблонизатора, фичи и т.д.
    • Силами Михаила Степанова обновлена песочница. Вы тоже можете помочь: у нас есть задачи, помеченные как help wanted.

enb-bemxjst

  • Выпустили новую версию enb-bemxjst v8.5.2 с зависимостью "dependencies": { "bem-xjst": "8.5.2". Однако продолжаем активно поддерживать две ветки: 7.x и 8.x.

Обо всех изменениях читайте в примечаниях к релизу v8.5.2 и v7.6.4. Полный список изменений описан в CHANGELOG.

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

bem-tools

Выпустили bem-tools 2.0.0, где обновили bem-tools-create. Подробности читайте в документации.

bem-walk

Написали полный и понятный README.

project-stub

  • Внедрили новую версию bem-components v5.0.0 с учётом перехода на postCSS и новую версию bem-tools 2.0.0.
  • В качестве эксперимента включили gulp-bem в project-stub.

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

Привет!

Сегодня в bem-history появилась веточка v4, совместимая с bem-core v4.

Главное изменение — переименование блока uri в элемент uri__querystring, который расширяет базовую реализацию одноименного модуля из bem-core классом Uri. Методы класса сохранились без изменений.

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

Приятного использования!

Привет!

Только что bem-express получил очередную партию мажорных обновлений:

  1. Обновление bem-core до версии ^4.1.1 и bem-components до ^5.0.0.
  2. Переход со Stylus к PostCSS, из коробки поставляется тот же набор плагинов, что и в bem-components.
  3. Внедрение опционального livereload. Подробнее см. https://github.com/bem/bem-express/blob/master/development.blocks/livereload/livereload.md и в README проекта.
  4. Ускорение сборки за счет прогрева npm-модулей, необходимых для сборки. Теперь обновление стилей у меня на ноутбуке занимает ~300мс и не требует перезагрузки браузера.
  5. Отказ от bower для поставки библиотек. Теперь все зависимости ставятся через npm в папку node_modules.

Приятных вам апдейтов в новом году!

Привет, друзья!

Мы наконец-то выпустили долгожданную версию bem-components 5.0.0! Это там самая версия, которая под капотом использует bem-core 4.1.1. Как и в bem-components 4.0.0, в версию вошли сразу 2 набора стилей: исходники на postCSS и скомпилированный CSS на случай, если вы предпочитаете использовать какой-нибудь препроцессор.

В ближайшее время на bem.info появится документация на эту версию.

Кстати, вы обратили внимание, как круто она выглядит в новом дизайне?

Всем привет!

Кратко об основных изменениях и новостях в мире БЭМ за прошедшие 3 месяца с предыдущего дайджеста.

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

У нас появились два новых и крутых документа по БЭМ:

Кроме этого, многие другие документы исправлены и дописаны.

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

  • Закончили работу над стабильной версией bem-core 4.0.0. Основные изменения:

    • Изменился API блока i-bem
    • Изменился API блока querystring.
    • Из модуля identify удален опциональный параметр onlyGet.
    • Из модуля events удалены все статические методы.
    • В классе Event модуля events удалено поле result.
    • Элемент css блока page больше не поддерживает автоматическое добавление условных комментариев для IE.

    Все подробности можно прочитать в миграционном гайде. А еще лучше — посмотреть выступление @veged: https://events.yandex.ru/lib/talks/3685/ где он подробно рассказывает обо всех изменениях.

  • Заканчиваем работу над новой весрией bem-components — уже на этой неделе планируется релиз v4 с новым дизайном, обязательно расскажем об этом релизе отдельно.
  • Начали работу над bem-react-core. Это новая библиотека, которая позволит писать react-совместимые блоки в bem-терминах.
  • Параллельно с этим работаем над bem-react-components, библиотека будет содержать react-реализацию блоков из bem-components. На данный момент готовы блоки Button, Icon, Link, TextInput, TextArea, Checkbox.

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

  • Выпустили два мажорных, десятки минорных и патчевых релизов bem-xjst. Самая свежая весия — 8.3.0. Основные изменения:

    • Теперь режимы mix(), js(), attrs() заменяют значения BEMJSON.
    • Если выхотите расширить значение BEMJSON используйте applyNext().
    • Вызовы applyNext() во всех режимах по умолчанию возвращают BEMJSON.
    • Если вы захотите добавить mix, js или attrs теперь можно использовать addMix(), addJs() или addAttrs().

    Важно! bem-xjst 8.x пока несовместима с bem-components. Прямо сейчас мы работаем над этим.

  • Кроме bem-xjst 8.0.0 у нас появилась куча новых фич:

    • runtime lint
    • mod()/elemMod() теперь можно использовать без второго аргумента, чтобы сделать подпредикат модификатора с любым значением
    • новые appendContent() и prependContent()
    • функции эскейпинга оптимизированны и работают быстрее, а главное не тормозят если работают в холостую
    • новая опция production с помощью которой страница будет рендерится даже если случились ошибки в отдельных блоках

    Подробнее обо всех изменениях читайте в release-notes.

  • Мы взяли в официальную поддержку заготовку проекта на БЭМ-платформе с серверной частью на express: https://github.com/bem/bem-express.

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

  • Выпустили ENB 1.4.0, release-notes.
  • Работали над плагинами для enb:
    • enb-bemxjst 8.0.0
    • enb-bem-specs 0.10.0
    • enb-stylus 2.4.0
    • enb-css 1.2.2
  • Мы продолжаем строить инструмент bem-lib-site для автоматической сборки документации для библиотеки блоков/проекта на БЭМ.
  • Кроме этого, идет большая работа в BEM-SDK.

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

  • Провели очередной хакатон по БЭМ, продвинулись по:
    • bem-config: доведен до готовности и ума модуль для работы с конфигурациями БЭМ-проектов.
    • bem-tools: создан готовый к использованию плагин bem-tools-create, чтобы его использовать нужно так же установить bem-tools-core.
    • плагины для bem-tools-create к различным IDE: для Atom, IDEA, и Sublime были собраны рабочие прототипы плагинов для запуска команды bem-tools-create.
    • модульной сборке c gulp: взяли gulp-bem-bundle-builder и попытались внедрить в реальные проекты, запустилось, поняли чего не хватает, работаем дальше.
    • по модулям BEM-SDK: доведены до рабочего состояния модули bem-deps, bem-graph для чтения и работы с зависимостями между БЭМ-сущностями, bem-decl для работы с файлами деклараций БЭМ-сущностей, bem-bundle, и другие.
  • Возобновили традицию BEMup'ов — 30 сентября очередной БЭМап для всех желающих прошел в Московском офисе Яндекса
  • Вместе с @zxqfox провели два вебинара про сборку проектов на gulp, если кто-то пропустил — смотрите в записи: сборка проекта с помощью BEM-SDK сборка проекта с помощью gulp.

Привет, дорогой друг. Я хочу поделиться историей развития сборки в БЭМ.

Если ты из тех, кто совсем не любит читать большие тексты, то знай «Собирать проекты на БЭМ проще, чем скушать пирожок».

Заинтригован? Приходи на BEMup.

BEMup

А теперь суровые подробности.

Первый кусочек пирога

В первом подходе мы решили проверить, возможно ли собрать самый простой БЭМ проект на чём-то, кроме ENB.

Под роль самого простого проекта лучше всего подходит project-stub: один бандл, минимум зависимостей, минимум кода.

В качестве чего-то, кроме ENB, мы выбрали Gulp. Как минимум это один из самых популярных инструментов для сборки с богатой «экосистемой» плагинов. Кроме того, Gulp не является готовым инструментом в отличии от большинства конкуретнов, это фреймворк для написания своих систем сборок. Такие его особенности дают определённую гибкость.

Так появился пакет gulp-bem. Что он умеет делать? Правильно, собирать project-stub и ничего больше.

Мы тогда даже не ленились и написали постик об этом.

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

Второй кусочек пирога и бутылка рома

Во втором подходе мы решили, что важно проверить ещё одну гипотезу. Состоит она из двух частей:

  1. Можно ли собирать реальный проект? Посложнее, чем project-stub.
  2. Можно ли собирать примеры, тесты и документаци?

gulp

Стандартные двухдневные посиделки привели нас к ряду идей.

Идея атомарного модуля для получения исходников

Модуль: gulp-bem-src.

Почти как gulp.src(), только bem.src().

Ну вы же знаете, что слово БЭМ делает любой модуль как минимум в 2 раза лучше, а тут даже в 3 раза получилось.

Идея о создании бандлов из чего угодно

Модули: gulp-bem-bundler-fs, gulp-bem-bundler-examples.

Бандлы, они как алкоголь, их можно добыть из чего угодно, даже из других бандлов.

Идея об универсальной сборке бандлов

Модуль: gulp-bem-bundle-builder.

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

Хелперы

Заодно появились хелперы для сборки шаблонов: gulp-bem-xjst, gulp-bh.

В этот раз постик мы не написали. Но пирожок всё равно заслужили, правда-правда!

Пирожок SDK

Между делом появился замечательный BEM SDK — набор атомарных модулей. Каждый модуль решает одну задачу.

sdk

В третьем подходе мы делали всё, чтобы наш малыш (BEM SDK) совсем повзрослел. И кажется, ещё совсем чуть-чуть и он отправится в мир похоти и разврата (ENB в живых сервисах).

Вот только некоторые крепыши: bem-naming, bem-walk, bem-decl, bem-graph, bem-deps, bem-bundle.

Пока пирожок не заветрил

Чтобы всё произошло, осталось не так уж и много:

  1. Начать использовать BEM SDK в сервисах.
  2. Дописать недостающие хелперы для i18n, borschik, и т.д.
  3. Написать генераторы бандлов для тестов, примеров и документации.

1-2 октября мы соберёмся, чтобы совершить ещё один подход к снаряду под номером четыре.

О том, что получилось обязательно расскажем.

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

Очередной BEMup пройдет в пятницу 30 сентября в московском офисе Яндекса c 19:00 до 22:00. В теплой и дружеской атмосфере команда БЭМ поделится планами и идеями на ближайшее будущее.

Предварительная программа:

  • новости из мира БЭМ — последние релизы, планы и идеи (включая пару премьер);
  • подробный рассказ про модульную сборку на gulp;
  • рассказы участников сообщества о решениях, библиотеках и инструментах, которые могут облегчить жизнь разработчика и работу в предметной области БЭМ;
  • ответы на животрепещущие вопросы и общение с командой.

Если у вас есть непреодолимое желание выступить на BEMup со своим докладом — пишите нам на info@bem.info.

Форма регистрации: https://events.yandex.ru/events/bemup/30-september-2016/. Присоединяйтесь!

Всем привет!

29 сентября в 19:00 Алексей @zxqfox Ярошевич проведет вебинар про сборку проектов с помощью gulp.

На вебинаре вы научитесь собирать с помощью gulp и модулей любые БЭМ-проекты: как простые статичные HTML-странички для верстки по макету, так и сложные сервисы на node.js, генерирующие BEMJSON в рантайме.

Запись трансляции 19:00 29 сентября доступна по ссылке: https://youtu.be/l1G425VcUUg

Привет. Наверное, стоит отдельно попиарить, что теперь в bem-xjst есть опция runtimeLint. С помощью неё вы сможете получать предупреждения о нежелательных или опасных местах в ваших шаблонах и входных данных (BEMJSON-е). Включить опцию можно начиная с версии 7.2.0 вот так. Предупреждения можно будет поймать в STDERR.

Вот краткое описание какого рода проверки выполняются уже сейчас.

Булевы атрибуты

Актуально для тех, чей проект раньше использовал шаблонизатор версии ниже чем v4.x. Пример BEMJSON-а: { tag: 'input', attrs: { disabled: true } } Результат с v4.3.2: <input disabled=“true”/> Результат с v4.3.3: <input disabled/>

Подробнее об изменениях в описании к релизу: https://github.com/bem/bem-xjst/releases/tag/v4.3.3

elemMods вместе с block вместо mods

В 5.0.0 был исправлен баг который приводил к неверному трактованию полей mods и elemMods. Подробности есть в описании релиза. Сейчас если вы попытаетесь передать в BEMJSON что-то типа { block: 'b', elemMods: { … } }, то получите warning.

Изменения this.ctx.mods через шаблоны

Такие фокусы будут награждены предупреждением, потому что хороший шаблон не должен иметь сайдэффектов, и не должен изменять входной узел BEMJSON-а. Чтобы изменить модификаторы вы должны использовать this.mods.

Атрибуты class или data-bem созданные через BEMJSON-поле attrs или шаблон режима attrs()

Для генерации HTML-класса используйте режим cls(). Для генерации параметров для клиентского JS используйте режим js(). Иначе будет вываливаться предупреждение.

Проверки нейминга

Имена блоков, элементов, модификаторов, а так же значения модификаторов не должны содержать разделителей имени элемента (обычно это __) и разделителей модификаторов (_).

Миксы модификаторов к таким же модификаторам

Всевозможная акробатика вида { block: 'b', mix: [ { mods: { type: 'test' } }, { mods: { type: 'shmest' } } ] }, будет награждена предупреждением.


Если у вас есть идеи какие проверки можно добавить еще — пишите мне. Спасибо.

Продолжение следует.

Настоящим постом хочу продемонстрировать вам как будет выглядет API bem-xjst v8.x. Все пока на стадии RC, поэтому хочу выслушать ваше мнение по поводу всего этого.

Изменения, которые войдут в v8.x

  • Все режимы теперь ведут себя одинаково: переопределяют значение из BEMJSON. (major)
  • Добавлены недостающие режимы: mods() и elemMods() для установки модификаторов. (minor)
  • Добавлены шорткаты режимов для добавления: addMix(), addAttrs(), addMods(), addElemMods(), addJs(). (minor)
  • Добавлены шорткаты для добавления content: appendContent() и prependContent(). (minor)

TLDR; Песочница bem-xjst v8.x RC: https://goo.gl/ZeY4xL, в которой можно попробовать все эти вкусности…

Технические подробности

1. Все режимы теперь ведут себя одинаково: переопределяют значение из BEMJSON. (major)

Сейчас значение из шаблона режима content(), bem(), cls(), tag() переопределяет значение указанное в BEMJSON. Если вам нужно расширить значение из BEMJSON в шаблоне нужно использовать applyNext() и this.extend()/concat().

Однако режимы mix(), js(), attrs() сейчас расширяют значение из BEMJSON.

Разное поведение режимов вносит некоторый раздрай и постоянно приходится держать в уме кто как себя ведет.

В v8.x мы привели все режимы к одинаковому явному поведению: переопределение значения из BEMJSON. Если вам нужно добавить что-либо, то теперь это можно будет сделать в явном виде — см п.3.

2. Добавлены недостающие режимы: mods() и elemMods() для установки модификаторов. (minor)

Под капотом эти режимы просто шорткаты к уже привычным всем конструкциям:

// mods()({something: myValue})
def()(function() {
    this.mods = {something: myValue};
    return applyNext();
});

и

// elemMods()({something: myValue})
def()(function() {
    this.elemMods = {something: myValue};
    return applyNext();
});

Как видно из примеров режимы mods() и elemMods() не имеют своей собственно очереди шаблонов, а добавляют шаблоны в стек к режиму def().

По умолчанию mods() и elemMods() возвратят вам значения из this.mods и this.elemMods соответственно.

Пример:

// BEMJSON
{ block: 'b' }

//Шаблоны
block('b').def()(function() {
  return JSON.stringify(apply('mods'));
});

//Результатом будет:
[]

3. Добавлены шорткаты режимов для добавления: addMix(), addAttrs(), addMods(), addElemMods(), addJs().

Так как все режимы теперь переопределяют значение, то чтобы компенсировать необходимость писать applyNext() для накапливания результата были введены шорткаты для уже существующих режимов add*().

Под капотом addJs()({ somekey: someval }) это

js()(function() {
  return this.extend(applyNext(), { somekey: someval });
});

Под капотом addMix()({block: 'mixed' }) это

mix()(function() {
  var res = applyNext();
  if (!Array.isArray(res)) res = [ res ];

  return res.push({block: 'mixed' })
})

Для остальных режимов аналогично. Как видно из примера шорткаты add*() не имеют своего стека шаблонов, а просто добавляют шаблон в стек соответствующего режима.

И, естественно, вы можете накапливать результат:

// Шаблоны
block('b')(
   addJs()({ a: 1 })
   addJs()({ b: 2 })
   addJs()({ c: 3 })
);

// BEMJSON
{ block: 'b' }

// Результат:
<div class="b b_type_awesome i-bem" data-bem='{"b":{"a":1,"b":2,"c":3}}'></div>

4. Добавлены шорткаты для добавления content: appendContent() и prependContent().

// Шаблоны:
block('b')(
    appendContent()(', templates!'),
    appendContent()('!!1'),
    prependContent()('(〜 ̄▽ ̄)〜 ')
);

// BEMJSON
{ block: 'b', content: 'Hello' }

// Результат:
<div class="b">(〜 ̄▽ ̄)〜 Hello, templates!!!1</div>

Как вы уже наверное догадались, это тоже шорткаты и они добавляют шаблоны в стек режима content(). Пример:

// appendContent()(', templates!') это тоже самое что и:
content()(function() {
  return [
    applyNext(),
    ', templates!'
  ];
});

Привет!

Мы приготовили для вас демо-проект на ASP.NET MVC, иллюстрирующий решение типовых задач с помощью БЭМ-инструментов.

В readme подробно описано, как всё работает. Вы можете не только посмотреть исходный код, но и запустить демо-приложение на своем компьютере, чтобы попробовать в действии!

Завтра буду рассказывать про БЭМ и ASP.NET на Я.Субботнике. Подключайтесь к трансляции!

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

Быстрый старт: https://ru.bem.info/methodology/quick-start/

БЭМ для CSS: https://ru.bem.info/methodology/css/

Приятного чтения :)

Привет!

18 августа в 19:00 мы с нашими друзьями из Front-end Science проведем очередной БЭМап в Киеве!

В программе:

  • Последние наработки и новости из мира БЭМ, а также ближайшие планы.
  • bem-sdk: сборка без bem-tools или ENB.
  • БЭМ в динамике: express-приложение с BEMTREE + BEMHTML.
  • Свободное общение: ваш опыт разработки с БЭМ.
  • Ответы на вопросы.

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

Как и обещал, выпустил Pobem@v1.

Список изменений (от версии 0.3.2)

Убрано : в декларациях блоков

Было

:block(block)

Стало

block(block)

Более чистый синтаксис

Больше не нужно для "каскадных" деклараций блоков (block, elem, mod) использовать &. Плагин сам склеивает и разбивает где нужно.

Было

:block(block) {
  &:elem(elem) {}
  &:mod(mod val) {
    width: 100px;
    &:mod(active) {
      &:elem(elem5) {}
    }
  }
  &:elem(elem1) {}
  &:elem(elem3) {}
}

Стало

block(block) {
  elem(elem) {}
  mod(mod val) {
    width: 100px;
    mod(active) {
      elem(elem5) {}
    }
  }
  elem(elem1) {}
  elem(elem3) {}
}

Переименовал Pobems -> Pobem

Такое название прощё запоминается

Синтаксис в виде цепочек (по аналогии с BEMHTML/BEMTREE)

Было

:block(block):elem(elem):mod(mod val)

Стало

block(block).elem(elem).mod(mod val)

Также сохранено

В качестве разделителя между mod val могут служить:

  • пробел -
  • запятая - ,
  • стрелка - ->

Названия блоков могут быть как в кавычках, так и без.

block(block).mod(mod val) === block('block').mod('mod', 'val')

репозиторий NPM репозиторий GitHub

Пришло время поговорить об успехах и продвижениях в работе над сборкой с помощью BEM SDK.

На вебинаре мы расскажем вам:

  • Про проблемные места в имеющихся инструментах сборки и удобство модульного подхода.
  • О целях организаций bem-sdk и gulp-bem на GitHub.
  • Про интроспекцию своими руками по файлам компонентов ваших проектов и библиотек с помощью библиотеки bem-walk.
  • О построении и использовании графа зависимостей и вычислении требуемых для сборки сущностей в различных технологиях (js, css, шаблоны) с помощью библиотеки bem-graph.
  • О построении списка итоговых файлов компонент по .deps.js-файлам компонент с помощью bem-deps и bem-walk.
  • Про сборку итоговых файлов для браузера из списка файлов компонент, полученных на предыдущем шаге, с помощью библиотек gulp-bem-*.

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

Трансляция начнется в 19:00 28 июля на отдельной странице. Ведущий вебинара — @zxqfox.

От создателей легендарного bemmet очередная штука, позволяющая писать меньше букв — bem-indent-syntax.

Demo вместо тысячи слов.

PS: Если наберется 10 звезд на github, сделаю плагин для Sublime ;)

Всем привет,

Кратко об основных событиях в мире БЭМ за последние 4 месяца с предыдущего дайджеста.

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

  • Выпустили bem-core 4.0.0-rc.1. Подробнее о релизе можно прочитать на форуме bem.info. Основные изменения коснулись усовершенствования i-bem.js. Если вы готовы — этот релиз уже сейчас можно щупать, крутить и внедрять в свои проекты. Стабильная версия выйдет совсем скоро. Не забывайте сообщать нам обо всех найденных ошибках.
  • Выпустили мажорную версию bem-components 3.0.0 которая работает с bem-core 3.0.1. Несмотря на то, что релиз мажорный — переход на него должен быть практически безболезненным. Подробнее о релизе читайте здесь.
  • Выпустили bem-history 3.2.0. Основное изменение — поддержка bem-core 3.x в bower.json. И, конечно, несколько багфиксов в комплекте.
  • Переименовали организацию bem-incubator в bem-contrib. Это название гораздо лучше отражает предназначение организации. Если вы используете (или разрабатываете) какие-либо пакеты, следует обновить пути к репозиторию (какое-то время github поддерживает редиректы автоматически). Можно использовать инструкцию.

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

  • Выпустили два мажорных, десятки минорных и патчевых релизов bem-xjst. Самая свежая весия — 6.5.1 Основные изменения:
    • BEMTREE
    • Реализовали поддержку ES6 arrow functions
    • Сделали опциональный эскейпинг контента
    • Поддержали JS-обвязку для элементов
    • Сделали режим для отрисовки HTML без /:
      вместо
    • Удалили часть устаревших методов и функций.

Подробнее обо всех изменениях bem-xjst читайте в release-notes, которые подробно пишутся к каждому релизу: https://github.com/bem/bem-xjst/releases.

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

Активно работали над ENB:

Работали над плагинами для ENB:

Новости сайта

  • Совсем недавно мы частично обновили дизайн сайта bem.info — он стал более современный, быстрый и красивый.
  • Выкатили украинскую версию https://uk.bem.info, впереди переводы и на другие языки.

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

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

2 года назад) некий @tadatuta на хакатоне написал тулзу для блогов из маркдауна и бэм-стека. Так вот после 2х лет забвения понадобилась мне тулза подобная чтобы на один манер собирать доки, блог, просто странички и тд. В общем случился форк, перерождение и отличный швейцарский нож для статики на bem-xjst и makrdown. https://github.com/awinogradov/bemark

Всем привет!

Сегодня мы зарелизили bem-core@v4.0.0-rc.1.

Это релиз-кандидат большого релиза bem-core@v4.0.0, который появится совсем скоро.

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

Уже доступен миграционный гайд и обновлённая документация на i-bem.js. Если вы не используете bem-components, то можно начинать изучать, крутить, вертеть и подключать к своим проектам новую версию bem-core.

Что нового и важного:

  • Значительно упрощено и унифицировано API работы со всеми видами событий:

    this._domEvents().on('click', this._onClick);
    this._events(this.findChildBlock('button')).on('click', this._onButtonClick);
    

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

  • Экземпляры для элементов перенесены в блоки i-bem и i-bem-dom и стали частью ядра. Теперь с элементами работать так же удобно, как с блоками:
this.findChildElem('button').setMod('disabled');

Подробнее в миграционном гайде.

  • Функциональность элемента collection блока i-bem перестала быть опциональной. Все методы, возвращавшие несколько БЭМ-сущностей, теперь возвращают коллекции:

    this.findChildBlocks('control').setMod('disabled');
    

    Подробнее в миграционном гайде.

  • Ленивая инициализация (поле live) разделена на две отдельные части — поле lazyInit и метод onInit(). Более явные названия без смешивания в одном месте двух вещей. Подробнее в миграционном гайде.
  • Удалены и переименованы множество методов — API стало чище и понятнее.

Все подробности о миграции на новую версию читайте в миграционном гайде. А документация на i-bem.js уже содержит полностью обновлённую информацию.

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

P. S. Релиз-кандидат bem-components с bem-core@v4 внутри будет в ближайшее время. Также мы ещё допишем английскую версию документации, чейнджлог и миграционный гайд.

Выкатили украинскую версию

https://uk.bem.info

Будут ещё переводы на другие языки. Если хотите помочь или заметили ошибку — пишите.

Привет!

Только что вышел релиз bem-history 3.2.0.

Основное изменение — поддержка bem-core 3.x в bower.json. И, конечно, несколько багфиксов в комплекте.

Предполагается «бесплатное» обновление.

Привет!

Мы под покровом ночи выпустили bem-components 3.0.0!

Несмотря на мажорную версию, обновление должно быть «бесплатным»: просто обновите версию в bower.json и пересоберите проект.

Тогда почему мажор? Потому что:

  • обновили зависимость от библиотеки bem-core до версии 3.0.1, где оторвали FastClick в пользу собственного решения для iOS
  • отказались от поддержки древних версий bem-xjst (вы ведь уже давно обновились?)
  • переименовали *.bemhtml в *.bemhtml.js (даешь подсветку синтаксиса!)
  • и еще по мелочи.

Теперь версия публикуется с предкомпилированным CSS, так что больше нет необходимости использовать Stylus для сборки (вреда однако ж тоже никакого ;)

Кроме того, версия теперь публикуется еще и в npm.

И как всегда, помимо основного варианта поставки в виде исходников, доступна не требующая сборки dist-поставка для локальной установки в проект и для прямого подключения с CDN.

Подробно со списком изменений можно ознакомиться здесь.

Приятного обновления!

PS: project-stub уже обновлен.

Новый вебинар по БЭМ совсем скоро!

17 мая в 19:00 мы поговорим об использовании BEMHTML и BEMTREE. Расскажем, как все это можно использовать с любыми источниками данных (файловой системой, базой данных, HTTP API или бэкендом на любом языке).

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

Затронем работу как на сервере, так и на клиенте.

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