Телеграмм чат группы bem_ru страница 1604

parrot.ru

Рейтинг популярных групп и каналов

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

групп:

каналов:

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

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

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

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

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

go.backupland.com

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

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

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

Size: a a a

БЭМ

950 membersпожаловаться на группу

2021 January 02

ВС

Вадим Стрелов... in БЭМ

Сергей Артёмов

Да, само собой. Но я это из своего опыта. Если когда-то мне не хватает двух слов для названия блока, скорее всего надо пристальнее посмотреть на этот блок. Либо просто лишние слова убрать, либо дело в структуре, неверное понимание которой обязательно выстрелить в ногу позже.

image_2021-01-02_18-39-51.png

Не, стараюсь делать более структурный логичный css, не прибегая к излишней многословности. Думаю, подобный способ оптимальный.
(Взглянул на семантику, понял что правильно сделал)

источник

18:39пожаловаться #1

2021 January 03

И

Ильдар in БЭМ

Вадим Стрелов

image_2021-01-02_18-39-51.png

Не, стараюсь делать более структурный логичный css, не прибегая к излишней многословности. Думаю, подобный способ оптимальный.
(Взглянул на семантику, понял что правильно сделал)

У вас там имхо нагородежено: footer - wrap - footer-block

Зачем нужен wrap?

Может можно footer - footer__inner - footer__item

источник

10:55пожаловаться #2

И

Ильдар in БЭМ

wrap можно миксом к inner если очень нужно

источник

10:56пожаловаться #3

ВС

Вадим Стрелов... in БЭМ

У вас там имхо нагородежено: footer - wrap - footer-block

Зачем нужен wrap?

Может можно footer - footer__inner - footer__item

wrap оборачивает содержимое и выравнивает контент по центру.
Не совсем понимаю выстраивание дерева с описанием "inner", но как уже было замечено выше - это дело личных предпочтений.

источник

18:16пожаловаться #4

И

Ильдар in БЭМ

Вадим Стрелов

wrap оборачивает содержимое и выравнивает контент по центру.
Не совсем понимаю выстраивание дерева с описанием "inner", но как уже было замечено выше - это дело личных предпочтений.

Считаю не правильным использовать wrap в качестве самостоятельного блока для этих целей. Логичнее чтобы footer сам занимался позициионированием внутри себя. Либо допускаю использования микса к элементу футера добавляющего функционал позиционирования

источник

18:24пожаловаться #5

2021 January 04

ВС

Вадим Стрелов... in БЭМ

Считаю не правильным использовать wrap в качестве самостоятельного блока для этих целей. Логичнее чтобы footer сам занимался позициионированием внутри себя. Либо допускаю использования микса к элементу футера добавляющего функционал позиционирования

Солидарен с этим, обратил на это внимание еще до того как прочел ваше сообщение. Правда я выбрал для себя второй вариант.

источник

00:17пожаловаться #6

Р

Роман in БЭМ

Про обёртки: https://ru.bem.info/forum/656/

источник

21:59пожаловаться #7

2021 January 18

Р

Роман in БЭМ

В https://github.com/bem/yandex-ui/blob/master/src/Textinput/Textinput.tsx намеренно элемент <Box /> бесполезен или это всё же очепятка и должно быть

return (
  <span>
    <Box>
      {addonBefore}
      {iconLeft && <Icon side="left" component={iconLeft} />}
      {iconRight && <Icon side="right" component={iconRight} />}
      <Control
        {...props}
        aria-invalid={state === 'error'}
        disabled={disabled}
        aria-describedby={hint ? hintId : undefined}
      />
      {addonAfter}
    </Box>
    {hint && (
      <Hint leave={hintLeave} onAnimationEnd={onAnimationEnd} id={hintId}>
        {hint}
      </Hint>
    )}
  </span>
);

?

bem/yandex-ui

Yandex UI Kit build on React and bem-react. Contribute to bem/yandex-ui development by creating an account on GitHub.

источник

10:33пожаловаться #8

Р

Роман in БЭМ

В https://github.com/bem/yandex-ui/blob/master/src/Textinput/Textinput.tsx намеренно элемент <Box /> бесполезен или это всё же очепятка и должно быть

return (
  <span>
    <Box>
      {addonBefore}
      {iconLeft && <Icon side="left" component={iconLeft} />}
      {iconRight && <Icon side="right" component={iconRight} />}
      <Control
        {...props}
        aria-invalid={state === 'error'}
        disabled={disabled}
        aria-describedby={hint ? hintId : undefined}
      />
      {addonAfter}
    </Box>
    {hint && (
      <Hint leave={hintLeave} onAnimationEnd={onAnimationEnd} id={hintId}>
        {hint}
      </Hint>
    )}
  </span>
);

?

bem/yandex-ui

Yandex UI Kit build on React and bem-react. Contribute to bem/yandex-ui development by creating an account on GitHub.

Есть какой-то правильный способ переопределить порядок и вложенность?

Это делается с помощью render-override или @bem-react/di?

источник

12:14пожаловаться #9

PН

Prikolist Начрэл... in БЭМ

В https://github.com/bem/yandex-ui/blob/master/src/Textinput/Textinput.tsx намеренно элемент <Box /> бесполезен или это всё же очепятка и должно быть

return (
  <span>
    <Box>
      {addonBefore}
      {iconLeft && <Icon side="left" component={iconLeft} />}
      {iconRight && <Icon side="right" component={iconRight} />}
      <Control
        {...props}
        aria-invalid={state === 'error'}
        disabled={disabled}
        aria-describedby={hint ? hintId : undefined}
      />
      {addonAfter}
    </Box>
    {hint && (
      <Hint leave={hintLeave} onAnimationEnd={onAnimationEnd} id={hintId}>
        {hint}
      </Hint>
    )}
  </span>
);

?

bem/yandex-ui

Yandex UI Kit build on React and bem-react. Contribute to bem/yandex-ui development by creating an account on GitHub.

Не бесполезен. Это обводка и фон, а контрол полностью прозрачный (кроме текста). Исследуй в браузере.

источник

13:05пожаловаться #10

Р

Роман in БЭМ

Понял, спасибо. Тем не менее, можно ли «исправить» текущую вёрстку (нужна нормальная обёртка, которая отделит <Hint /> от <Control /> с addonLeft / addonRight) с минимумом дублирования?

источник

13:10пожаловаться #11

Р

Роман in БЭМ

Да и <label> не хватает

источник

13:11пожаловаться #12

PН

Prikolist Начрэл... in БЭМ

Буду следить за вопросом. Я в своей версии поместил это в контейнер как раз для такого случая изоляции

источник

13:11пожаловаться #13

Р

Роман in БЭМ

Как же всё было хорошо с переопределением до Реакта…

источник

15:51пожаловаться #14

DK

Dilshod Khamalov in БЭМ

помогите п,ж в бровзуре почемуто поставляется body display:none; ползуюс git, ом и gulp, ом

источник

16:05пожаловаться #15

RY

Roman Yaremenko in БЭМ

ну у тебя кажется дислпей нон инлайновые стили
удали в хтмл с боди style

источник

16:24пожаловаться #16

PН

Prikolist Начрэл... in БЭМ

Как же всё было хорошо с переопределением до Реакта…

Дело в том, что ты хочешь модифицировать базовый элемент в месте, для которого расширение не предусмотрено. А если ты захочешь его вообще переопределить, у тебя по твойму должна быть и такая возможность?

Нет, я думаю что не должно быть. Потому что это самостоятельная кодовая единица. Инкапсуляция говорит нам о том, что мы не должны вмешиваться в то как внутренне устроен объект.

Если же тебе нужно кардинально изменить самый базовый компонент - сделай свой бандл этого компонента.

Копируй его код, измени как нужно, соблюдая интерфейс и собери с нужными модификациями.

Если вдруг окажется что нужно изменить интерфейс и это несовместимые с оригинальным интерфейсом изменения, значит нужно создать новый компонент

источник

17:22пожаловаться #17

PН

Prikolist Начрэл... in БЭМ

Prikolist Начрэл

Дело в том, что ты хочешь модифицировать базовый элемент в месте, для которого расширение не предусмотрено. А если ты захочешь его вообще переопределить, у тебя по твойму должна быть и такая возможность?

Нет, я думаю что не должно быть. Потому что это самостоятельная кодовая единица. Инкапсуляция говорит нам о том, что мы не должны вмешиваться в то как внутренне устроен объект.

Если же тебе нужно кардинально изменить самый базовый компонент - сделай свой бандл этого компонента.

Копируй его код, измени как нужно, соблюдая интерфейс и собери с нужными модификациями.

Если вдруг окажется что нужно изменить интерфейс и это несовместимые с оригинальным интерфейсом изменения, значит нужно создать новый компонент

В случае с реакт компонентом, скорее всего можно просто расширить класс переопределив рендер метод

источник

17:23пожаловаться #18

yW

yarastqt World in БЭМ

Насчет переопределение всего что-захочется есть обратная сторона медали:
Такой компонент становится сложно поддерживать, т.к. есть какая-то часть internal интерфейса компонента, которая никак не доступна снаружи и мы можем менять её без изменения внешнего API. Мы уже проходили такое, когда у пользователя есть возможно что-то поменять внутри, то при апдейте библиотеки мы всегда ловили кучу проблем с тем, что кто-то завязался на это

источник

18:11пожаловаться #19

yW

yarastqt World in БЭМ

Тут так же стоит отметить, что сложно сделать компонент, который бы подошел всем в 100% случаев. Поэтому сейчас мы стараемся разделять компонент на две части — семантическое поведение компонента и его представление. По сути у нас есть хук, который реализует всю логику компонента, допустим useInput, который возвращает все обработчики/aria-атрибуты для данного компонента и есть простая верстка, которая вызывает этот хук и прокидывает его на нужные дом-узлы. Это позволяет пользователям, которым не подходит наш компонент по API использовать хук и написать только свою верстку для этого сценария

источник

18:13пожаловаться #20