селекторы по атрибутам/элементам на самом деле преобразовываются в классы) основное дело в отсутствии необходимости конвенций именования, семантике и соответственно простом мапинге на разметку и состояние

если капать глубже, то как раз отсутствие классов и мапинг стилей на разметку с реализацией на классах под капотом даёт возможность гибкой стилизации

слушай, а дублирование стилей для инстансов получается не происходит за счет того что генерируется css стили для всех состояний? а откуда берутся все варианты состояний?

скорее пишутся стили для нужных состояний
для тех состояний, для которых стилей нет, ничего и не происходит в стилизации

однако если в какой-то момент появилась необходимость стилизовать и это состояние, то просто пишется еще один стиль под это состояние

по сути итоговая стилизация - это композиция предопределенных классов, соответствующих конкретному элементу и его текущему состоянию

а ну типы ты сам описываешь все сравнения?

это в решадоу под капотом реализовывается)

т.е. пишется  button[|size="s"][type="submit"][disabled][ {...}

и в тот момент, когда у элемента <button /> будет описанное состояние, применятся нужные классы. и это делается весьма эффективно

вот тут есть сравнение разных решений, в т.ч. с использованием веб-компонентов: https://uijux.sse.codesandbox.io/

погодь, я думал там сделано засчет того что генерируется куча классов и их сочетаний, а уже разработчик эти классы верно расставляет на элементах, или нет?

наоборот скорее) разработчик пишет стили те, что ему нужны, и описывает разметку, которая ему нужна, а библиотека сама их сопоставляет. или я тебя не очень понял

в итоге то статический css генерируется или рантайм всегда есть

?

генерируется статический css, рантайм только в виде подстановки классов в зависимости от состояния. по сути это то, что разработчик бы делал руками с помощью условий, интерполяции строк в классах и тп)

а как эти классы подставляются? прям через DOM API?

а как отслеживается стейт?

постцсс плагин преобразовывает button[disabled] в классы типа .__button._disabled

с помощью css modules генерится мапа класс/хеш

бабель плагин делает преобразования над пропсами (можно и просто использовать прагму), где на соответствие этим пропсам из мапы подставится нужный класс (грубо говоря элементу <button /> и пропсе type="submit" будут соответствовать классы _type, ._type_submit и .__button, если они были определены в стилях)

не я про синхронизацию со стейтом компонентов

стейт компонента отражается в разметке, стили синкаются с состоянием разметки

ну то есть я как разработчик сам выставляю классы на элементах, а под них просто сгенерирован  набор классов для всех сочетаний?

а, там же еще какие-то модификаторы собственные есть типа :shape={shape} :size={size}

оно?