CSS-in-JS özellikle son dönemlerde çok popüler.Dünyaca ünlü firmalar(Reddit, GitHub vb.) bile tercih ediyor. Bunun nedeni ise birçok avantajı olması ve özellikle React geliştiricilerinin kullanması.

Birkaç avantajı şöyle:

• Ölü kodu ortadan kaldırıyor. Sadece gerekli olan stilleri kullanıyor. Kullanmadığın zaman siliyor.
• Kapsam belirmeme. Bazen bir bileşende farklı stiller kullanmak isteriz ve bu stillerin sadece bu bileşene özgü olmasını isteriz. Kapsam belirleme(scoping) ile bunu yapmak çok basit.
• Tasarım sistemi dostu. Bileşenlerle birlikte oldukça uyumlu kullanabilirsin. Özellikle React'da bu eksikliği gidermek için de birebir.
• Geliştiriciler için çok rahat. Her şeyin aynı yerde olması epey rahatlık sağlıyor. Ayrıca scoping kullanarak diğer stilleri bozmayacağımız için gözümüzü korkutmuyor. Ortak proje yaparken şu şunu etkiler mi diye endişelenmiyorsunuz.
• CSS'in içerisinde JS kullanma rahatlığı. Mantıksal operatörleri vb. sass ile kullanmak yerine direkt js ile de kullanabiliriz.

CSS-in-JS kimler için:

• Bileşenleri (component) olan bir web sitesi kullanmak istiyorsanız iyi bir seçimdir. Ortak projelerde rahatlıkla kullanılır.

CSS-in-JS vanillaJs ve React'da kullanılıyor. Vue'de zaten single file template yapısı var. Angular'da da component styles yapısı var. Svelte'de de benzer şekilde single file template yapısı var.
Kullanımı zor değil. Dökümanları çok iyi. Zaten Js bilgin varsa rahatlıkla yaparsın. Yoksa da js öğrenmen lazım zaten.
VanillaJs için aşağıdaki arkadaşın da belirttiği gibi bu arkadaşın yaptığı Vanilla Extract var. Zero-runtime vadediyor ve typescript tabanlı.

React için de şunu kullanabilirsin.
Buradan da güzel bir örneğe ulaşabilirsin.

Eğer CSS-in-JS kütüphanelerini karşılaştırmak istiyorsan buraya bakabilirsin.

Kişisel Fikrim

Eğer ben yeni bir framework öğrenmek istemiyorum diyorsan CSS-in-JS'e bakabilirsin ama büyük bir proje yapacaksan bence Vue kullan.