que demais Deivid Marques! muito obrigado por ler!
eu concordo com você, ainda veremos muita evolução nesse campo, ainda mais quando Shadow DOM estiver mais estável ou outra solução parecida ser implementada nos navegadores,
particularmente, unir CSS + JS + HTML (JSX), tem sido um alívio danado em manutenção e até mesmo educação de outros desenvolvedores. a curva de aprendizado fica mais simples,
nesse artigo eu uso o CSS Stylesheet Object nativo, que, como você viu, é bem limitado, mas te digo, o exercício/limitações de usar/pensar/codar com ele, foi interessante, principalmente no Design. Exemplo, pensando em mobile-first, não existe :hover, então onClick para troca de styles substitui muito bem, até mesmo no Desktop.
Em relação ao :pseudo-elements, eu acredito que não há muita diferença, porque, se pararmos para pensar, aplicamos :after/:before em determinadas classes para construirmos outros elementos, ou seja, podemos retornar um novo elemento no HTML baseado em uma propriedade que mudou, e o melhor, ainda podemos adicionar a11y nesse elemento, tornando-o acessível (coisa que com :pseudo-element não é possível).
eu tenho um outro artigo que explora ainda mais esse "novo campo do css":
é criada uma narrativa desde "arquivos css/html/js" até a união (hoje em dia) de tudo em components (React/JSX), passando por CSS Modules e Styled Components,
se puder, me diz o que achou, valeu mano!
