В рейтинге участвует:

групп:

каналов:

Виртуальный сервер на SSD - недорого!

Аренда выделенных и виртуальных серверов (VDS/VPS), хостинг, аренда IP-адресов, администрирование, круглосуточная поддержка

qwarta.ru подробнее

Резервное копирование с проверкой на вирусы!!!

Удобный сервис создания резервных копий на любой сервер сети интернет. Отслеживайте изменения, проверяйте на вирусы. Надежно защитите свой бизнес!

go.backupland.com

Выбираете сервер? Любая конфигурация на заказ!

Аренда физических серверов любых конфигураций под любые запросы - 1С бухгалтерия, игровые сервера, нагруженные проекты, интернет-магазины!

qwarta.ru подробнее

Size: a a a

БЭМ

826 membersпожаловаться на группу
2019 August 29

О

Олег in БЭМ
Artyom Philippov
Привет. Юзаю BEM в очень простом варианте (только нейминг классов).
Хотелось бы найти общий туториал в котором будет рассказано как происходит разбивка по платформам, как ризбиваются сложные компоненты (см. пример ниже), по связки реакта с бемом (с примерами), что по поводу white papper.

Пример сложной комопненты:

<div class="product">
    <div class="product__comments-list">
             <div class="product__comment">
                       <div class="product__comment-author">...</div>
                       ...
                        <div class="product__comment-answer>
                                 <div class="product__comment-answer-author">...</div>
                       </div>
             </div>
    </div>
</div>

Я знаю что есть туториал на сайте BEM. Но может туториал по-лучше или в виде видео.
У тебя слишком много элементов. Не бойся юзать блоки. Например <div class="product__comments-list comments-list">. А по туториалам есть еще записи видеокурсов от яндекс и на хабре есть статьи интересные
источник
17:30пожаловаться#1

MK

Mikhail Koloskov in БЭМ
Artyom Philippov
Привет. Юзаю BEM в очень простом варианте (только нейминг классов).
Хотелось бы найти общий туториал в котором будет рассказано как происходит разбивка по платформам, как ризбиваются сложные компоненты (см. пример ниже), по связки реакта с бемом (с примерами), что по поводу white papper.

Пример сложной комопненты:

<div class="product">
    <div class="product__comments-list">
             <div class="product__comment">
                       <div class="product__comment-author">...</div>
                       ...
                        <div class="product__comment-answer>
                                 <div class="product__comment-answer-author">...</div>
                       </div>
             </div>
    </div>
</div>

Я знаю что есть туториал на сайте BEM. Но может туториал по-лучше или в виде видео.
Сущности из whitepaper помогают получать значительную часть визуала путём миксования их на смысловые сущности.

Если говорить очень верхнеуровнего, то процесс происходить следующим образом:
1. Описывается смысловая структура блока (history, product, user, ...);
2. Внутрь закидываются блоки из Контентного уровня (.text, badge, icon, logo, ...);
3. На узлы смысловой структуры накидываются блоки и элементы Паттернов (pt-list, pt-form, pt-card, ...)
4. В CSS смыслового блока по необходимости дописываются недостающие уникальные стили)
5. После этого блок встраивается в Каркас (tpl-layout, tpl-grid)
6. Отрисовывается в какой-либо Теме (theme_color_whitepaper-default ...) намиксованной на него или на любой родительский блок.
источник
22:31пожаловаться#2

MK

Mikhail Koloskov in БЭМ
Дальше можно подкручивать комбинации модификаторов и рулить отображением.
источник
22:32пожаловаться#3

MK

Mikhail Koloskov in БЭМ
Для более глобальной настройки, можно изменить значения всех сущностей в Теме.
источник
22:33пожаловаться#4

MK

Mikhail Koloskov in БЭМ
Если блоки используют переменные из whitepaper, их можно передавать в проекты с другой Темой и они примут тот визуал. Или же наоборот передавать Тему и блоки другого проекта отрисуются в ней.
источник
22:36пожаловаться#5

MK

Mikhail Koloskov in БЭМ
Часто повторяющиеся визуальные закономерности в плане структуры блоков, можно упаковывать в новые Паттерны на своём уровне, стандартизируя таким образом принципы визуализации.

Или же просто расширять линейку уже имеющихся конструкций для большей выразительности.
источник
22:42пожаловаться#6
2019 September 03

И

Ильдар in БЭМ
Здравсивуйте, подскажите как примиксованный блок слушает события Input из своих методов класса если микс на элмент а не на сам инпут?
источник
09:48пожаловаться#7

И

Ильдар in БЭМ
В ibem js реализация блока manager-parts-filtration-logic имеетвозможность отслеживать this._events(Input).on('change', this.prototype._onInputChange);
источник
09:49пожаловаться#8

SB

Sergey Berezhnoy in БЭМ
Ильдар
Здравсивуйте, подскажите как примиксованный блок слушает события Input из своих методов класса если микс на элмент а не на сам инпут?
уже обсуждали тут выше такой пример — берём класс элемента и подписываемся в классе блока
источник
10:02пожаловаться#9

И

Ильдар in БЭМ
Sergey Berezhnoy
уже обсуждали тут выше такой пример — берём класс элемента и подписываемся в классе блока
работает так, сам не понял что спросил, спс
источник
10:30пожаловаться#10
2019 September 04

А

Алексей in БЭМ
Приветы, а может есть у кого конфиг для bem 🤙 create под реакт подход ?
источник
09:38пожаловаться#11

А

Алексей in БЭМ
И шаблоны под модификаторы и тд
источник
09:39пожаловаться#12

DK

Dmitriy Khraponov in БЭМ
источник
10:05пожаловаться#13

DK

Dmitriy Khraponov in БЭМ
источник
10:05пожаловаться#14

DK

Dmitriy Khraponov in БЭМ
тут бы вёрстку зафиксить
источник
10:06пожаловаться#15
2019 September 05

Р

Роман in БЭМ
А как в bem-react передать пропсом атрибут href в Button_type_link: https://www.npmjs.com/package/@bem-react/core ?
npm
npm: @bem-react/core
BEM React Core
источник
22:13пожаловаться#16

Р

Роман in БЭМ
Сделал всё по доке, ссылка всё равно без атрибута href
источник
22:14пожаловаться#17
2019 September 06

Р

Роман in БЭМ
Роман
Сделал всё по доке, ссылка всё равно без атрибута href
Если добавить пропс в Button/Button.tsx, то всё работает, но это как-то 🤮 — ничего общего с принципом доопределения, который ожидается в Button/_type/Button_type_link.tsx.
источник
09:58пожаловаться#18

Р

Роман in БЭМ
Т. е. тег мы там переопределить можем, а вот добавить атрибут — нет.
источник
09:59пожаловаться#19

AY

Alexey Yarrr (qfox) in БЭМ
Роман
Если добавить пропс в Button/Button.tsx, то всё работает, но это как-то 🤮 — ничего общего с принципом доопределения, который ожидается в Button/_type/Button_type_link.tsx.
У тебя точно не с тайпингами проблема?
Если добавить в интерфейс кнопки — тоже невидно?
источник
10:05пожаловаться#20