Css in JavaScript — Styled-Components

Stillendirilmiş React Component’ları üretmek

Modern frontend uygulamaları geliştiriyoruz. Bir çoğumuz Vue, React, Angular gibi teknolojiler kullanıyoruz. Stillendirme konusunda bugüne kadar bir çok çözüm ortaya çıktı. Bunların ortaya çıkma sebebi tarayıcıların anlayabildiği css’i evrimleştirmek ve daha kullanılabilir hale getirmekti.

Component

Component’lar hangi teknolojide olursa olsun temelde aynı şeyi ifade eder sadece yapısal ve uygulama şekli olarak değişkenlik gösterir. Component dediğimiz şey bütünü oluşturan bir parça ve kendi içerisinde bazı işlevsellikleri yerine getiren ufak birimler olarak ifade edilebilir.

Stillendirmenin Evrimi

Less, Sass, Stylus gibi bir çok çözüm ile karşılaştık ve bunları geliştirdiğimiz uygulamalarda kullandık. Açıkçası ben hepsini kullanmaktan keyif aldım. Ancak geldiğimiz noktada kullandığımız teknolojilerde bu çözümler yerine daha farklı yöntemler üreten araçlara yönelmek daha cazip gelmeye başladı. Elbette bunun bazı nedenleri var ve bu araçların (örn: styled-components) çözüm ürettiği şeyler component üretme modellerinde karşılaştığımız genel problemleri kapsamakta.

React Component’larında Css

Component geliştirirken normal şartlarda şu şekilde stillendirme yapıyoruz.

Bakımı daha kolay component’lar geliştirmek, css’ide artık JavaScript’e dahil etmek ve css yazma alışkanlıklarını değiştirmek üzere component’ları stillendirerek oluşturma fikri ile birlikte styled-components ortaya çıktı.

Styled-Components 💅

Stillendirilmiş component’lar üretmek için sık kullanılan teknolojilerden biri. Alternatifleriyle yapılan karşılaştırma sonuçları şu şekilde;

Görsel Kaynağı: Max Stoiber

Örnek:

Styled-Components ile basitçe bu şekilde component yaratabiliyoruz. Bu bize aşağıdaki gibi bir çıktı veriyor.

<h1 class=”dDMkfx”></h1>

Global scope sorununu çözmek için class isimlerinde unique hash kullanarak aslında bizim stillendirilmesini istediğimiz html elementini oluşturuyor.

Oluşturulan stillendirilmiş component’ı şu şekilde kullanıyoruz;

Diyebilirsiniz component kodlarının olduğu yerde stillerin ne işi var. Eğer bir kaç stil yazacaksanız aynı dosya içerisinde yazabilirsiniz(Ben bu şekilde kullanıyorum). Ancak yazacağınız stiller fazla ise şu şekilde ayrı dosyadan beslenebilirsiniz endişelenmenize gerek yok. 😎

Props:

Styled-Components es6 ile birlikte gelen template literals kullanarak daha rahat bir şekilde normal css yazar gibi JavaScript içerisinde css yazmamızı sağlıyor. Stillendirilen component’lar dışarıdan prop alabiliyor ve aslında css yazarken dışarıdan dinamik olarak alınan prop’lara göre karar mekanizmaları oluşturabiliyoruz yani if else gibi yapılar kullanabiliyoruz.

Örnek:

Başka bir stillendirilmiş component’dan yeni bir component türetmek için şöyle bir örnek verebiliriz;

Stillendirilmiş component kullanımı daha temiz hiyerarşik bir düzen oluşturmamızda oldukça faydalı bir yöntem. Daha temiz ve okunaklı bir yapı oluşturmak için tercih edebiliriz.

Aynı zamanda güçlü bir tema desteği sunabiliyoruz.

ThemeProvider & InjectGlobal

App’imizi styled-components ThemeProvider’ı ile sarıp oluşturduğumuz obje tabanlı temamızı props olarak veriyoruz.

InjectGlobal ile global stilleri tanımlayabiliriz, örneğin normalize.css, default tanımlamak istediğimiz body, html, font-size stilleri gibi.

Tema dosyası;

App içindeki tüm stillendirilen component’larda artık theme.props ile tanımladığımız özelliklere erişerek tema üzerinden beslenen stiller tanımlayabiliriz.

Test:

Styled-Components kullanıyorsanız ui testlerini nasıl yapacağınızı merak ediyor olabilirsiniz. Jest için geliştirilmiş bir utility mevcut.

Kullanım:

```yarn add --dev jest-styled-components```

Styled-Components aynı zamanda React Native içinde kullanılabiliyor. Modern frontend uygulamalarında css bu tarz araçlarla ihtiyaçlarımıza uygun şekilde evrimleşiyor ve farklı kullanım tipleri ile çözüm üretilmeye çalışılıyor.

Henüz gelişmesi gerekiyor ancak hali hazırda styled-components kullanarak geliştirilmiş bir çok web uygulaması mevcut. Şu ana kadar deneyimlediğim üzere oldukça başarılı ve component yapısını sadeleştirip daha okunaklı hale getirdiğini söyleyebilirim.

Kaynaklar:

https://github.com/styled-components/styled-components