АН
Тогда будет
buttonColor-color-**А эти рекомендации где-нибудь описаны, что бы можно было на них сослаться и другие разработчики всё быстро поняли?
Size: a a a
2020 February 03
АН
Я о именовании свойств
EW
Хм, думаю, что пока нигде, мы пока сами к этому только приходим
АН
Тогда будет
buttonColor-color-**Вот это мне нравится
EW
Хотя вот тут естть — https://whitepaper.tools/doc.html#/theme-color
EW
мы как раз используем подход, описанный в этой дизайн-системе
АН
Хотя вот тут естть — https://whitepaper.tools/doc.html#/theme-color
Здесь говорится о глобальных переменных. Мой вопрос о автономных блоках, это, кажется, другой случай. О кнопке, которая инкапсулирует свойство с цветом и его можно использовать и переопределить только внутри кнопки. Вне кнопки свойство не существует.
Полистал пункты, не вижу примеров о
Звучит это удачно и я буду использовать такой подход, но где ты взял эту идею? Из именования свойств в js?
Полистал пункты, не вижу примеров о
button-color и buttonColor-color-**Звучит это удачно и я буду использовать такой подход, но где ты взял эту идею? Из именования свойств в js?
EW
Ну, мы не определяем локальные переменные только для компонента, у нас вся кастомизация происходит на уровне темы приложения/фичи, это позволяет гибко настраивать внешний вид контролов для всего приложения
EW
Здесь говорится о глобальных переменных. Мой вопрос о автономных блоках, это, кажется, другой случай. О кнопке, которая инкапсулирует свойство с цветом и его можно использовать и переопределить только внутри кнопки. Вне кнопки свойство не существует.
Полистал пункты, не вижу примеров о
Звучит это удачно и я буду использовать такой подход, но где ты взял эту идею? Из именования свойств в js?
Полистал пункты, не вижу примеров о
button-color и buttonColor-color-**Звучит это удачно и я буду использовать такой подход, но где ты взял эту идею? Из именования свойств в js?
Ну, основа взята из вайтпепер, дальше уже просто пришли к такому, что если нужна необходимость в более точечной кастмизации, добавляем название компонента
АН
Ну, мы не определяем локальные переменные только для компонента, у нас вся кастомизация происходит на уровне темы приложения/фичи, это позволяет гибко настраивать внешний вид контролов для всего приложения
А популярно ли делать так:
- В блоке кнопки глобально определяю свойства в стиле
- На уровне проекта переопределяю
- В блоке кнопки глобально определяю свойства в стиле
--controlName-propertyName-value, что бы кнопка даже на чистой странице была самодостаточной и рабочей- На уровне проекта переопределяю
--controlName-propertyName-value: var(--color-button_theme_red-text)EW
А популярно ли делать так:
- В блоке кнопки глобально определяю свойства в стиле
- На уровне проекта переопределяю
- В блоке кнопки глобально определяю свойства в стиле
--controlName-propertyName-value, что бы кнопка даже на чистой странице была самодостаточной и рабочей- На уровне проекта переопределяю
--controlName-propertyName-value: var(--color-button_theme_red-text)Но ведь так не будет работать, у тебя все, что идет ниже переопределяет все, что идет выше
EW
т.е. обернув в какой-нибудь условный тем-провайдер, ты не сможешь переопределить кнопку
АН
Но ведь так не будет работать, у тебя все, что идет ниже переопределяет все, что идет выше
Почему? Это же как раз причина по которой это будет работать.
Сначала подключаю библиотеку элементов, а потом подключаю стили проекта, которые переопределяют цвета и размеры конкретных блоков.
Не понял в чём здесь проблема. Объясни
Сначала подключаю библиотеку элементов, а потом подключаю стили проекта, которые переопределяют цвета и размеры конкретных блоков.
Не понял в чём здесь проблема. Объясни
АН
Если ты предлагаешь использовать при определении кнопки глобальные переменные без префикса имени блока, например
color-bg-brand, то кнопка не будет автономной, потому что такие переменные - зависимостьEW
Возможно я не понимаю, как ты хочешь, но смотри:
.Theme {
--color-a: '#fff'
}
.Button {
--color-a: '#000'
}
<div className="Them">
<button className="Button">Handlee</button>
</div>EW
У тебя в обоих случаях одна и та же переменная, но из провайдера темы ты не сможешь её переопределить
АН
Возможно я не понимаю, как ты хочешь, но смотри:
.Theme {
--color-a: '#fff'
}
.Button {
--color-a: '#000'
}
<div className="Them">
<button className="Button">Handlee</button>
</div>В БЭМ документации вроде написано о том, что не должно быть зависимости от порядка объявления, точно не помню, но у меня пока что такая зависимость есть и я просто подключил бы файл темы после файла блоков и получилось бы что тема переопределяет кнопку.
А как ты предлагаешь?
А как ты предлагаешь?
EW
Тут так не работает, это ведь не этап сборки, а уже рантайм и тут работает принцип каскада
EW
т.е. то, что у тебя идет ниже по дереву переопределяет то, что идет выше
EW
т.е. не важно в каком порядке это подключится