Size: a a a

2020 February 03

АН

Авроамэриканец Начрэл in БЭМ
Eugeniy World
Тогда будет buttonColor-color-**
А эти рекомендации где-нибудь описаны, что бы можно было на них сослаться и другие разработчики всё быстро поняли?
источник

АН

Авроамэриканец Начрэл in БЭМ
Я о именовании свойств
источник

EW

Eugeniy World in БЭМ
Хм, думаю, что пока нигде, мы пока сами к этому только приходим
источник

АН

Авроамэриканец Начрэл in БЭМ
Eugeniy World
Тогда будет buttonColor-color-**
Вот это мне нравится
источник

EW

Eugeniy World in БЭМ
Хотя вот тут естть — https://whitepaper.tools/doc.html#/theme-color
источник

EW

Eugeniy World in БЭМ
мы как раз используем подход, описанный в этой дизайн-системе
источник

АН

Авроамэриканец Начрэл in БЭМ
Здесь говорится о глобальных переменных. Мой вопрос о автономных блоках, это, кажется, другой случай. О кнопке, которая инкапсулирует свойство с цветом и его можно использовать и переопределить только внутри кнопки. Вне кнопки свойство не существует.

Полистал пункты, не вижу примеров о button-color и buttonColor-color-**
Звучит это удачно и я буду использовать такой подход, но где ты взял эту идею? Из именования свойств в js?
источник

EW

Eugeniy World in БЭМ
Ну, мы не определяем локальные переменные только для компонента, у нас вся кастомизация происходит на уровне темы приложения/фичи, это позволяет гибко настраивать внешний вид контролов для всего приложения
источник

EW

Eugeniy World in БЭМ
Авроамэриканец Начрэл
Здесь говорится о глобальных переменных. Мой вопрос о автономных блоках, это, кажется, другой случай. О кнопке, которая инкапсулирует свойство с цветом и его можно использовать и переопределить только внутри кнопки. Вне кнопки свойство не существует.

Полистал пункты, не вижу примеров о button-color и buttonColor-color-**
Звучит это удачно и я буду использовать такой подход, но где ты взял эту идею? Из именования свойств в js?
Ну, основа взята из вайтпепер, дальше уже просто пришли к такому, что если нужна необходимость в более точечной кастмизации, добавляем название компонента
источник

АН

Авроамэриканец Начрэл in БЭМ
Eugeniy World
Ну, мы не определяем локальные переменные только для компонента, у нас вся кастомизация происходит на уровне темы приложения/фичи, это позволяет гибко настраивать внешний вид контролов для всего приложения
А популярно ли делать так:
- В блоке кнопки глобально определяю свойства в стиле --controlName-propertyName-value, что бы кнопка даже на чистой странице была самодостаточной и рабочей
- На уровне проекта переопределяю --controlName-propertyName-value: var(--color-button_theme_red-text)
источник

EW

Eugeniy World in БЭМ
Авроамэриканец Начрэл
А популярно ли делать так:
- В блоке кнопки глобально определяю свойства в стиле --controlName-propertyName-value, что бы кнопка даже на чистой странице была самодостаточной и рабочей
- На уровне проекта переопределяю --controlName-propertyName-value: var(--color-button_theme_red-text)
Но ведь так не будет работать, у тебя все, что идет ниже переопределяет все, что идет выше
источник

EW

Eugeniy World in БЭМ
т.е. обернув в какой-нибудь условный тем-провайдер, ты не сможешь переопределить кнопку
источник

АН

Авроамэриканец Начрэл in БЭМ
Eugeniy World
Но ведь так не будет работать, у тебя все, что идет ниже переопределяет все, что идет выше
Почему? Это же как раз причина по которой это будет работать.
Сначала подключаю библиотеку элементов, а потом подключаю стили проекта, которые переопределяют цвета и размеры конкретных блоков.

Не понял в чём здесь проблема. Объясни
источник

АН

Авроамэриканец Начрэл in БЭМ
Если ты предлагаешь использовать при определении кнопки глобальные переменные без префикса имени блока, например color-bg-brand, то кнопка не будет автономной, потому что такие переменные - зависимость
источник

EW

Eugeniy World in БЭМ
Возможно я не понимаю, как ты хочешь, но смотри:
.Theme {
 --color-a: '#fff'
}

.Button {
 --color-a: '#000'
}

<div className="Them">
 <button className="Button">Handlee</button>
</div>
источник

EW

Eugeniy World in БЭМ
У тебя в обоих случаях одна и та же переменная, но из провайдера темы ты не сможешь её переопределить
источник

АН

Авроамэриканец Начрэл in БЭМ
Eugeniy World
Возможно я не понимаю, как ты хочешь, но смотри:
.Theme {
 --color-a: '#fff'
}

.Button {
 --color-a: '#000'
}

<div className="Them">
 <button className="Button">Handlee</button>
</div>
В БЭМ документации вроде написано о том, что не должно быть зависимости от порядка объявления, точно не помню, но у меня пока что такая зависимость есть и я просто подключил бы файл темы после файла блоков и получилось бы что тема переопределяет кнопку.

А как ты предлагаешь?
источник

EW

Eugeniy World in БЭМ
Тут так не работает, это ведь не этап сборки, а уже рантайм и тут работает принцип каскада
источник

EW

Eugeniy World in БЭМ
т.е. то, что у тебя идет ниже по дереву переопределяет то, что идет выше
источник

EW

Eugeniy World in БЭМ
т.е. не важно в каком порядке это подключится
источник