Bunu indirebilirsin.
Bu tarz şeyler için genelde prettier işlevi de gören ESLint veya Lint kullanılır ama muhtemelen statik HTML kodluyorusunuz.
Vue ve React için ESLint'i kullansan daha iyi olur.
Muhtemelen sadece sunucu tarafında önbelleğe alınıyor. Localhost'da mı çalıştırıyorsun ve çalıştırıyorsan hangi programı kullanıyorsun?
Sunucu tarafında önbelleğe almaması için de dinamik hâle getirebilirsin:
<link rel="stylesheet" type="text/css" href="style.css?<?php echo time(); ?>" />
Değiştirdiğine emin misin, daha doğrusu sunucu tarafında değiştiğine emin misin? CTRL + U ile kaynağı görüntüle. Oradan da css dosyasına tıkla. Aynı kod mu yazıyor?
Tıklama ile istiyorsan yapabilirsin. (Anlık ve Realtime olmayacak şekilde)
Bu ve burdaki konularda açıklık getirilmiş.
Realtime bir paket de var aslında ama denemedim, o yüzden emin değilim. Ajax kullanarak sürekli istek atıyor sanırım. Ne kadar performanslı bilemem.
Ne için kullanacaksın bilmiyorum ama Google Analytics'i de unutma derim.
Anlık olarak izlemek istiyorsan ExpressJs kullanmalısın. Sürekli kontrol edip istek göndermen lazım.
PHP ile yapacaksan da salt PHP ile olmaz. Swoole gibi asenkron frameworkler kullanman lazım ki o da altta Express kullanıyor diye biliyorum.
O hâlde vanillaJs kullanıyorsan Observer API ile yapabilirsin. Zaten kütüphaneler de bu API'yi baz alarak yapılmışlar.
Tayfun hocanın böyle bir videosu var, örnekler ile de konuyu pekiştirmiş. Yani kütüphane kullanmadan da yapabilirsin.
Kütüphane kullanmadan şurda gösterildiği gibi çok kolay bir şekilde yapabilirsin. (yazıda sadece chrome ve opera demiş ama firefox da destekliyor artık)
Geliştirme aşamasında tespit etmek için ESLint kullanabilirsin. Şöyle bir plugin'i de var.
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.