я бы наверное предпочел делать так: class="_size_{size} _shape_{shape}"

да. просто на примере class="_size_{size} _shape_{shape}:
1) необходима конвенция именования классов, которую статически трудно валидировать. в таком случае трудно сделать инфраструктуру и инструменты, которые гарантированно для разработчиков будут работать так, как ожидается
2) подставлять классы руками иногда, конечно, просто, и в свелт из коробки за счет синтаксиса и инкапсуляции это сильно проще, чем в реакте из коробки. но я часто сталкивался с проблемой, когда подстановка классов при нетривиальной композиции состояний разметки становится тоже не такой простой. даже в том примере, очень часто в реальной жизни это что-то типа такого:

class:_size={size} class:_shape={shape} class="_size_{size} _shape_{shape}"

так как может быть и просто матчинг на размер, на форму, не зависимые от элемента и пр. в решадоу это всегда будет просто состояние разметки, а как уже определены стили - другой вопрос
3) когда в верстке захардкожена подстановка классов, такую верстку трудно стилизовать как-то еще. это не всем нужно, но когда это становится нужно, то становится больно
4) читабельность и простота самой разметки

на примере реакта

по поводу кастомных элементов - есть еслинт-правила для решадоу, которые форсят использование "as" для таких элементов, чтобы явно их указать, например

<icon as="span" />

в таком случае даже если появится такой элемент в действительности, это никак не зааффектит

а ведь все равно придется писать вот это для всех значений size:

button[|size="m"] {

?

?

тогда почему просто не писать:

button._size_m { ... }
button._size_l { ... }
button._size_s { ... }

?

button[|size="m"] {

ну, это уже от проектирования зависит

это может быть и так, может быть и

button[|size] {
 /* some common size styles */

 @mixin sizes s, m, l;
}

это как команда решит

то есть типа просто короче?

button._size {
/* some common size styles */
}

button._size_s { ... }
button._size_m { ... }
button._size_l { ... }

+/- тоже самое

блин, думал вчера на ночь тупил я, но чет сегодня не лучше. а кинь плиз еще раз пример для свелт

button._size_m { ... }
button._size_l { ... }
button._size_s { ... }

потому что button[use|size="s"] гарантирует то, что он будет применен к <button use:size="s" />

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

мне кажется что button._size_s также гарантирует то что он будет применен к <button class="_size_s"> ))