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.
Üstte de belirttiğim gibi o şekilde yapamazsın. İşin içine ufacık js katarak div'e link verebilirsin ama.
Şu şekilde:
<div style="cursor: pointer;" class="container" onclick="location.href='kullanıcıadresi'">
<!-- diğer kodların -->
<a href="logoutadresi">Çıkış yap</a>
</div>
a etiketinin içine buton koyamazsın zaten. Koyulsa bile mantıksız olur.
Yaptığın şeyi de anlamadım. Ne yapmaya çalışıyorsun ki? Ona göre cevaplayalım.
Web servislerden kastınız SOAP veya REST API. PHP ile kolayca REST API oluşturabilirsiniz. İster public isterseniz de private olarak erişime açabilirsiniz.
Burada güzel bir anlatım mevcut.
PHP ile yapamazsın.
Ama Chrome tabanlı NodeJs paketleri ile yapabilirsin.
Örnek: axios, Cheerio
Öncelikle sadece Google üzerinden yazıyorum.
Google eski yıllarda AJAX taramaları için sitelere !#
şeklinde bir link yapısı kurmalarını istiyordu.
Fakat sonradan bunu işlevsiz buldu ve GoogleBot kullanarak sitelerden snapshot almaya başladı.
GoogleBot ile Chrome kullanarak sitelerden HTML Snapshot almaya başladı.
Yani şu an Google Ajax ile çalışan nerdeyse tüm siteleri indexliyor ve bu teknolojiyi de geliştirmeye devam ediyor.
Daha fazla bilgi istiyorsan: