Мое мнение по вопросу построения селекторов для UI-компонентов.
Взаимоисключающие селекторы не используются совместно по договоренности внутри команды и по здравому смыслу.
Компонент имеет уникальный для себя в рамках текущей компонентной системы класс, желательно с префиксом, например, ".ui-": .ui-button, .ui-card, .ui-slider, .ui-popup. Префикс ui-системы позволяет однозначно понять, что увиденный в коде класс относится к ui-системе, а не является проектным, созданным для использования в конкретном проекте.
Различные вариации компонента могут быть выражены классами или data-атрибутами. Выбираем то, что удобно команде и лучше подходит для конкретного случая. Опять же желателен короткий префикс (по сути namespace). Например, .ui-xl, .ui-sm и т.п., .ui-primary, .ui-secondary и т.п. Для свойств состояния (булевых свойств) используются префиксы "-is" и "-has". Например, .ui-is-disabled, .ui-is-active, .ui-is-loading и т.п.
Вопрос специфичности селекторов решается с помощью :where. Таким образом будут подобные селекторы: .ui-button:where(.ui-primary.ui-disabled), .ui-card:where(.ui-xl) и т.п. Это удобно, так как :where не меняет специфичность селектора и поддерживается всеми современными браузерами (Safari 14+).
В UI системе удобно создать набор shortcut классов (tailwind классов) для некоторых (именно части) свойств. Например, для отступов .ui-margin-top-8, .ui-margin-top-12 и т.п., для обложки .ui-border-top, ui-border-y и т.п.
Учитывая сохранение специфичности через :where можно будет легко переопределить (или дополнить) стили в нужных местах проекта. Например, добавить отступы к карточке снизу добавив класс .ui-margin-bottom-24.
Если вашей команде нравится использовать data-атрибуты вместо классов, то совмещая это с :where ничего не меняется, например, .ui-button:where([data-variant="primary"]), .ui-button:where([data-is-disabled]). Но лично я считаю этот вариант более громоздким визуально и придерживаюсь той позиции, что data-атрибуты - это про данные, а не про стилизацию.
Мое мнение по вопросу построения селекторов для UI-компонентов.
Взаимоисключающие селекторы не используются совместно по договоренности внутри команды и по здравому смыслу.
Компонент имеет уникальный для себя в рамках текущей компонентной системы класс, желательно с префиксом, например, ".ui-": .ui-button, .ui-card, .ui-slider, .ui-popup. Префикс ui-системы позволяет однозначно понять, что увиденный в коде класс относится к ui-системе, а не является проектным, созданным для использования в конкретном проекте.
Различные вариации компонента могут быть выражены классами или data-атрибутами. Выбираем то, что удобно команде и лучше подходит для конкретного случая. Опять же желателен короткий префикс (по сути namespace). Например, .ui-xl, .ui-sm и т.п., .ui-primary, .ui-secondary и т.п. Для свойств состояния (булевых свойств) используются префиксы "-is" и "-has". Например, .ui-is-disabled, .ui-is-active, .ui-is-loading и т.п.
Вопрос специфичности селекторов решается с помощью :where. Таким образом будут подобные селекторы: .ui-button:where(.ui-primary.ui-disabled), .ui-card:where(.ui-xl) и т.п. Это удобно, так как :where не меняет специфичность селектора и поддерживается всеми современными браузерами (Safari 14+).
В UI системе удобно создать набор shortcut классов (tailwind классов) для некоторых (именно части) свойств. Например, для отступов .ui-margin-top-8, .ui-margin-top-12 и т.п., для обложки .ui-border-top, ui-border-y и т.п.
Учитывая сохранение специфичности через :where можно будет легко переопределить (или дополнить) стили в нужных местах проекта. Например, добавить отступы к карточке снизу добавив класс .ui-margin-bottom-24.
Если вашей команде нравится использовать data-атрибуты вместо классов, то совмещая это с :where ничего не меняется, например, .ui-button:where([data-variant="primary"]), .ui-button:where([data-is-disabled]). Но лично я считаю этот вариант более громоздким визуально и придерживаюсь той позиции, что data-атрибуты - это про данные, а не про стилизацию.