React Styling - En İyi Uygulamalar
CSS kararsız, kararsız bir şeydir. Gelişmeye yeni başlayan biri olarak, stil oluşturma her zaman için kafa karıştırıcı bir anlaşılmaz karmaşa olmuştur. Güzel bir şekilde özetleyen klasik bir CSS şakası var:
“İki CSS özelliği bir bara giriyor. Tamamen farklı bir bardaki bir tabure düşüyor. ”
Ve bu doğru! CSS'de bir sınıfın tarzının değiştirilmesinin bazen (ama başka zamanlar…) başka birçok şeyin stilini değiştirdiğini hiç fark ettiniz mi? Bazıları bu sınıfa hiçbir şekilde bağlanmamalı mı? Sahibim. Bu yüzden bir "düzeltme" olarak tek bir öğeye birden fazla sınıf adı koyuyoruz (ve sadece eğlence için bir kimliğe biniyoruz…), ama BEM bile isimlendiren anlaşmalar bile asıl meseleyi gerçekten düzelmedi: CSS sadece büyük projeler için uygun değil. Ayrıca, CSS (ayrı bir stil sayfası olarak) sadece React’e yönelik değildir.
İşte geçmiş bir projemin ekran görüntüsü. Her yerde üst sınıflar var, kimlik her yere dağılmış. Dağınıktı.
Girin: tyStyled-Components
React'te stil kullanmanın tonları ve tonları vardır, ancak en iyi uygulama gibi görünen bir bileşen, bileşeninizdeki bileşenleri doğrudan stillendirmektir. Bu tarz bileşenler yalnızca içinde oluşturuldukları belirli bileşeni etkiler, başka bir şey yapmazlar. React'teki bileşenler, küçük, odaklanmış ve tekrar kullanılabilir olduklarında en iyi sonucu verir.
Görebileceğiniz gibi, Button bileşeninin stilinin tümü, kullanıldığı belirli bir bileşen içinde korunur. Etiketli şablon değişmezlerini kullandığımızdan, Javascript mantığını doğrudan CSS'mize yazabildiğimize dikkat edin. Görülmemiş!
Stil stili
Bootstrap, Materialize, vb. Gibi CSS tarzı kütüphaneler, kendi React'e özgü bileşen kütüphaneleriyle birlikte geliyor. ClassNames olmadığından, stilinizi değiştirmek için CSS'yi hedefleyemezsiniz. Stilleri değiştirmenin tek yolu, stili bir nesne olarak değiştirmektir (javascript ile aşina olmayan bazı ön uç geliştiriciler için bir engel oluşturur). Bu her şeyle sonuçlanır. İnternet sitesi. seyir. kesinlikle. aynısı. Şimdi, stillendirilmiş bileşenleri kullanarak, temalı bileşeni hedefleyen özel bir stil oluşturulmuş bileşen oluşturabilirsiniz. Süper havalı.
Organizasyon ve Okunabilirlik
Stilli bileşenlerin kullanılması, React bileşenlerinizi düzenlemek için de harika bir araçtır. JSX'inizi
'En iyi pratik'
Stil bileşenlerini içeren stil sayfalarını yine de kullanabilirsiniz (bu, buradaki noktayı açıkça ortadan kaldıracak olsa da…) ve ayrıca genel stilleri (css dosyalarını normalleştirme veya sıfırlama gibi) enjekte etme yöntemleri de vardır. Bileşenlerin kendi içinde bileşenlerin şekillendirilmesi, birçok geliştiricinin özellikle React'te hareket ettiği en iyi uygulamadır. Herkesi bu konuda biraz araştırma yapmaya teşvik ediyorum, özellikle de React ve Angular 2 gibi bileşen tabanlı ön uç dillere girmek istiyorlarsa.
Daha fazla bilgi edinmek için bazı linkler:
David Chan, React’te bileşen düzeyinde stil hakkında bir konuşma yapıyor
Genel olarak komponent tabanlı sistemler için nasıl stil oluşturacağına değiniyor.
Glen Maddern, bileşen tabanlı sistemler teması üzerine bir konuşma yapıyor
Stil bileşenleri kütüphanesinin yaratıcısı, genel olarak bileşenlerin stillendirmesini gözden geçirir, kütüphanenin kendisine odaklanmaz.
Resmi Stilli Bileşenler web sayfası ve GitHub'a bağlantı:
Belgeler ayrıntılı ve özlüdür.
Max Stoiber ReactConf 2016'da bir konuşma yaptı
Tarz bileşenlerinin ortak yaratıcısı detaylara giriyor ve yeni stil kütüphanesi hakkında sorular soruyor.
Max Stoiber ile JavaScript Jabber podcast bölümü
Stoiber, kendi oluşturduğu create-react-app ve ayrıca stil bileşenleri kütüphanesinden bahsediyor.