# Именование
# Вариации блоков
Для изменения внешнего вида вы должны использовать мофидикаторы со значением(например: --theme_default). Таким образом избавимся от захламления API компонента, и упростим расширение его стилизации.
Единственное где подобный механизм не совсем корректен - это индикация состояния компонента(зачастую булевые: disabled, readonly, invalid, active, opened, hidden, etc). В таком случае создание отдельного prop оправдано.
Ключи для стилизации компонента в порядке возрастания специфичности:
theme- Тема. Самое глобальное поведение компонента, которое изменяет базовые параметры элементов. Использовать крайне редко. Чаще всего - это какой-то глобальный.theme--, который влияет на стилизацию все элементов внутри. Только единичное изменение.view- Варианты отображения элемента, которые сильно меняют его поведение/визуальное отображение. Например изменяют позиционирование внутренних объектов, или изменяют реализацию его составных частей. Редко встречается в множественном виде/применении.styling- Также крупные изменения, но только в стилизации блока, без существенного изменения поведения/расположения элементов.variant- Крупные визуальные вариации оформления элемента.appearance- Мелкие визуальные изменения элемента. Например изменение базового цвета, или изменение радиуса скругления углов. Типа:--appearance_rounded,--appearance_stacked,--appearance_elevated. Может быть множественным.kind- Чаще всего функциональный модификатор. Стилистически изменения должны проводится для отображения изменения его функциональной принадлежности. Например: типы полей ввода(при этом, например, будет меняться только иконка).
# Позиционирование
align- Внутреннее - позиционируются составные элементы обьекта.fit- Внешнее - позиционируется элемент относительно окружающих. Желательно сводить к минимуму использование этого модификатора.
Вообще идеальный вариант когда позиционирование происходит исключительно наружное. То есть корневой элемент(блок) ничего не знает об окружающем его мире, и не занимается собственным расположением. А занимается исключительно позиционированием собственных составных частей. В таком случае он легко переиспользуется в абсолютно любом месте без потребности в его изменении.
# Состояния
Булевые:
disabled- Отключенный элемент. Все его механики не должны работать.passive- Визуально отключенный элемент. Механики продолжают работать, но требуется убрать визуальную индикацию его работоспособности.readonly- Отключены механики, которые способны изменить состояние, но не отображение.invalid- Текущее состояние компонента не соответствует внешним требованиям.active- Установка "активного" состояния элемента, что-бы это не значило.opened- Установка "открытия" состояния элемента, что-бы это не значило.hidden- Установка "скрытого" состояния элемента, что-бы это не значило.