Photo by Brooke Lark on Unsplash

React Styling

React Proje Mimarisi 23 — (Layouts Styling) Styled-Components/Emotion Avantajları

Bu blogda bileşenlere styling bileşen seviyesinde tanımlamanın avantajlı olduğu kısımlardan bahsedeceğim.

Bundan önceki React Styling konusunda yazdığım yazılara aşağıdaki linkten erişebilirsiniz.

https://onurdayibasi.com/react-ui-styling/

Konuyu çok uzatmadan kısaca anlatmaya çalışacağım. Büyük ölçekli projelerde 3 tip Styling kullanıldığından bahsetmiştim.

• SaSS (.scss)
• JSS (Styled Comp, Emotion)
• Atomic (tailwind)

Uzun zamandır içinde olduğum projelerde genel yaklaşım bir UI Designer, çalışmak şeklinde olduğu için genelde SaSS kullanarak ilerledik ve birçok yerde de işimi gördüğünü söyleyebilirim.

SaSS bazı eksi yönleri bulunuyor. Örneğin;

• Copy/Paste olayları zaman içerisinde arttığı için Reusability tam olarak kullanamıyorsunuz, veya çok uğraş vermeniz lazım (Tailwind burada avantajlı)
• Dinamiklik katmak istediğiniz kısımlarda Class add/remove yöntemleri bir yerden sonra JS kodunuzu çok karmaşıklaştırıyor.
• Scope kavramları CSS yeni yeni gelmeye başladı, öncesinde BEM isimlendirme modelleri kullanarak ilerliyorduk. Falat Scope içinde array içerisinden className , html elemanlarına eşleme kodu biraz kötü gösteriyor. (CSS Scope blog yazısına bakabilirsiniz)

Tüm bunların yanında JSS dediğimiz kavramlar bileşen yapısına ve React Layout oluşturma işlerinde bana daha kolay gelmeye başladı.

• Styled-Components (Weekly 4.7M download)
• Emotion (Weekly 6.1M download)

sahip kütüphaneler özetle yüksek kullanıma sahipler. Bu kısımda emotion react, styled, css olarak 3 yaklaşımı bulunuyor. css özelliği geliştiricinin direk div elementi içerisinde style={{}} açarak oluşturacağı kısımda scss gibi kod yazabilmesine imkan sağlıyor.

Fakat benim burada üzerinde durmak istediğim Styled yapısı burada bileşenin Styled olması kodun okunabilirliğini ve Layout oluşturmaya büyük olanak sağlıyor.

const MainLayout = styled.main`
  display: flex;
  flex-grow: 1; 
  height: 100%;`;

Artık ben kodumun içerisinde bu Styled component bir bileşen olarak reuse edebiliyorum. Ve kavramsal olarak bu yazdığım bileşenin kafamda oluşması bunu tekrar tekrar reuse etmemi sağlıyor.

<MainLayout>
    ..
</MainLayout>

Bu kısmı biraz daha genişletirsek istediğiniz seviyede Layout bileşenleri oluşturabilirsiniz.

<MainLayout.Main>
   <MainLayout.LeftPart></MainLayout.LeftPart>     
   <MainLayout.RightPart></MainLayout.RightPart>
</MainLayout.Main>

Bu kullanım bana göre kodun içerisinde className görmekten daha anlamlı , anlaşılabilir ve tekrar kullanılabilir geliyor. Bir diğer konuda JS paramerelerini, kodun içerisinde çok basit dinamikler ile kullanabiliyor olmanız.

const LeftPanel = styled.div`
  flex: 0 0 auto;
  width: ${({ isMinimized }) => (isMinimized ? '80px' : '400px')};
  min-width: 80px;
  max-width: 400px;
  background-color: red;
  padding: 10px;
  transition: width 0.3s ease;
`;

Büyük projelerde genelde kendi bileşen kütüphaneleri ve layout bileşenleri bulunur, ama öyle durumlar olurki bu Layout’un veya Bileşenin modify edilmesi gerekir. Burada 2 yöntem var ara div … oluşturarak className ile bunları kurgulamak veya css ezmek.. !important..

Her 2 noktada’ da bu işlemler için SaSS kullanmak yerine son dönemde Styled bileşenlerin daha mantıklı gelmeye başladı.

Şu anda her ne kadar RSC kavramına uzak olsamda belki CSS → Bileşen içerisine alınma kavramı yarın RSC ile Server Side yazma kavramı ile aynı olacak.

Özetle Styling ve Layout ayrı SaSS, css, scss içerisinde düşünmek yerine bileşen olarak düşünmek benim için daha faydalı ve anlaşılı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.