Series for React Architecture
React Örnek Mimarisi — 9(Styling için Local Scope Kullanımı, CSS Module)
Styling yani SaSS, CSS içerisindeki className yönetmek için BEM modelini kullanmayı konuşmuştuk. Bu yazıda buna ek bir destek olarakda CSS Module gelen Local Scope kavramından bahsedeceğim.
Bundan önceki React Örnek Mimarisi — 8(Own Styling and Naming) blog yazısında bileşenleri stillendirmek için aşağıdaki yöntemler olduğunu,
- React Inline Style
- SaSS, CSS
- Atomic CSS (Tailwind, Bootstrap vb..)
- JS in CSS (Styled components, Emotion)
uygulamalarda SaSS yani CSS yöntemini tercih ettiğimi, çok dinimiklik gerektiren yer olursa o kısımlarda Emotion kullandığımdan bahsetmiştim.
Tamam SaSS kullanıyoruz ama uygulamada bileşen sayısı arttıkça, bir sayfa bir çok bileşeni, bir çok bileşen diğer bileşenleri kapsarsa(compose) bu durumda className (className) isim karmaşasının bir problem oluşturduğuna bunu çözmek içinde BEM yöntemini kullanmanın çok mantıklı olduğundan bahsetmiştim
- B → (Block)
- E → (Element)
- M → (Modifier)
Fakat her ne kadar biz isimlendirme ile belli konuları çözsekte.. Aynı JS var yerine Let ve Const kullanarak sadece belirli scope içerisinde değişkenlerin etkili olması gibi (Neden? var → let, const) yapısını CSS içerisinde oluşturabilirmiyiz.
Evet module bazlı CSS/SaSS ile bunu oluşturabiliriz. Bunun için bir örnek geliştirdim. (https://onurdayibasi.dev/styling-module-load)
3 tane düğme var hepside aynı ClassName kullanıyor. scope_btn
- PageButton arkaplan rengi Mavi
- GlobalButton arkaplan Rengi Kırmızı
- LocalButton arkaplan Rengi Yeşil verilmiş durumda..
Örnekte görüleceği gibi GlobalButton Page içerisindeki aynı ClassName sahip style etkilenirken LocalButton bundan etkilenmedi. Yani ilgili modüle LocalScope sağlamış olduk.
Global Scope ile Local Scope Arasında Nasıl Farklar var ?
Öncelikle scss veya css module tanımlarken ekstradan bunun module olduğunu belirtiyoruz.
2nci olarak import ettiğimiz kısımda module Style içerisine import edip onun içerisinden ilgili className direk Style.scope_btn örneğindeki gibi tanımlıyoruz.
Bu durumda HTML’de son durumda oluşan elemanlara baktığımızda LocalButton unique olarak oluşturulduğunu görebilirsiniz.
Bunun CSS eşleştirmesi ile baktığımızda, Global Button Page Style ile ezildiğini görebilirsiniz.
Ama LocalButton olarak CSS Module olarak yüklediğimiz düğme Sınıf ismi tamamen farklılaştığı için bu durumdan etkilenmedi
BEM ve CSS Module Yapısı
BEM ve CSS Module yapısı birlikte güçlü bir stillendirme yapısı oluşturabileceğini düşünüyorum. Bu yeteneklerin üzerine SaSS sağlamış olduğu bir çok utility ve değişken tanımlama ve CSS değişken tanımlama altyapısı sayesinde kendi Styling altyapınızı kurabilirsiniz.
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.
