Size: a a a

2020 July 30

Prikolist Начрэл... in БЭМ
yarastqt World
Хм, мы пошли чуть дальше, у нас для каждого компонента свой токен, который в свою очередь использует цвет-примитив

В итоге у нас такая структура:

menu:
 viewDefault:
   fillColor:
     base:
       value: "#fff"
     hovered:
       value: "#ccc"
 
   typoColor:
     base:
       value: "#000"
     hovered:
       value: "#222"
Я посмотрел токены меню в yandex-ui, не нашел там цвета. Где лежит подобная структура?
источник

yW

yarastqt World in БЭМ
хм, там пока что старая версия токенов 🙁
источник

yW

yarastqt World in БЭМ
Чуть позже будет постоянно обновляться репозиторий, сейчас в ручном режиме
источник

Prikolist Начрэл... in БЭМ
yarastqt World
Хм, мы пошли чуть дальше, у нас для каждого компонента свой токен, который в свою очередь использует цвет-примитив

В итоге у нас такая структура:

menu:
 viewDefault:
   fillColor:
     base:
       value: "#fff"
     hovered:
       value: "#ccc"
 
   typoColor:
     base:
       value: "#000"
     hovered:
       value: "#222"
А такие токены лежат в директориях компонентов?
источник

yW

yarastqt World in БЭМ
Да, рядом с компонентом, там и сейчас кажется должно быть так
источник

yW

yarastqt World in БЭМ
просто нет токенов про цвет
источник

yW

yarastqt World in БЭМ
источник

Prikolist Начрэл... in БЭМ
yarastqt World
Хм, мы пошли чуть дальше, у нас для каждого компонента свой токен, который в свою очередь использует цвет-примитив

В итоге у нас такая структура:

menu:
 viewDefault:
   fillColor:
     base:
       value: "#fff"
     hovered:
       value: "#ccc"
 
   typoColor:
     base:
       value: "#000"
     hovered:
       value: "#222"
Выглядит удобно. А как вы пробрасываете цвет inline иконок, если были такие случаи?

Например есть кнопка и нужно что бы иконка в ней была цвета текста.

Я использовал css var хуки. У кнопки есть --color, который потом читают дети и используют в fill.

Сейчас попробовал темизацию и теперь просто в кнопке задаю color и fill. Можно устанавливать fill в вспомогательном классе типо .Button-Icon.

Впринципе норм, но возможно будет не так удобно переопределять цвет при наследовании. Мб есть ещё подходы
источник

yW

yarastqt World in БЭМ
Обычно в иконке задаем currentColor и все
источник

Prikolist Начрэл... in БЭМ
yarastqt World
Обычно в иконке задаем currentColor и все
В js? А откуда узнаёте цвета?
источник

Р

Роман in БЭМ
Prikolist Начрэл
В js? А откуда узнаёте цвета?
Не, это CSS-свойство. currentColor  равен текущему цвету текста, т. е. можно сделать background-color или fill: currentColor
источник

Prikolist Начрэл... in БЭМ
Роман
Не, это CSS-свойство. currentColor  равен текущему цвету текста, т. е. можно сделать background-color или fill: currentColor
А откуда узнаете текущий цвет текста? Имеется в виду css хук? Кнопка задаёт это свойство, а иконка использует, так?
источник

Р

Роман in БЭМ
Оно всегда известно, это внутренний «механизм» самого CSS — чем бы не назначался color текста, currentColor всегда будет каскадно ему равен. Своего рода алиас.
источник

Prikolist Начрэл... in БЭМ
О, это очень круто, не знал о такой фиче, спасибо
источник
2020 July 31

ЮГ

Юра Гвоздев... in БЭМ
Привет всем. Можете оценить мою верстку и конструктивно покритиковать?
Макет: https://www.figma.com/file/HPF7GIZRUUElAKn5MLpoly/Uber-Eats?node-id=0%3A1
Верстка:
https://alexxxpetrov.github.io/Uber-Eats/
https://alexxxpetrov.github.io/Uber-Eats2/
источник

yW

yarastqt World in БЭМ
* Лишний h1
* Элемент word очень странное название
* select/searc/button можно не делать частью шапки, выглядят как общие компоненты и могут быть использованы в дрругих местах
* Кнопка basked имеет маленькие размеры, трудно тыкнуть (нужно область нажатия делать такую же как и у остальных кнопок)
источник

yW

yarastqt World in БЭМ
Вот тут очень странно
* h2 не стоит делать элементом, т.к. он может быть переиспользован
* не поонятно откуда взялся элемент restaurants__cards (нет блока restaurants)
* не понятно откуда взялись элементы card__* (нет блока card)
* Элемент restaurants__image выглядит странно в текущей верстке
источник

KA

Krishnaprasad AU in БЭМ
ah and how get a chat?
источник

VH

Vitaly Harisov in БЭМ
Krishnaprasad AU
ah and how get a chat?
источник
2020 August 01

ЮГ

Юра Гвоздев... in БЭМ
yarastqt World
* Лишний h1
* Элемент word очень странное название
* select/searc/button можно не делать частью шапки, выглядят как общие компоненты и могут быть использованы в дрругих местах
* Кнопка basked имеет маленькие размеры, трудно тыкнуть (нужно область нажатия делать такую же как и у остальных кнопок)
разве для seo не нужно чтобы на странице был тег h1?
источник