Смотрел на днях какой-то доклад, на котором пообещали новую версию сайта bem.info. Когда ожидать?)
Смотрел на днях какой-то доклад, на котором пообещали новую версию сайта bem.info. Когда ожидать?)
Состав команды: @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 сообществу.
В конце концов выпущена версия 0.0.1 пакета bem-tools-find.
Пользуйтесь им на здоровье и не забывайте присылать ваши идеи и замечания.
В этом посте мы постарались ёмко рассказать про всё, что произошло в мире БЭМ за четыре месяца с предыдущего дайджеста.
Полностью переписали https://github.com/bem/bem-xjst — ядро для BEMHTML и BEMTREE. Оно стало заметно быстрее (как при сборке, так и при выполнении шаблонов), не требует компиляции, позволяет добавлять новые шаблоны в рантайме и вот-вот обзаведется новыми полезными фичами вроде source maps. Попробовать на деле можно здесь.
В начале декабря мы провели очередной Хакатон по БЭМ, посвященный разработке инструментов.
По итогам Хакатона появились:
Кроме этого, мы активно работали над ENB:
Опубликовали новые документы:
Обновили документы:
Интересные темы на форуме
Привет, пришла и моя очередь рассказать о содеянном на минувшем хакатоне.
Основная мысль, которая преследует меня уже долгое время — возможность сборки БЭМ-проектов с помощью любого инструмента. И именно с этой идеей я пришёл в то раннее утро субботы агитировать собравшихся присоединиться ко мне, в надежде немного приблизить неизбежное будущее, в котором нет 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
, который уже и делает всю основную работу.
Что же дальше? А дальше --Новый год-- у нас есть хитрый план: довести всё перечисленное до рабочего состояния, покрыть тестами и написать документацию. А потом... не останавливаться на достигнутом, а реализовать ещё 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 вступает все больше и больше разработчиков сообщества БЭМ, которые делают проекты с помощью технологии и хотят развивать и поддерживать их вместе, настало время открыть рубрику и делиться новостями и ссылками на полезные вещи.
Последние проекты Инкубатора:
bem-components
в проекте на Angular. Посмотреть на результат в деле можно здесь.ng-annotate
и ng-templates
для сборки Angular-проектов на ENB.bem-core
.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