Может кому будет интересно.
Написал модуль enb-markdown для enb. Он содержит две технологии:
markdown — собирает файлы Markdown с уровней в бандлmarkdown-to-html — конвертирует бандл Markdown в HTMLmarkdown-to-html — это обёртка над пакетом markdown-bemjson, который позволяет задавать свои правила конвертации в BEMJSON. В markdown-to-html добавлена возможность пробрасывать пользовательские данные из пользовательских правил конвертации в ctx базового блока.
Какие причины могут быть для того, чтобы блок не инициализировался?
В bemhtml указал block('name').js()(true);, добавился класс i-bem и атрибут data-bem, но вот класса name_js_inited нет и соответственно JS не выполняется.
Изучаю сейчас созданием первого проекта используя BEM и projectstub https://ru.bem.info/platform/tutorials/start-with-project-stub/
И там есть вот такой код
elem: 'price',
content: {
block: 'link',
mix: [{ block: 'goods', elem: 'link' }],
url: item.url,
content: item.price
}
С подписью
Шаблон может создавать не только HTML-элементы блока, но и другие блоки. Например, цену товара можно сделать ссылкой, используя для этого блок link из библиотеки bem-components.
Чтобы избежать вложенных селекторов при оформлении этой ссылки стилями, пометим её как элемент блока goods.
Почему мы делаем это именно в BEMHTML ? А не стандартным способ через созданием папки и объявлением блока в BEMJSON? А через BEMHTML поменять ему тег и добавить ссылку.
День добрый!
Пишу тут разную мелочовку пробую тестирую, и вот не пойму как правильно уровень зацепить вот пример.
enbBemTechs = require('enb-bem-techs'),
levels = [
{ path: 'node_modules/bem-core/common.blocks', check: false },
{ path: 'node_modules/bem-core/desktop.blocks', check: false },
{ path: 'node_modules/bem-components/common.blocks', check: false },
{ path: 'node_modules/bem-components/desktop.blocks', check: false },
{ path: 'node_modules/bem-components/design/common.blocks', check: false },
{ path: 'node_modules/bem-components/design/desktop.blocks', check: false },
{ path: 'node_modules/bem-font-awesome-icons', check: false },
'common.blocks'
];
я так понял тут они и пишутся, только вот добавляю иконки а они чет не приезжают :)
вот зависимости
({
mustDeps: [
{ block: 'icon' }
],
shouldDeps: [
{ block: 'button', mods: { type: 'link' } },
'link',
]
})
вот так я их зову
{
block: 'button',
mods: { theme: 'islands', size: 'm', type: 'link', disabled: item.disabled, view: item.view },
text: item.name,
url: item.url,
icon : { block: 'icon', mods: { bg: 'adress-book' } }
}
где я не прав? или где почитать подробно?
Спасибо.
Поиска помощи и фидбека пост.
Работа с формами, обрабатываемыми на клиенте, начала доставлять немало боли, особенно на фоне аналогичного опыта с Angular/Vue.js.
Появилась мысль облегчить решение таких задач. Основная идея была в том, чтобы сделать подход к формам более декларативным. Упростить добавление типового контрола в форму. Сделать возможность легко мапить форму на неплоские модели данных. Ну и это должно более-менее безболезненно встраиваться в существующее приложение (что-нибудь вроде bem-core + bem-components) без тотального переписывания всего и вся.
Прикручивание того же Vue.js в качестве дополнения, (если не замены) i-bem выглядело прикольно, но как-то не зашло, ибо появляются намёки на неконсистентность методологий.
Оставалось одно — свой велосипед. Важное требование — максимально простое решение. И никаких angular-like дайджестов. Идея с сеттерами во Vue ок, но лень всё это писать, можно проще.
В итоге пришёл даже не к какой-то программной единице, решающей проблемы, а, скорее, к подходу к их решению.
Идея в том, чтобы выделить три очевидных составляющих:
Контроллер состояний хранит стейты и общается с компонентами. Компоненты — это блоки, непосредственно работающие с данными. Инпут — компонент. Он может и отражать изменения данных, и сам их инициировать. Блок с текстом также может быть компонентом, отображающим какую-то часть стейта. Форма описывает стейт и привязывает компоненты к нему. Причём привязывается на уровне BEMHTML, пробрасывая в компонент имя стейта и путь к нужным данным в нём. Никаких поисков компонентов для установки значений или подписки на их события в форме нет.
В качестве шины событий с данными — каналы (events__channels). Именно каналы. У каждого стейта свой канал. В каждом канале два типа событий: read и write. В идеале компоненты подписываются на первое и генерируют второе. Контроллер состояний — наоборот. В данных события летит путь (dot-separated), по которому произошло изменение и новое значение. Компонент подписывается на все read-события своего стейта. Он сам решает, на какие реагировать, а какие дропать (по пути изменения в стейте). Два типа событий заметно всё упрощают за счёт того, что в общем случае компоненты не общаются между собой. Всё общение между компонентами происходит через контроллер стейтов.
До сих пор это всё дозревало в голове. Наконец удалось выкроить вечер и на коленке проверить жизнеспособность идеи. Всё это вылилось в пока ещё очень сырой контроллер стейтов и пару примеров.
https://github.com/gwer/e-state
В example.blocks есть форма (my-form), обёртка для инпутов (my-input) и составной контрол (editable-list). В данном случае составной контрол сделан проксирующим: не имеет собственного стейта и лишь правильно привязывает свои контролы к стейту внешней формы. Но можно писать и аналогичные контролы с собственным стейтом. Единственное, что следует помнить — если форма имеет несколько экземпляров, привязанных к разным стейтам, имя стейта для такой формы должно быть уникально для каждого экземпляра (например, генерить на основе this.generateId()).
То есть один раз описывается обёртка над инпутом, а дальше для добавления в форму новых полей требуется минимум изменений.
Клиентский JS формы:
eState.init(this.stateName, {
f1: '1111',
f2: '2222',
nested: {
first: '',
second: '',
}
})
Разметка формы:
{
block: 'my-input',
js: {
stateName,
model: 'f1',
},
},
{
block: 'my-input',
js: {
stateName,
model: 'f2',
},
},
{
block: 'my-input',
js: {
stateName,
model: 'f2',
},
},
{
block: 'my-input',
js: {
stateName,
model: 'nested.first',
},
},
{
block: 'my-input',
js: {
stateName,
model: 'nested.second',
},
},
Можно заметить, что к полю f2 привязываются сразу два инпута. При изменении содержимого одного из них содержимое будет меняться и в другом.
Написать аналогичные обёртки для основных контролов — не должно быть проблемой.
Компоненты могут быть более сложными. Можно завязывать их на несколько путей в стейте и вешать на эти пути любую логику. Сейчас примеры представляют собой эдакий аналог ng-model, но можно без проблем сделать, например, аналоги ng-bind, ng-show/ng-hide.
Так вот, к чему всё это. Наверняка кто-то уже подходил к этой проблеме. Есть ли похожие подходы или решения? Какие незамеченные мной проблемы есть у описанного подхода? Может, есть идеи, как это можно улучшить?
Доброго времени суток. Столкнулся с БЭМ. Прочел и просмотрел массу материала, но понятнее не стало. Чем дальше в лес - тем больше дров. В связи этим возник ряд вопросов, которые, уж простите, спрошу здесь.
1 - На сколько обязательно писать BEMJSON и использовать инструменты BEM ? то есть суть то какова : я могу писать классы и создавать файловую структуру вручную. Но в таком случае всплывает ряд неудобств : длинные селекторы, долго и не удобно прописывать вручную , в css будет все а не только то что нужно и используется. Получается что самый правильный подход - использовать метод формирования HTML из JSON . Но тут же сложность которая лично меня вводит в ступор : мой мозг напрочь не хочет представлять верстку в виде JSON и сущностей БЭМ . По мимо этого все скрипты придется писать через BEMHTML и это так же немного вводит в ступор ... немного от слова совсем. Возможно есть какой то метод упростить процесс вхождения в БЭМ ?
2 - При попытках работать с тестовым проектом согластно методологии БЭМ сталкиваюсь с тем что у меня длинющий JSON в котором очень просто потеряться. При этом понимаю что по идее, если я верно понимаю методологию и ее идиалогию : я могу создать свою библиотеку блоков, для своего проекта, и уже работая со страницей использовать их (по мимо существующих в репозиториях). В таком случае вопрос : как должен выглядеть отдельный блок ? Это все равно будет один глобальный блок page и в нем мой блок со своей структурой , или же как то иначе ?
3 - Путаница с папками. Я просмотрел множество туториалов по тому как работать с БЭМ и вынес вывод : свои блоки можно класть и в desktop.blocks и в common.blocks . Однако куда же правильно ? в некоторых туториалах файлы блоков , которые создаются в процессе верстки, кладут в desktop в некоторых в common . При этом никто не объясняет как же все же правильно . (интуитивно чую что в desktop , но это не точно :) )
Заранее прошу прощения за вопрос - возможно некоторые , если не все, покажутся глупыми, но это то что не дает мне спать )
Расскажите, пожалуйста, более подробно про шаблонизацию на клиенте, используя project-stub
Подключаю к странице файл index.bemhtml.js, в котором содержится шаблон button, значит на клиент все подгрузилось.
Затем пишу блок test
test.js
modules.define('test', ['BEMHTML', 'i-bem-dom'], function(provide, bemHtml, bemDom) {
provide(bemDom.declBlock(this.name, {
onSetMod: {
js: {
inited: function() {
var html = bemHtml.apply({
block: 'button',
content: 'test'
});
console.log(html); // Возвращает пустой результат
}
}
}
}));
});
test.deps.js
({
mustDeps: [
{ block: 'button' }
]
})
Использовал bem-bemtree-static-project-stub и все работало, то есть получается весь мой ступор в файле enb/make.js
Добрый день. Имею вот такую структуру, скажите, пожалуйста, все ли "по стандарту"? Изучаю методологию совсем не долго, потому корректировки от специалистов бы не помешали. Код упрощен, лишнее удалил, чтобы было удобнее
<form class="form">
<div class="form__line">
<div class="form__label"></div>
<input type="text" class="form__input form__input_m">
<input type="submit" class="form__button button" name="submit">
</div>
<div class="form__line">
<div class="form__label"></div>
<input type="text" value="" class="form__input">
</div>
<div class="form__line">
<div class="form__label ">
</div>
<input type="text" class="form__input">
</div>
<div class="form__line">
<div class="form__label ">
</div>
<input type="text" class="form__input">
</div>
<div class="form__line">
<div class="form__label ">
</div>
<div class="form__complex counter">
<div class="counter_wrapper"></div>
<textarea class="form__input"></textarea>
</div>
</div>
<div class="form__line">
<div class="form__label "></div>
<div class="form__complex options">
<div class="options__box">
<input type="checkbox">
</div>
<div class="options__box">
<input type="checkbox">
</div>
<div class="options__box" >
<input type="checkbox" >
</div>
<div class="options__box">
<input type="checkbox">
</div>
</div>
</div>
<div class="form__line">
<div class="form__label ">
</div>
<div class="form__complex avatar">
<div class="avatar__info"></div>
<div class="avatar__meta"></div>
<div class="avatar__thumbnails thumbs">
<div class="thumbs__delete"></div>
<div class="thumbs__crop"></div>
</div>
</div>
</div>
<div class="form__line">
<div class="form__label">
</div>
<div class="form__complex captcha">
<div class="captcha__value"></div>
<div class="captcha__image"></div>
</div>
</div>
</form>
Может я еще какие то базовые вещи не изучил, но все же пытаюсь что то сделать по бэм. И не получается заюзать bem create. Может быть я плохо читал документацию, но я не нашел там "как" пользоваться этой командой, я прочитал много об этой команде, какие ключи можно использовать, что они создают и. т. д.
Но так и не нашел как пользоваться то ? На каком уровне переопределения вводить эту команду, да там написанно, что можно назначить какие то уровни переопределения в каком то файле, но вот как эта команда работает по умолчанию так и не нашел.
Как только начал читать документацию, увидел "bem create my-block" думаю вот как все просто то, но не тут то было, команда не завелась, уточнения про то, что нужно писать как то так "./node_modules/.bin/bem create -l desktop.blocks -b layout -T css" ни где в доках не нашел, только в чате телеграмм и в комментариях на гитхабе.
Собственно вопрос. Знаю, что можно не писать этот длинный путь, а просто указать "bem create my-block". Для этого посоветовали в файле .bashrc написать вот это "export PATH=./node_modules/.bin:$PATH" Но строчка "bem create my-block" в консоли не сработала =( В чем может быть причина ?
Мне не нужны некоторые промежуточные таргеты на файловой системе. Как я могу написать технологию так, чтобы она не записывала результат в файл, а отдавала его в следующую технологию. Например технология files не создает файлов, но предоставляет их список. Если есть что почитать кроме исходников enb буду очень благодарен за ссылку.
Добрый день. Заразился БЭМ) пока только пробую и учусь.
Хочу потестить bem-grid но без project-stub и собственно без полноценной БЭМ разработки, по простому так сказать. Установил новый модуль себе в проект: npm i --save-dev bem-grid. Подтягиваю стили из модуля, все нормально работает) Решил поменять настройки сетки, но не пойму где именно и как пересобрать новый css, какую комманду в консоли ввести? Спасибо
Ребята, добрый день. Подскажите, пожалуйста, где грамотнее реализовать внешнюю геометрию и позиционирование элементов блока ?
Т.е., к примеру, есть некий блок, в нем допустим несколько элементов. Блок будет переиспользоваться на нескольких страничках, возможно с изменением положения элементов внутри блока.
Оформление и стили элементов вынес в их модификаторы (по одному для каждой странички), а позиционирование (отступы) сомневаюсь, куда по-науке прописать:
Ребята, добрый день. Подскажите, пожалуйста, где грамотнее реализовать внешнюю геометрию и позиционирование элементов блока ?
Т.е., к примеру, есть некий блок, в нем допустим несколько элементов. Блок будет переиспользоваться на нескольких страничках, возможно с изменением положения элементов внутри блока.
Оформление и стили элементов вынес в их модификаторы (по одному для каждой странички), а позиционирование (отступы) сомневаюсь, куда по-науке прописать:
Привет, уважаемые дамы и господа! дайте совет где я не прав
modules.define('form', ['i-bem-dom'], function(provide, bemDom) {
provide(bemDom.declBlock(this.name, {
onSetMod: {
js: {
inited: function() {
}
}
}
},{
getVal: function(){
return this.domElem.serialize();
}
}));
});
собственно все вроде просто но когда зову из другого блока
modules.define('post', ['i-bem-dom', 'form'], function(provide, bemDom, Form) {
provide(bemDom.declBlock(this.name, {
onSetMod: {
js: {
inited: function() {
var data = Form.getVal();
}
}
}
}));
});
и вопрос номер два, можно ли как то искать блоки findChildBlock('input') как то так или нет обязательно требовать блок как модуль и его указывать ?
спасибо за ответы, не судите строго :%
Всем привет!! Подскажите существует ли список где можно увидеть все методы и события блока i-bem и i-bem-dom? Тяжело перелопачивать руководство, и крайне не удобно.
Добрый день.
В примере по созданию проекта на БЭМ (https://ru.bem.info/platform/tutorials/start-with-project-stub/), на шаге добавления картинки в блок logo, фрагмент определения блока image из примера на сайте выглядит так:
block: 'image',
attrs: { src: 'some-url' }
При этом в результате сборки в html попадает только:
<img class="image">
По аналогии с другими блоками попробовал переписать определение так:
block: 'image',
url: 'some-url'
И получилось ожидаемое:
<img class="image" src="some-url">
Подскажите, в чём здесь дело?
Опишу примерно задачу.
Мы получаем ajax данные в виде обычного json (сервер php). Например это список постов, соответственно у нас есть блок post, описанный в bemhtml. Вопрос - как преобразовать голые json-данные в BEM-дерево на клиенте? Схема насколько я понимаю должна быть JSON --> BEMTREE --> BEMHTML --> HTML, но разобраться пока не могу.
О том как развивается библиотека bem-react-core, которая позволяет декларативно работать с React-компонентами в рамках БЭМ-методологии. Спикер Антон Виноградов.
Часть 1 https://www.youtube.com/watch?v=4QblH4SKeIg
Часть 2 https://www.youtube.com/watch?v=MFlqi5maFX8
Спикер Дима Андриянов. https://www.youtube.com/watch?v=n0iF2zxa3DY
Доброго времени суток. Пробую начать работать с БЭМ . Решил приступить с создания собственного проекта по мануалу https://ru.bem.info/platform/tutorials/start-with-project-stub/ . На шаге сборке проекта nmp ругается и пишет в лог сл:
0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'start' ]
2 info using npm@3.10.10
3 info using node@v6.10.2
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle bem-project-stub@2.0.0~prestart: bem-project-stub@2.0.0
6 silly lifecycle bem-project-stub@2.0.0~prestart: no script for prestart, continuing
7 info lifecycle bem-project-stub@2.0.0~start: bem-project-stub@2.0.0
8 verbose lifecycle bem-project-stub@2.0.0~start: unsafe-perm in lifecycle true
9 verbose lifecycle bem-project-stub@2.0.0~start: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\web\OpenServer\domains\droid\main\node_modules\.bin;C:\Users\Vadim\bin;E:\Git\mingw64\bin;E:\Git\usr\local\bin;E:\Git\usr\bin;E:\Git\usr\bin;E:\Git\mingw64\bin;E:\Git\usr\bin;C:\Users\Vadim\bin;C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\Skype\Phone;C:\Program Files\PuTTY;E:\Git\cmd;C:\Program Files\nodejs;C:\Users\Vadim\AppData\Local\Microsoft\WindowsApps;C:\Users\Vadim\AppData\Roaming\npm;E:\Git\usr\bin\vendor_perl;E:\Git\usr\bin\core_perl
10 verbose lifecycle bem-project-stub@2.0.0~start: CWD: C:\web\OpenServer\domains\droid\main
11 silly lifecycle bem-project-stub@2.0.0~start: Args: [ '/d /s /c', 'enb server' ]
12 silly lifecycle bem-project-stub@2.0.0~start: Returned: code: 1 signal: null
13 info lifecycle bem-project-stub@2.0.0~start: Failed to exec start script
14 verbose stack Error: bem-project-stub@2.0.0 start: `enb server`
14 verbose stack Exit status 1
14 verbose stack at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:191:7)
14 verbose stack at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:191:7)
14 verbose stack at maybeClose (internal/child_process.js:886:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid bem-project-stub@2.0.0
16 verbose cwd C:\web\OpenServer\domains\droid\main
17 error Windows_NT 10.0.14393
18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
19 error node v6.10.2
20 error npm v3.10.10
21 error code ELIFECYCLE
22 error bem-project-stub@2.0.0 start: `enb server`
22 error Exit status 1
23 error Failed at the bem-project-stub@2.0.0 start script 'enb server'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the bem-project-stub package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error enb server
23 error You can get information on how to open an issue for this project with:
23 error npm bugs bem-project-stub
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls bem-project-stub
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]
Версия 4 +. Подскажите плз в чем трабла. Где я делаю не так ?
Собственно постепенно осваиваю технологию и столкнулся с такой проблемой, что не могу динамически вставить какой-либо блок.
modules.define('app-menu', ['BEMHTML', 'i-bem-dom'], function(provide, BEMHTML, bemDom) {
provide(bemDom.declBlock(this.name, {
onSetMod: {
js: {
inited: function() {
this._domEvents().on('click', this._addBlock);
}
}
},
_addBlock: function () {
console.log(BEMHTML.apply({
block: 'button',
text: 'Submit'
}));
}
}));
});
BEMHTML.apply почему-то не возвращает блок button, подскажите в чем я не прав?
Поставил project-stub из merged ветки. В нём есть 3 места где закомментировано использование bemtree. Соответственно раскомментировал, но bemtree-файлы почему-то не подхватываются.
/desktop.bundles/index/index.html 75ms
23:25:20.359 - build started
23:25:20.366 - [rebuild] [desktop.bundles/index/index.bemjson.js] file-provider
23:25:20.367 - [isValid] [desktop.bundles/index/index.bemdecl.js] bemjson-to-bemdecl
23:25:20.370 - [rebuild] [desktop.bundles/index/index.levels] levels
23:25:20.372 - [isValid] [desktop.bundles/index/index.deps.js] deps
23:25:20.374 - [rebuild] [desktop.bundles/index/index.files] files
23:25:20.374 - [rebuild] [desktop.bundles/index/index.dirs] files
23:25:20.375 - [isValid] [desktop.bundles/index/index.bemhtml.js] bemhtml
23:25:20.375 - [isValid] [desktop.bundles/index/index.html] bemjson-to-html
23:25:20.375 - build finished - 23ms
Даже упоминания нет. Соответственно вопрос - что делать?
Допустим, у меня есть блок навигации, который генерит нужную разметку. Я хотела бы использовать его в шапке и в подвале, но чтобы и там, и там он был элементом: .header__nav и .footer__nav.
Сейчас чтобы использовать генерацию разметки я сначала подключаю его как самостоятельный блок ({ block: 'nav'}), а затем, например, с помощью миксов добавляю контекст: mix: { block: 'header', elem: 'nav'}.
Вопрос: можно ли как-то делать наоборот, то есть объявлять элемент блока, а потом к нему примиксовывать блок для генерации разметки?
Другой возможный вариант использования — SVG-иконки, когда, например, элемент .socials__icon одновременно является инлайновым SVG-изображением. Хочется объявлять элемент блока, а потом указывать какой шаблон использовать для разметки, и, таким образом, избавиться от необходимости привязывать контекст миксинами.
Как это можно сделать?
Суть в чем, используется common блоки на адаптивном проекте, у кнопок на тачах при первом клике вместо клика отрабатывает _hovered. Проблему можно повторить в том же project-stab - включаем в хроме эмуляцию какого-нибудь iphone 6 и жмем на кнопку dropdown.
Как можно вылечить? В исходниках кнопки модификатора hovered нет, откуда он приходит?
21 апреля в московском офисе Яндекса мы проведем третий митап по БЭМ в этом году. Первая встреча была для тех, кто только знакомится с БЭМ. На второй — мы рассказали, как собирать БЭМ-проект и как подружить БЭМ с React-компонентами. На этот раз мы приготовили для вас мастер-класс, чтобы показать БЭМ на живом примере.
Видео с предыдущих встреч можно найти на нашем форуме.
В рамках мастер-класса:
Митап пройдет в пятницу, 21 апреля в московском офисе Яндекса с 19:00 до 22:00.
Участие, как всегда, бесплатно, но количество мест в зале ограничено, так что успейте зарегистрироваться!
Stay BEMed!
Прочитала про БЭМ, решила попробовать использовать и сразу же натолкнулась на проблему. Допустим, у меня есть блок, внутри него много тегов p, и всем нужно задать определенные маргины. Я пишу:
.my-block p{
margin: 10px 0;
}
Но есть один тег p, которому я хочу задать другой маргин, я пишу селектор .my-block__my-elem и этот маргин не применяется, потому что селектор .my-block p перевешивает. Что делать в таком случае? Не писать же important, селектор .my-block .my-block__my-elem, или, еще хуже, не добавлять же всем тегам p класс my-block__p?
13 апреля в екатеринбургском офисе Яндекса мы проведем очередной митап по БЭМ. Приглашаем тех, кто уже умеет верстать, знаком с JavaScript и теперь хочет узнать больше про БЭМ. В рамках митапа:
Вы можете задавать вопросы заранее в комментариях к этому посту. Тогда мы сможем включить подробные ответы в наш рассказ.
BEMup пройдет в четверг, 13 апреля в екатеринбургском офисе Яндекса с 19:00 до 22:00. Участие, как всегда, бесплатно, но количество мест в зале ограничено, так что успейте зарегистрироваться!
Stay BEMed!
Добрый день!!
Не могу разобраться почему не подтягиваются зависимости задекларированные в Deps
В блоке: activities существует блок content-image с модификатором content-image_img_left
В файле activities.deps.js существует следующее содержимое:
([
{
shouldDeps: [
{
block: 'content-image',
mods: { img: [
'left',
'right'
]
}
}
]
}
])
Пробовал по разному:
залил проект в гитхаб
Сборка ENB. При сборке Gulp - без деклараций работает, и по зависимостям (от блока) приходит то что надо. Хотя он и задекларирован только в index.bemjson
Пожалуйста помогите разобраться
Допустим есть сайт классической структуры - шапка, подвал, сайдбар и основной контент. Ну и собственно шапка, подвал и сайдбар у нас в проекте не меняются, а вот в области основного контента содержимое разное. Ну и в область сайдбара хочется иногда тоже что-то добавить. Допустим есть у нас главная страница, страница логина, страница регистрации. Вопрос - как это концептуально верно сделать на БЭМ-стеке?
Я вижу следующие варианты:
Вариант "в лоб" - копипастить структуру страницы (bemjson) из бандла в бандл и менять только область контента. Вообще не вариант т.к. при большом размере проекта не дай бог поменяется структура (например добавили на страницу 3-ю колонку) и придётся бегать по всем bemjson-ам и везде менять структуру.
Сделать layout в виде блока, а структуру основной области контента пихать в поле content: блока. Это уже вариант, но слабенький, т.к. непонятно тогда зачем вообще bemjson. Весь layout тогда будет в шаблоне блока и в bemjson-е не виден. Плюс непонятно как например для этого варианта ещё и добавить что-то в сайдбар. Вернее понятно - заводим ещё поле в блоке и затем в шаблоне layout-а разруливаем, но это как-то тоже кривенько. Ну т.е. bemjson будет типа:
{
block: 'layout',
content: { block: 'login-form' },
sidebar: { block: 'sidebar-widget' }
}
Т.е. фактически выродится, а всё мясо будет фактически внутри шаблона блока layout.
Может есть какие-то ещё варианты? Ну и интересно вообще кто и как подобные штуки разруливает.
Не нашёл способ передать собственный идентификатор в компонент popup группы dropdown из bem-components.
Имеется в виду установка того идентификатора, который используется для связи popup и dropdown_switcher_button.
Как ни пытаюсь, в коде всё равно присутствует ... id="uniq14912161426251"
Максимум, чего удаётся добиться, это <popup ... data-bem='{"popup":{},"dropdown":{"id":"appUserNameDropdown"}}'>, но id всё равно uniq....
Как???
UPD
Так понял, это xjst'шный generateId(), безусловно дёргаемый в dropdown для получения своёства id, который в свою очередь дёргает this.identify(this.ctx), который вроде должен подхватывать свойство this.ctx.uniqueID (как я пробовал сначала), но на самом деле нет. (Такое ощущение, что до того identify, что находится в составе bem-core, дело даже не доходит, если это возможно...)
UPD
Ну да, конечно, там (bem-xjst/lib/bemhtml/bundle.js) свой indentify, вот такой:
exports.identify = function identify(obj, onlyGet) {
if (!obj)
return getUniq();
if (onlyGet || obj[uniqExpando])
return obj[uniqExpando];
var u = getUniq();
obj[uniqExpando] = u;
return u;
};
который вообще никуда не смотрит.
Т.е., выходит, расширять dropdown (popup?), чтобы переопределять нужные методы/свойства? Как правильно?
Добрый день. Ребята, я начинающий разработчик, просьба сильно не ругать (документацию честно читаю, стараюсь разобраться). Столкнулся с определенной проблемой, подскажите направление, чтобы разобрался дальше самостоятельно. Суть вопроса, чисто теоретически: В проекте на первой страничке хочу сделать универсальную шапку (header), содержащую контейнер (container) , который содержит 3 блока (logo, nav и text-area). Контейнер буду использовать для позиционирования блоков. По задумке, вариантов контекста блока (text-area) будет несколько и на разных страничках буду их подключать по текущему смыслу к контейнеру, путем микширования, если я правильно понимаю. Но, я где-то должен описать все варианты структур данного блока, пока не имею ввиду его оформление, сам контекст.
Вопрос: не могу понять, в index.bemjson.js описать блок могу, текущую разметку 1 варианта получу, но где описать остальные варианты структуры этого блока?