Форум

Архив

Где-то видел пример линтинга, подключаемого в .enb/make.js, не могу найти. Ткните, пожалуйста?

Интересует пример предварительной статической проекта проверки перед сборкой (js, bemhtml, возможно, styl/css).

Миграция: альтернативы старым решениям (.bem(), .elemify())bem-components bem-core

Начал перетаскивать проект на новые версии bem-components, bem-core. После банальных переименований методов упёрся в непонятное:

Что использовать вместо:

elem = block.elemify(domNode, 'elem')
~~block = domNode.bem('block')~~ (найдено; но, блин... знаете...)

(Также предстоит ещё разбираться с кучей мест, где используется старый menu-item вместо menu__item. Наверное, что-то ещё вылезет; приду сюда плакать обратно.)

Прокинуть идентификатор в popup (dropdown) вместо uniq*bem-components bemjson шаблоны (BEMHTML BEMTREE)

Не нашёл способ передать собственный идентификатор в компонент 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?), чтобы переопределять нужные методы/свойства? Как правильно?

Миксы при большой вложенности

Добрый вечер. Такой вопрос, имеется большой блок, скажем, это "block". У поста много всякого и вот есть такой элемент, как лайки и дислайки. Структура упрощенно такая

<div class="block">
.....
<div class="block__rating rating rating_type_like">
    <i class="rating__icon"></i>
    Лайк
    <span class="rating__count rating__count_type_like"></span>
</div>
<div class="block__rate rating rating_type_dislike">
    <i class="rating__icon"></i>
    Дислайк
    <span class="rating__count rating__count_type_dislike"></span>
</div>
.......
</div>

Вот такое я наваял.
Как я все понимаю - block__rating - собственно показывает, что это элемент блока. Сюда же ввел новый блок - rating, чтобы от него уже получить элементы иконки рейтинга и счетчик.
Изначально у меня все было элементами block, то есть block__icon и block__count, к примеру, но это даже чисто с точки зрения логики как-то неправильно.
Мой вопрос, все ли верно у меня получилось по bem или где-то структурно я не прав?

Инлайн стили по БЭМ шаблоны (BEMHTML BEMTREE)

Всем привет!

У меня наверное дурная мысль!

Как заинлайнить стили в хтмл применяя стэк БЭМ?

Обоснование данной задачи:
Поисковые системы рекомендуют инлайнить стили для рендера верхней части страницы. Для увеличения скорости отображения видимой части страницы клиенту.

Js функционал для блока сгенерированного BEMHTML

Добрый день!
Как добавить 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);

Акция «Сдай друга и получи 100к»jobs

Привет!

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

В благодарность за удачную рекомендацию мы выплатим вам 100 тысяч рублей.
Сдать друга можно здесь: https://yandex.ru/jobs/recommend/about_frontdev_msk

Адаптивный дизайн methodology

Приветствую,

Используем React, а BEM как CSS методологию.

Есть следующая проблема связанная с адаптивным дизайном.

Допустим есть сущность, которая имеет следующие состояния (модификаторы) small, medium и large.

Бывает так, что на всех разрешениях он имеет одно состояние (к примеру, small), но и так, что на одном разрешении одно, а на другом еще какое-нибудь (к примеру, small по умолчанию, а medium на разрешении > 1280px)

У меня пока два способа решения этой проблемы:

по подобию адаптивных CSS фреймворков - использовать постпрефиксы, например, -xs, -md, -lg. Получается, что если мне нужно, чтобы на разрешении > 1280px сущность имела состояние medium, я задаю ему medium-lg. То есть такая некая надстройка у состояния. Также есть мысли использовать вместо - символ @ (как обозначение, что это именно media query), то есть medium@lg;
использовать JS - через window.mathMedia рендерить нужное состояние. Именно всю страницу рендерить с нужными состояниями с учетом разрешения, а не конкретно компонент.

Спасибо.

переключение цветовых тем methodology

Доброго дня!

Если необходимо сделать переключение цветовых тем на сайте, получается возможен вариант только с наследованием как и без бэм именования? Т.е. задаем body class="theme_blue", и пишем отдельный css в котором все элементы имет родителем body.theme_blue, или с бэм именованием есть другие решения?

Митап по БЭМ в Москве: 30 июня, 19:00 BEMup news

30 июня в московском офисе Яндекса пройдет очередная встреча БЭМ-сообщества.

В этот раз мы решили последовать общему реактовому тренду и ответить на ваши вопросы про разработку на БЭМ и React. Мы расскажем про нашу библиотеку bem-react-core и про всё, что успели сделать в этом направлении, ответим на ваши вопросы про React/БЭМ и не только.

По традиции на БЭМапе мы ответим на все вопросы, которые вы зададите в комментариях к этому анонсу.

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

Stay BEMed!

Как можно быть уверенным, что применятся именно стили модификатора?methodology

Мне никак не дает покоя 1 вопрос. Если мы вот так опишим блок и модификатор для блока:

.button { color: red; }

.button_color_blue { color: blue }

Затем в HTML укажем class="button button_color_blue". .

Таками образом кнопка станет синей только потому, что стили модификатора в CSS идут после стилей самого блока.
Скажите, возможны ли варианты, когда возможно нарушение порядка следования в CSS? Например после обработки минификаторами. Или например препроцессор SASS вдруг конструкцию .block { &--modificator {} } начнет разворацивать в обратном порядке, и напишет в CSS .block--modificator, а уже потом сам .block
Ведь как я понимаю тогда все сломается и кнопка будет красной, несмотря на то, что класс модификатора на теге есть.
Как можно быть спокойным за все это?

Заранее спасибо.

сборка *.node.js gulp ом gulp-bem project-stub

как настроить сборку ?.node.js файдла галпом

webpack для БЭМ?webpack

Есть ли примеры использования webpack для БЭМ?

Не работает пример из документации docs шаблоны (BEMHTML BEMTREE)

Читаю документацию по шаблонизатору, застопорился на первом примере.

Пример. Подпредикат блока link:

block('link')

Входные данные:

[
    // на этот блок предикат вернет `true` и шаблон будет применён
    { block: 'link' },

    // на все следующие сущности предикат вернет `false` и шаблон не будет применён
    { block: 'para' },
    'link',
    { block: 'link', elem: 'text' }
]

Конкретного описания к подпридекату block не добавлено, но выше говорится:

Для каждого узла входного дерева шаблонизатор проверяет условия, указанные в шаблонах. Эти условия называются подпредикатами и составляют предикат шаблона.
Условия могут быть простыми — проверка имени блока/элемента или более сложными и составными — проверка значений произвольных полей в текущем узле BEMJSON.

Исходя из этого и комментариев в примере я понял, что в выводе должен быть только блок link, но этого не происходит ни в одной из версий шаблонизатора, предложенных в песочнице.

Вопрос: где я ошибся?

Дайджест новостей по БЭМ. Выпуск десятый.community digest news

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

Новости документации
Новости библиотек
Новости технологий
Новости инструментов
Новости БЭМ из мира React
Новости мероприятий и сообщества

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

Переработали FAQ: обновили старые вопросы и добавили новые.
Обновили документы в методологической части сайта.

Чего стоит ждать в ближайшем будущем:

Новый большой и полезный туториал по всему БЭМ-стеку.
Новые документы в разделе Методология.

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

bem-core

Выпустили bem-core 4.2.0. Обновление должно быть совершенно «бесплатным», так как новая версия полностью обратносовместимая.

Главным изменением является совместимость с bem-xjst 8.x.

Все изменения, вошедшие в релиз, описаны в CHANGELOG.

bem-core 4.2.0 уже внедрена в project-stub.

bem-components

Выпустили две версии v5.1.0 и v6.0.0.

v5.1.0

Версия v5.1.0 обратносовместимая. Обновление не должно потребовать дополнительных усилий.

Основные изменения:

обновлена зависимость от bem-core до 4.2.0;
добавлено визуальное оформление для link_disabled;
исправлены некоторые ошибки.

Подробности в CHANGELOG.

v6.0.0

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

Выпустили новую версию bem-history v4.0.0, анонсированную в прошлом выпуске дайджеста. Версия v4.0.0 полностью совместима с bem-core v4.

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

Подробное описание изменений в CHANGELOG.

bem-calendar

Опубликовали мини-библиотеку bem-calendar на основе bem-components.

bem-textarea-editor

Опубликовали библиотеку bem-textarea-editor с блоком editor, позволяющим писать текст на маркдауне с удобной панелью инструментов (примерно как на Github) и получать превью до отправки поста на сервер.

Посмотреть на работу блока в действии можно тут.

bem-font-awesome

Опубликовали библиотеку bem-font-awesome, которая позволяет использовать Font Awesome с использованием БЭМ-нотации и не тянуть лишние стили в проект.

Как установить и использовать библиотеку, читайте в README проекта или в посте на форуме.

bem-font-awesome-icons

Опубликовали альтернативный вариант библиотеки bem-font-awesome — bem-font-awesome-icons, где распилили шрифт на отдельные SVG-иконки, так что теперь на клиент приедет только то, что реально используется.

Подробности в документации и на форуме.

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

bem-express

Обновили версии библиотек bem-core 4.2.0 и bem-components 6.0.0.

project-stub

Обновили версии библиотек bem-core v4.2.0, bem-components v6.0.0 и другие зависимости.

bem-xjst

Выпустили следующие релизы v8.6.0 - v8.6.11.

Основные изменения:

Исправлена ошибка: переданные oninit() во время второй и последующих вызовов compile() не вызывались. Теперь это исправлено.
Исправлена ошибка, приводящая к утечке памяти.
Исправлена ошибка про некорректную работу this.reapply() и depth.
Исправлена ошибка с отсутствием i-bem при миксе элемента с js.
Исправлена ошибка с applyCtx.
Исправлена ошибка в теле шаблона функции и appendContent()/prependContent().
Исправлена ошибка при использовании match() без аргументов.
BEMTREE и BEMHTML: добавлена возможность подключения сторонних библиотек как глобально, так и для разных модульных систем с помощью опции requires.
Размер бандлов BEMHTML и BEMTREE уменьшен (–6%).
В теле функции-колбека match можно использовать apply() для вызова любого режима, относящегося к данному узлу.
Создан автомигратор, который умеет править код проектных шаблонов так, чтобы он начал соответствовать указанной мажорной версии.
Реализован статический линтер, который обеспечивает запуск статической проверки для ваших шаблонов и включает их (наравне с runtime-проверками) в ваш процесс разработки.
Подробности в CHANGELOG.

Полезный пост про миграцию проектных шаблонов.

gather-reverse-deps

Появился пакет gather-reverse-deps, позволяющий собирать обратные зависимости.

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

bem-naming

Выпустили пакеты 2.0.0-5 и 2.0.0-6.

Основные изменения:

Теперь, если не указан разделитель значения модификатора, он не наследуется от разделителя имени модификатора и возвращается к значению по умолчанию bemNaming.modValDelim.
Добавлено поле delims вместоelemDelim, modDelim иmodValDelim для соответствия функции bemNaming.

bem-tools-create

Выпустили bem-tools-create v2.1.0, в которой исправили ряд ошибок и добавили поддержку следующих опций:

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

borschik

Выпустили новую версию borschik v1.7.0, где хеш-функция, используемая при фризе статики, была вынесена в отдельный пакет borschik-hash.
Прекращена поддержка node 0.8.0

Подробности в CHANGELOG.

Обновили документацию.

Новости БЭМ из мира React

bem-react-core

Выпустили bem-react-core v0.4.2. В новой версии исправлен баг с потерей контекста для вложенных элементов и ряд других ошибок.

Основные изменения:

Рендер без CSS-класса (bem:false).
Поддержка cls, mix.
Доопределение статических полей defaultProps и propTypes.
Сокращенный синтаксис декларации модификаторов.
Поддержка HOC (redux, flux и других оберток).

Написали подробную документацию – REFERENCE.

Провели ряд мероприятий, посвященных bem-react-core:

Провели вебинар Немного БЭМ в вашем React.
Рассказали на митапе по БЭМ. Видео доклада Новости БЭМ из мира React.
Рассказали на React Moscow Meetup #2.

bem-react-components

Продолжаем активно развивать bem-react-components — библиотеку блоков для разработки с React по БЭМ-методологии.

create-bem-react-app

Продолжаем создавать реактовый проджект стаб create-bem-react-app, который позволяет одной командой собрать готовое React/БЭМ-приложение с установленными зависимостями и правильной файловой структурой.

Важный приятный пункт — create-bem-react-app не требует никаких предварительных настроек сборки.

webpack-bem-loader

Добавили генератор i18n, который обеспечивает возможность локализации компонентов.
Появилась возможность конфигурировать каждый уровень сборки отдельно с помощью bem-config.

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

Провели целую серию BEMup'ов:
- Продолжили проводить BEMup'ы для новичков — на этот раз встреча была для тех, кто уже имеет представление о базовых понятиях методологии. Опубликовали скринкаст. Видео с первого BEMup'а для новичков, для тех, кто пропустил начало.
- Рассказали про сборку БЭМ-проектов с enb и про все новости БЭМ из мира React на BEMup'е в Москве. Конечно, опубликовали видео.
- Провели Bemup в Екатеринбурге для разработчиков, использующих БЭМ в своих проектах и желающих больше узнать про БЭМ-технологии.
- Провели мастер-класс, на котором написали проект на основе project-stub. На живых примерах показали, для чего нужны технологии BEMJSON, BEMTREE, BEMHTML, DEPS, и как использовать их вместе. Опубликовали скринкаст.
Антон Виноградов провел вебинар «Немного БЭМ в вашем React», где рассказал, как начать использовать bem-react-core — декларативно описывать React-компоненты, гибко их доопределять и использовать уровни переопределения. Скринкаст.
Сергей Бережной рассказал, что нового в bem-react-core на React Moscow Meetup #2.
Владимир Гриненко выступил на United Dev Conf в Минске с докладом Dependencies in component web done right. Слайды к докладу в keynote.
Владимир Гриненко выступил на Web Development Conference.
Возродили канал bem.info на Youtube. Теперь все новые видео с докладами и вебинарами вы сможете находить тут. Подписывайтесь!

По данному запросу найдены посты в архиве:

Перейти в архив

Форум

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

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

bem-core

bem-components

v5.1.0

v6.0.0

bem-history

bem-calendar

bem-textarea-editor

bem-font-awesome

bem-font-awesome-icons

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

bem-express

project-stub

bem-xjst

gather-reverse-deps

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

bem-naming

bem-tools-create

borschik

Новости БЭМ из мира React

bem-react-core

bem-react-components

create-bem-react-app

webpack-bem-loader

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

Сортировка

Метки