то, что нужно нам - мы более-менее описали, я еще добавлю возможный синтаксис

Возможный синтаксис - интересно. Скинь, как добавишь, я тогда быстрее пойму, что вам требуется и какая задача решается. Мне ничего из этого вроде не нужно, поэтому сложно въехать.

да, напишу

речь о приоритете состояний или о чем? я чето ваще не догоняю

Долго писать, но попробую кратко: Состояния элементов должны описываться взаимоисключающимися селекторами, чтобы иметь возможно их предсказуемо переопределять. Так конечно почти никто не делает (даже я не делаю, у меня оно само генерится), потому что сложно, долго, не поддерживаемо и зависит от окружения. Поэтому более сложная задача “переопределение средствами CSS состояний” вообще никак по идее не решается, тут нужны более навороченные обновления стандарта.

Если речь про изменения цвета, который подкладывается при hover, то тут всё решает CP, но добавление нового состояния hover - уже никак не решится.

я запутался еще больше
можешь привести пример конкретного компонента (кнопка может?) и пары его состояний, где возникают сложности?

Ох, ну и задача. Окей, говорим про самый простой CSS, без WC и прочего, для простоты. У тебя есть элемент у которого два состояния “при наведении” и “без наведения”: Пишутся они вот так:

some-element { background: white; }
some-element:not([disabled]):hover { background:red; }

Это кривой CSS, но я его оптимизировать не буду, не важно для данного примера.
Тут мы хотим снаружи переопределить состояние “при наведении”. И как нам его описать?

some-element:hover { background: blue; }

Не работает, мы лезем в исходники и видим код выше. Переписываем:

some-element:not([disabled]):hover { background: blue; }

Тут приходит разработчик исходного элементы и добавляет media queries, чтобы исключить состояние “при наведении” для мобильных устройств. Ну и всё ломается разумеется. И так до бесконечности.

^ забыл тегнуть

ага, то есть мы говорим про non-binary состояния
и не просто про состояние, а про стилизацию снаружи

ну ребят, не представляю даже, как это можно в общем виде решить
это все равно что сказать, что щас мы специфичность селектор в общем виде упростим, чтобы всем понятнее было, предсказуемо и главное всегд единообразно переопределяемо

Единственный способ это решить, который я пока вижу, это декларативно добавлять это состояние и уже перегенерить CSS для элемента. Но если это runtime (а такое часто бывает), то тут все зависают.

Ну у нас эта проблема решена полностью.

не в общем же виде?

Можно сказать, что в общем :)

например что если девелопер хочет 2 состояния дополнить или переопределить?

как вы правильно специцичность селекторов нагенерируете?

У нас каждый элемент сам генерит себе CSS (если уже нет готового аналогичного). Соответственно переопределив атрибуты элемента, можно переопределить его состояния. Сейчас скину пример.

<nu-attrs
  for="dropdown-icon"
  name="chevron-down"
  scale="^:pressed[flip-y]"
  size="1.25em"></nu-attrs>
<nu-block padding="3 bottom">
  <nu-btn>
    Button label
    <nu-icon as="dropdown-icon"></nu-icon>
    <nu-popup>
      Popup content
    </nu-popup>
  </nu-btn>
</nu-block>

вот тут я на верхнем уровне определил, что есть некий dropdown-icon. Иконки, которые хотят выглядеть как этот dropdown-icon берут себе эти атрибуты.

scale="^:pressed[flip-y]”

Указывает, что у иконки есть состояние обычное и перевёрнутое.  Оно зависит от того нажат родитель или нет.