Bu videoda bana Dustin Schau da katıldı ve beni CSS-in-JS olarak bilinen dünya turuna çıkaracak. Yani, stilinizi tamamen kendi başınıza oluşturduğunuz .cssdosyalarda değil, tamamen JavaScript'te yapmaktır .
Dustin, JS Playground'da CSS adlı harika bir keşif aracı yarattığı ve aynı zamanda konu hakkında yepyeni bir kursu olduğu için bunun için mükemmel bir rehber.
CSS-in-JS rotasına gitmenin neden herkesin ilgisini çekeceğini merak ediyorsanız, işte videoda tartışmamızın bazı nedenleri:
- Ölü kod eleme. Yüklenen stiller, herhangi bir zamanda kullanılan bileşenlerin stilleridir. Kullanılmayan stillerin nakliyesi yok. Bir bileşen öldüğünde stilleri de ölür.
- Kapsam belirleme. Yeni stiller yazmak, sitedeki diğer yerlerde başka hiçbir şeyi etkileyemez, bu nedenle, küresel kapsamdaki bir seçici nedeniyle başka bir yerde kötü veya istenmeyen sonuçları olan bir stil yazma konusunda endişelenmenize gerek yoktur. BEM gibi ideolojileri adlandırarak kapsam koruması elde ederiz, ancak bu, araçlarla zorunlu değildir.
- Endişesiz adlandırma. Bazı durumlarda, çıktı kullanıcı arabirimi içerdiğinden stil verilenler için bir sınıf adı veya kimlik seçmeye gerek yoktur.
- Geliştirici ergonomisi. Stillerin aynı dosyada (veya başka şekilde bileşenin kendisine çok yakın olması) güzel olabilir. Aynı şekilde, bazı geliştiriciler JSX'te kendilerini çok rahat hissediyorlar. Ayrıca, herhangi bir kapsam belirleme endişesi olmadan bir şeyler şekillendirebilmek, geliştiricilerin korkutmak yerine stil oluşturma konusunda kendilerini güçlendirebilecekleri anlamına gelir.
- Tasarım sistemi dostudur. Tasarım sistemleri tamamen bileşenlerle ilgilidir ve React de öyle. Bu tamamlayıcı düşünme biçimleri birbiriyle oldukça uyumludur.
- CSS'de JavaScript Olanakları. Bunu mantıksal işleçlerle yapmak ve değerler, matematik ve başka bir şeyle geçmek, stillerde JavaScript'in tam gücüne sahip olmak çok yararlıdır.
Ve bu her şey değil, ama bazı insanlar için neden çekici olduğunu anlayabilirsiniz. Kesinlikle birçok tartışmaya ilham verdi. Tüm bu avantajları sunarken neden olmasın? Eh, herkesle tıklamak zorunda olmayan çok farklı bir geliştirme ortamı. Biraz alışılmadık şeyler yapmak için web platformunu bükmeyi gerektirir ve bu siğillerle birlikte gelir. Kullanıcıların ödediği gerçek bir maliyet (paketlerin boyutu vb.) Olduğundan bahsetmiyorum bile, ki bunu verimlilikle ödeyeceğini umarsınız.
Dustin, Sass'ı kullanarak CSS-in-JS ile nasıl yapılabileceğini karşılaştırmak için bir demo oluşturacak kadar ileri gitti, bu da taşıma stillerinin nasıl göründüğünü ve bunu yapmanın olanaklarını gösteriyor.