Привет!
Если вы знаете кого-то, кто умеет в БЭМ и почему-то еще не нашел работу своей мечты — сдайте его нам на опыты.
Если БЭМ не умеет, но все равно крут, то тоже сдайте — мы научим.
Если работа мечты вашего знакомого гуру не связана с БЭМ — все равно приводите, найдутся интересные задачи и для таких.
В благодарность за удачную рекомендацию мы выплатим вам 100 тысяч рублей. Сдать друга можно здесь: https://yandex.ru/jobs/recommend/about_frontdev_msk
Добрый день! Как добавить js для блока offer-gallery-modal который формирую через BEMHTML, стили также для этого блока не попадают в сборку, хотя зависимости все прописаны
var modalContent = {
block: 'offer-gallery-modal',
content: [
{
block: 'modal',
elem: 'close'
},
{
elem: 'title',
tag: 'h2',
content: curTitle
},
{
elem: 'fraction',
content: ['Фракция ', {tag: 'span', content: curFraction}]
},
{
elem: 'content',
content: [
{
elem: 'main-images',
content: {
elem: 'image',
tag: 'img',
attrs: {src:curUrl}
}
}
]
}
]
};
html = BEMHTML.apply(modalContent);
Всем привет!
У меня наверное дурная мысль!
Как заинлайнить стили в хтмл применяя стэк БЭМ?
Обоснование данной задачи: Поисковые системы рекомендуют инлайнить стили для рендера верхней части страницы. Для увеличения скорости отображения видимой части страницы клиенту.
Доброго дня!
Если необходимо сделать переключение цветовых тем на сайте, получается возможен вариант только с наследованием как и без бэм именования? Т.е. задаем body class="theme_blue", и пишем отдельный css в котором все элементы имет родителем body.theme_blue, или с бэм именованием есть другие решения?
Приветствую,
Используем React, а BEM как CSS методологию.
Есть следующая проблема связанная с адаптивным дизайном.
Допустим есть сущность, которая имеет следующие состояния (модификаторы) small, medium и large.
Бывает так, что на всех разрешениях он имеет одно состояние (к примеру, small), но и так, что на одном разрешении одно, а на другом еще какое-нибудь (к примеру, small по умолчанию, а medium на разрешении > 1280px)
У меня пока два способа решения этой проблемы:
-xs, -md, -lg. Получается, что если мне нужно, чтобы на разрешении > 1280px сущность имела состояние medium, я задаю ему medium-lg. То есть такая некая надстройка у состояния. Также есть мысли использовать вместо - символ @ (как обозначение, что это именно media query), то есть medium@lg;window.mathMedia рендерить нужное состояние. Именно всю страницу рендерить с нужными состояниями с учетом разрешения, а не конкретно компонент.Спасибо.
UPD: Опубликовали скринкаст митапа!
30 июня в московском офисе Яндекса пройдет очередная встреча БЭМ-сообщества.
В этот раз мы решили последовать общему реактовому тренду и ответить на ваши вопросы про разработку на БЭМ и React. Мы расскажем про нашу библиотеку bem-react-core и про всё, что успели сделать в этом направлении, ответим на ваши вопросы про React/БЭМ и не только.
По традиции на БЭМапе мы ответим на все вопросы, которые вы зададите в комментариях к этому анонсу.
Участие, как всегда, бесплатно, но количество мест в зале ограничено, так что успейте зарегистрироваться! Мы просматриваем все заявки вручную, поэтому могут быть некоторые задержки в получении.
https://www.youtube.com/watch?v=ztDWggzH8W4
Stay BEMed!
как настроить сборку ?.node.js файдла галпом
Мне никак не дает покоя 1 вопрос. Если мы вот так опишим блок и модификатор для блока:
.button {
color: red;
}
.button_color_blue {
color: blue
}
Затем в HTML укажем class="button button_color_blue". .
Таками образом кнопка станет синей только потому, что стили модификатора в CSS идут после стилей самого блока.
Скажите, возможны ли варианты, когда возможно нарушение порядка следования в CSS? Например после обработки минификаторами. Или например препроцессор SASS вдруг конструкцию .block { &--modificator {} } начнет разворацивать в обратном порядке, и напишет в CSS .block--modificator, а уже потом сам .block
Ведь как я понимаю тогда все сломается и кнопка будет красной, несмотря на то, что класс модификатора на теге есть.
Как можно быть спокойным за все это?
Заранее спасибо.
Есть ли примеры использования webpack для БЭМ?
В последний день весны мы решили рассказать вам, что наша команда сделала за последние четыре месяца.
Чего стоит ждать в ближайшем будущем:
Выпустили bem-core 4.2.0. Обновление должно быть совершенно «бесплатным», так как новая версия полностью обратносовместимая.
Главным изменением является совместимость с bem-xjst 8.x.
Все изменения, вошедшие в релиз, описаны в CHANGELOG.
bem-core 4.2.0 уже внедрена в project-stub.
Выпустили две версии v5.1.0 и v6.0.0.
Версия v5.1.0 обратносовместимая. Обновление не должно потребовать дополнительных усилий.
Основные изменения:
link_disabled; Подробности в CHANGELOG.
Bерсия v6.0.0 отличается от 5.1.0 только новыми шаблонами. v6.0.0 обязательно требует обновления до bem-xjst v8.x, где появились новые режимы и исправлена работа режима extend.
Подробности в CHANGELOG.
Необходимые пакеты для сборки на ENB (enb-bemxjst 8.6.7) или gulp (gulp-bem-xjst 3.0.0) уже доступны для установки.
При переходе вам может пригодиться автоматический мигратор шаблонов.
bem-components 6.0.0 внедрена в project-stub.
Выпустили новую версию bem-history v4.0.0, анонсированную в прошлом выпуске дайджеста. Версия v4.0.0 полностью совместима с bem-core v4.
Главное изменение — переименование блока uri в элемент uri__querystring, который расширяет базовую реализацию одноименного модуля из bem-core классом Uri. Методы класса сохранились без изменений.
Подробное описание изменений в CHANGELOG.
Опубликовали мини-библиотеку bem-calendar на основе bem-components.
Опубликовали библиотеку bem-textarea-editor с блоком editor, позволяющим писать текст на маркдауне с удобной панелью инструментов (примерно как на Github) и получать превью до отправки поста на сервер.
Посмотреть на работу блока в действии можно тут.
Опубликовали библиотеку bem-font-awesome, которая позволяет использовать Font Awesome с использованием БЭМ-нотации и не тянуть лишние стили в проект.
Как установить и использовать библиотеку, читайте в README проекта или в посте на форуме.
Опубликовали альтернативный вариант библиотеки bem-font-awesome — bem-font-awesome-icons, где распилили шрифт на отдельные SVG-иконки, так что теперь на клиент приедет только то, что реально используется.
Подробности в документации и на форуме.
Обновили версии библиотек bem-core 4.2.0 и bem-components 6.0.0.
Обновили версии библиотек bem-core v4.2.0, bem-components v6.0.0 и другие зависимости.
Выпустили следующие релизы v8.6.0 - v8.6.11.
Основные изменения:
oninit() во время второй и последующих вызовов compile() не вызывались. Теперь это исправлено.this.reapply() и depth.i-bem при миксе элемента с js.applyCtx.appendContent()/prependContent(). match() без аргументов.requires.match можно использовать apply() для вызова любого режима, относящегося к данному узлу.Полезный пост про миграцию проектных шаблонов.
Появился пакет gather-reverse-deps, позволяющий собирать обратные зависимости.
Выпустили пакеты 2.0.0-5 и 2.0.0-6.
Основные изменения:
bemNaming.modValDelim.delims вместоelemDelim, modDelim иmodValDelim для соответствия функции bemNaming.Выпустили bem-tools-create v2.1.0, в которой исправили ряд ошибок и добавили поддержку следующих опций:
-f — принудительно перезаписывает существующие файлы;-c — задает содержимое создаваемых файлов не из шаблонов, а вручную из командной строки.Выпустили новую версию borschik v1.7.0, где хеш-функция, используемая при фризе статики, была вынесена в отдельный пакет borschik-hash. Прекращена поддержка node 0.8.0
Подробности в CHANGELOG.
Обновили документацию.
Выпустили bem-react-core v0.4.2. В новой версии исправлен баг с потерей контекста для вложенных элементов и ряд других ошибок.
Основные изменения:
defaultProps и propTypes. Написали подробную документацию – REFERENCE.
Провели ряд мероприятий, посвященных bem-react-core:
Продолжаем активно развивать bem-react-components — библиотеку блоков для разработки с React по БЭМ-методологии.
Продолжаем создавать реактовый проджект стаб create-bem-react-app, который позволяет одной командой собрать готовое React/БЭМ-приложение с установленными зависимостями и правильной файловой структурой.
Важный приятный пункт — create-bem-react-app не требует никаких предварительных настроек сборки.
project-stub. На живых примерах показали, для чего нужны технологии BEMJSON, BEMTREE, BEMHTML, DEPS, и как использовать их вместе. Опубликовали скринкаст.Начал перетаскивать проект на новые версии bem-components, bem-core. После банальных переименований методов упёрся в непонятное:
Что использовать вместо:
elem = block.elemify(domNode, 'elem')block = domNode.bem('block')(Также предстоит ещё разбираться с кучей мест, где используется старый menu-item вместо menu__item. Наверное, что-то ещё вылезет; приду сюда плакать обратно.)
У блока есть множество одноименных элементов, клик по которым необходимо обрабатывать.
Подписываюсь на клик так:
this._domEvents("item").on("click", this._onClick);
В методе _onClick необходимо получить бэм-элемент, по которому был клик. Как правильно это сделать средствами БЭМ и возможно ли вообще такое?
Пока сделал костыльное решение, которое конечно работает, но не кажется корректным:
_onClick: function(e) {
var elems = this._elems("item");
var elem;
for (var i = 0; i < elems.size(); i++) {
if(elems.get(i).domElem[0] === e.currentTarget) {
elem = elems.get(i);
break;
}
}
}
Столкнулась с такой проблемой: Верстаю компонентный проект, из БЭМ использую структуру файлов и нэйминг в css. Собираю проект при помощи Gulp. Итак проблема: в одном из блоков подключаю другой блок при помощи gulp-rigger - //= ../block/block.html но проблема в том что он должен несколько иначе выглядеть и поэтому нужно блоку подставить модификатор, rigger этого не умеет, он только инклюдит файлы, подскажите что делать в этом случае?
Есть такой блок: https://monosnap.com/file/pGc1WTU62lxQLYMh65Nb7peD9zaLJJ
Правильно ли я его разметил по БЭМ?
.news
.news__head
.section__title.news__title
.news__content
.news__column-left
.news__img-big-wrap
.news__sub-title
.news__link.news__link_big
.news__column-right
.news__link-wrap
.news__link.news__link_small
.news__date
http://take.ms/uRJoh - допустим есть у меня вот такой блок. Только классы я называю так: .news, .news__head, и так далее, короче по БЭМ-у.
А если мне нужно вот эти элементы на скрине стрелками указаны, завернуть в блок-контент. То как его назвать? .news__head__content нельзя же
.news__head-content ?
Разрабатываю файловую структуру нового проекта и задумалась, как предпочтительнее. Есть два варианта:
Вариант 1
scss/
blocks/
menu/
_common # css menu
list/
_common # css list
form/
input/
_common # css input
label/
_common # css label
button/
_common # css button
variables/
_menu # variables menu
_list # variables list
form/
_input # variables input
_label # variables label
_button # variables button
_common # variables form
main # all variables and css
Вариант 2
scss/
blocks/
menu/
_variables
_common # css and variables
list/
_variables
_common # css and variables
form/
input/
_variables
_common # css and variables
label/
_variables
_common # css and variables
button/
variables/
_common # variables design page
main # all variables and css
Какой из вариантов построения файловой структуры предпочтительнее?
Заранее спасибо за знания!
http://take.ms/3MHjg - как тут создать bem-объект из jQuery - объекта? http://take.ms/m2Jly - как можно найти ближайшего родителя, parent in jQuery?
Где-то видел пример линтинга, подключаемого в .enb/make.js, не могу найти. Ткните, пожалуйста?
Интересует пример предварительной статической проекта проверки перед сборкой (js, bemhtml, возможно, styl/css).
Здравствуйте. Небольшая дилемма. Есть элемент блока, содержащий еще несколько элементов. Отображение внутренних элементов может меняться в зав-ти от их количества. В итоге у меня 2 варианта:
<div class="block__item1">
<div class="block__item2 block__item2_type_multi">
</div>
<div class="block__item2 block__item2_type_multi">
</div>
<div class="block__item2 block__item2_type_multi">
</div>
<div class="block__item2 block__item2_type_multi">
</div>
</div>
или
<div class="block__item1 block__item1_type_multi">
<div class="block__item2">
</div>
<div class="block__item2">
</div>
<div class="block__item2">
</div>
<div class="block__item2">
</div>
</div>
Второй вариант красивее, но потребует использования в css конструкции типа .block__item1_type_multi .block__item2 {}
Как лучше поступить?
PS: если block__item1 смиксовать в блок, то вопрос, в принципе, останется такой же..
Всем привет! Я уже задавал такой вопрос в слаке, но хочу продублировать его здесь, поскольку он очень важен для меня (надеюсь, что и ещё для кого-то окажется полезным), и очень хочется разобраться в нём.
Вопрос опишу так:
Как быть в случае, если, к примеру, нам необходимо сделать адаптивность, скажем, на ширине <=500px. То есть делаем сайт адаптивным на ширине 500 и меньше. Да, я понимаю, что есть медиазапросы. Но что, если у нас, к примеру, есть навигация, в которую на ширине <=500px должны добавляться доп. пункты, а на ширине больше 500px эти доп. пункты должны убираться, и это надо делать с помощью JavaScript.
Проблема в том, что определение ширины в JS не всегда совпадает с определением ширины в CSS-медиазапросах, к примеру, в JS мы достигаем 500px, а в CSS до этой ширины ещё 1-2 пикселя, и следовательно все эти манипуляции с навигацией будут немножко (что уже критично) опережать остальную адаптивность, которая делается (и должна делаться вместе с адаптивностью навигации) с помощью CSS.
Поэтому тут выручает класс-префикс js-, который гарантирует, что, когда он появляется, то делается адаптивность в одно время.
Например, вот так вот:
.participation margin: 20px 0 30px .js-adaptive & // - вот этот класс вешается на body при <=500px margin: 10px 0 20px
Что скажете?
Хочу добавить стилизацию checkbox и задумалась о корректности Вариант без стилизации
<div class="checkbox-inner">
<input class="checkbox__control" type="checkbox" id="test">
<label class="label__control" for="test"></label>
</div>
Стилизация внешнего вида
Вариант стилизации 1
модификатор .checkbox-inner_theme-info
<div class="checkbox-inner checkbox-inner_theme-info">
<input class="checkbox__control" type="checkbox" id="test">
<label class="label__control" for="test"></label>
</div>
Вариант стилизации 2
модификатор .checkbox-inner_theme-info
модификатор .checkboxcontrol_theme-info
модификатор .labelcontrol_theme-info
<div class="checkbox-inner checkbox-inner_theme-info">
<input class="checkbox__control checkbox__control_theme-info" type="checkbox" id="test">
<label class="label__control label__control_theme-info" for="test"></label>
</div>
Какой из вариантов предпочтительнее?
Заранее благодарна на помощь!
есть у нас блок faq
который вложен в элемент списка faq__list-item
faq__list-item вложен в faq__list, faq__list вложен в body
допустимо ли это согласно концепции БЕМА?
Разместил конфиг борщика в корне, чтобы кодировать все изображения, кроме SVG в base64.
Если **/*.blocks/**, то кодирует все изображения.
Но мне нужно, чтобы кодировалось все, кроме svg. Условие **/*.blocks/**/!(*.svg) не работает :(
Что я не так делаю?
Конфиг:
{
"freeze_paths": {
"img/**": "img",
"**/*.blocks/**/fonts/**" : "fonts",
"**/*.blocks/**": ":encodeURIComponent:",
"**/*.blocks/**/!(*.svg)": ":base64:"
}
}
Добрый день.
Ситуация следующая:
На форму через сокетное соединение приходит json с данными. Я преобразую его в массив и смотрю что за данные ко мне пришли. Затем в зависимости от того, что пришло идет вызов тех или иных функций. Например в данном случае, я формирую модальное окно и заполняю его данными в функции NewProcessForm(answer['data']), а затем вызываю его с помощью команды modal('show’). Модальное окно я вызываю с помощью фреймворка Bootstrap, а формирую я его согласно БЭМ.
Объясните, пожалуйста, почему вызов модального окна срабатывает только если установлен таймаут.
.ws.onmessage = function(e) {
answer = JSON.parse(e.data);
if (answer["action_name"] == "NewProcessForm") {
NewProcessForm(answer["data"]);
setTimeout(function () {
$('#place_modal_form').modal('show');
}, 1000);
}
}
function NewProcessForm(json_data){
var jdata = JSON.parse(json_data);
modules.require(['BEMHTML', 'i-bem-dom'], (BEMHTML, bemDom) => {
bemDom.append(bemDom.doc.find('#place_modal_form'), BEMHTML.apply({
tag: 'div',
cls: 'modal-dialog l-new-process',
content: [
{
tag: 'div',
cls: 'modal-content',
attrs: { 'data-form-name': 'new' },
content: [
{
tag: 'div',
cls: 'modal-body',
content: [
{
tag: 'div',
cls: 'panel panel-primary',
content: [
{
tag: 'div',
cls: 'panel-heading',
content: [
{
tag: 'button',
cls: 'close',
attrs: { type: 'button', 'data-dismiss': 'modal', 'aria-hidden': 'true' },
content: 'x'
},
{
tag: 'h3',
cls: 'panel-title modal-title',
content: 'Новая задача'
}
]
},
{
tag: 'div',
cls: 'panel-body',
content: []
},
{
tag: 'div',
cls: 'panel-footer',
content: [
{
block: 'c-button-submit',
js: true,
tag: 'button',
cls: 'btn btn-primary',
attrs: { type: 'button' },
content: [
{
elem: 'glyphicon',
tag: 'span',
cls: 'glyphicon glyphicon-ok'
},
{
elem: 'text',
tag: 'span',
content: 'Создать'
}
]
}
]
}
]
}
]
}
]
}
]
}));
});
}
У нас в проекте используются merged-бандлы.
common + specifix-page
Словили баг с отваливающимся инитом. Я нашёл проблему в i-bem__dom_init_auto, отключил его на уровне проекта и написал свою обёртку для старта (по загрузке всех скриптов).
Первая версия стартера (не работающая как планировалось).
modules.require(
['i-bem__dom_init', 'jquery', 'next-tick'],
function(init, $, nextTick) {
let scripts = $('script')
total = scripts.length,
loaded = 0;
function magicPendel() {
$(function() {
nextTick(init);
});
}
window.pinok = magicPendel;
scripts
.on('load', () => {
++loaded;
if (total === loaded) {
magicPendel();
}
})
.load();
});
Странно, ничего не работало, хоть и вызывалось после загрузки скриптов. Дёргаю ручку pinok в консоли, а страница мёртвая.
Делаю modules.require('i-bem__dom_init', init => init());, всё оживает. Понимаю, что где-то замыкание, но что-то не въехал откуда оно происходит (в попытках отследить через дебаггер уже начал путаться).
Рабочий стартер (но скорее всего буду дорабатывать)
modules.require(
['jquery', 'next-tick'],
function($, nextTick) {
let scripts = $('script')
total = scripts.length,
loaded = 0;
function magicPendel() {
$(function() {
modules.require('i-bem__dom_init', (init) => nextTick(init));
});
}
scripts
.on('load', () => {
++loaded;
if (total === loaded) {
magicPendel();
}
})
.load();
});
Читаю документацию по шаблонизатору, застопорился на первом примере.
Пример. Подпредикат блока link:
block('link')
Входные данные:
[
// на этот блок предикат вернет `true` и шаблон будет применён
{ block: 'link' },
// на все следующие сущности предикат вернет `false` и шаблон не будет применён
{ block: 'para' },
'link',
{ block: 'link', elem: 'text' }
]
Конкретного описания к подпридекату block не добавлено, но выше говорится:
Для каждого узла входного дерева шаблонизатор проверяет условия, указанные в шаблонах. Эти условия называются подпредикатами и составляют предикат шаблона. Условия могут быть простыми — проверка имени блока/элемента или более сложными и составными — проверка значений произвольных полей в текущем узле BEMJSON.
Исходя из этого и комментариев в примере я понял, что в выводе должен быть только блок link, но этого не происходит ни в одной из версий шаблонизатора, предложенных в песочнице.
Вопрос: где я ошибся?
<form class="form form_flowers">
<div class="form__group">
<div class="label-group">
<label class="label-group__label" for="test">Текст</label>
</div>
<div class="input-group">
<input class="input-group__input" type="text" id="test">
<span class="input-group__addon">
@
</span>
</div>
</div>
</form>
Создаю шаблон, чтобы использовать для создания формы с полями:
Сорри, если что не так, не разобралась как у вас тут код как-то без отступов выводится(
Доброе утро. Подскажите, пожалуйста, в случае использования БЭМ в качестве методологии именно для именования классов в своем проекте(без использования bemjs и прочего) является ли обязательным наличие класса у элемента блока, если у данного узла попросту нет никаких стилей? То есть что-то вроде
<div class="block">
<div>
<span class="block__elem"></span>
<div class="block__elem"></div>
</div>
</div>
День добрый!
В конфиге есть вот такая строчка
[techs.borschik, { sourceTarget: '?.css', destTarget: '_?.css', tech: 'cleancss', minify: false }],
Интересуют поля tech: 'cleancss' и minify: false/true
Логично предположить, что для минификации используется cleancss. Но как он подтягивается? Можно ли его тонко настроить? Хотелось бы научиться отключать некоторые опции минификации (как, например, опция mergeLonghand в cssnano)
Версия bem-core 3.0.1. Полный стек.
Добрый. Есть замечательный пример https://github.com/bem/project-stub/blob/master/gulpfile.js Но непонятно как организовать watcher и livereload при такой сборке.. когда все одним таском, мне же не нужно собирать js, если я, к примеру, изменил что-то в less файле...