REACT STYLING
React Proje Mimarisi 26 — Styled-Components/Emotion Dezavantajları
Bu blogda bileşenlere styling bileşen seviyesinde tanımlamanın dezavantajlı olduğu kısımlardan bahsedeceğim.
Son dönemde Styled Component/ Emotion ile yani CSS in JS yöntemi ile layoutlar ve bileşenler geliştirmeye çok alışmış durumdayım. Bundan önceki yazımda da Styled Components’ ın avantajları üzerine durmuştum.
Evet Styled Component’s ile Reusable (Tekrar Kullanılabilir) bileşenler yapmak çok kolay ve verimli. Hele bu konuda altyapı Layout ve Bileşenlerinizi oluşturmuş iseniz. Şu 3 konuda size büyük avantajlar sağlıyor.
- Reusable Geliştirme Altyapısı Sürekli Odaklanma
- Theme yapısını desteklemesi
- JS içerisinde kullanabilmekten kaynaklı Dinamik ve Esnek Styling yapabilme.
Şimdi gelelim Dezavantajlarına
- Performans: Sonuçta tarayıcılar styling css olarak algılıyorlar ve bütün styling JS yıkılması performanslı değil özellikle ekranda çok fazla iç içe div varsa.
- Debugging: Reusable Styled Component Bileşen tüm uygulamanıza yayıldığında Layout ile birlikte kodun anlaşılabilmesini özellikle debugging aşamasını çok zorlaştırıyor. scss, css dosyalarının ve kullandığınız class isimlerinin olmaması sizin kodu inspect debug ederken geliştiricileri çok zorlayabiliyor.
Bu 2 Sorunu Nasıl Çözebilirsiniz ?
- Performans sorununu Client Side çalışan kısımlarda çözemezsiniz bundan dolayı projenizin türüne göre bu yöntemi tercih etmelisiniz.
- 2nci sorun yani Debugging isimlendirme ile bir miktar çözebilirsiniz, yani elemanlarınıza Id isimlendirmeleri vererek. CSS lerde classname isimlendirmelerinde kullandığımız yöntemi StyledComponent Id isimlendirmesinde kullanabilirsiniz.
Ben burada BEM isimlendirme yöntemini kullanmayı tercih ediyorum. BEM 3 kısımdan oluşuyor. Block, Element ve Modifier.
Örneğin bir Tab Block için
block_identier__element__identifier--modifier
widget-dependents__tab_1--selected
widget-dependents__tab_1--editing.Bir AuthBlock için
auth-form__name--editing
auth-form__password--errorBunun gibi isimlendirmeler oluşturarak bileşenin ilgili state HTML içerisine id olarak geçirebildiğiniz taktirde, debugging problemlerini kısmen çözmüş olursunuz.
Not: Projenizde hangi Styling yöntemini seçerseniz seçin, CSS, CSS in JS veya atomic (Tailwind) gibi. Her yöntemin avantajı ve dezavantaj durumları bulunur önemli olan sizin bu kalabalıkta bu parçaları nasıl yönettiğiniz ve nasıl etkileşime geçtiğinizdir. Özetle bu bir yönetme şeklidir. Burada da
- İsimlendirme doğru yapılması
- Bileşen ve Sınıfların doğru seviyelerde soyutlanmasıdır.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki(react-mimarisi) diğer yazılara erişmek için bu linke tıklayabilirsiniz.
