Bir React uygulamasını stilize etmenin birkaç yolu vardır. Her birinin kendi artıları ve eksileri bulunur. Bu makalede size stil kullanma yollarını ve en iyi seçeneğin ne olduğunu göstereceğim.

“Kendinize yapamayacağınızı söylerseniz, yapamazsınız.” (Dean Graziosi)

Bir React uygulamasını stilize etmenin birincil yollarından bahsedeceğim. Bunların arasında bana göre bir numara olan bir seçenek var. Bir yol seçerken iki önemli konuyu göz önünde bulundurmalıyız; ilk olarak her projenin farklı ihtiyaçları vardır. İkinci olarak yazılımın ana karakterleri olan geliştiriciler. Geliştiricilerin yetenek setlerini, projenin geleceğini vb. düşünmeliyiz. Uzun lafın kısası tüm bu şeyler akıllıca değerlendirilmelidir.

Başlayalım.

— INLINE STYLING (SATIR İÇİ STİL)

This is the most basic option. It’s just like coding HTML. Styling elements inline doesn’t require you to create a separate stylesheet.

ARTILARI 👍🏻

• Bence bu yolun hiçbir artısı yok.

EKSİLERİ 👎🏻

• Global olmadığı için kendinizi tekrar tekrar tekrar etmek.
• Kötü sözdizimi.
• Kodları kesinlikle okunamaz hale getirecektir.
• Çok zor refactoring.
• Animasyonlar, seçiciler gibi temel CSS özellikleri kullanılamaz.

Uygulama çok küçük olacaksa belki seçebilirsiniz, aksi takdirde bu seçeneği seçmemelisiniz.

— PLAIN CSS

Bu yol en yaygın yaklaşımdır. Kullanımı kolay ve anlaşılırdır. CSS’i başka bir dosyaya yazın ve bir bileşenin elemanını stilize etmek için içeri aktarın.

ARTILARI 👍🏻

• Değişkenler, gelişmiş seçiciler, animasyonlar vb. gibi tüm CSS özelliklerini içerir.
• Temiz ve anlaşılır.

EKSİLERİ 👎🏻

• Proje büyüdükçe benzersiz sınıf isimleri düşünmek zorlaşır.
• Kendinizi çok fazla tekrar etmek. SASS ile karşılaştırıldığında.
• Kapsamlı (scoped) değildir.
• İsimlendirmede çakışmalar olabilir.

Bu seçenek seçilebilir. Ancak projeyi büyük olarak tanımlıyorsanız bunu atlayın.

— SASS / SCSS

SASS, CSS için bir ön işlemcidir. Stil sayfaları büyüyor, daha karmaşık ve bakımı daha zor hale geliyor. İşte bir ön işlemcinin yardımcı olabileceği yer burasıdır. Sass, CSS’te henüz var olmayan iç içe geçme (nesting), mixins, kalıtım (inheritance) ve sağlam, bakımı kolay CSS yazmanıza yardımcı olan diğer şık güzellikler gibi özelliklere sahiptir.

ARTILARI 👍🏻

• CSS bir insansa, SASS Hulk’tır 😄 Sadece sahip olduğu özelliklere bakın.
• Daha iyi yapı. Kendinizi tekrar etmeyeceksiniz.

EKSİLERİ 👎🏻

• CSS gibi kapsamlı (scoped) değildir.
• Kurulum gerektirir. Kurulum için resmi siteye bakın.

— CSS MODULES

Bu aslında son iki seçeneğe (Css, scss) bir alternatiftir. Her şey aynıdır ancak bunu kullanarak CSS kodlarımız kapsamlı (scoped) olacaktır.

Basit bir kullanımı vardır. Diyelim ki Home.jsx adında bir dosyanız var, burada başka bir dosya oluşturun ve Home.module.scss adını verin. Ve bu dosyayı Home.jsx dosyasına import edin.

Bunu kullanarak sınıf isimlerimiz benzersiz olacaktır.

Naming style: fileName_className__[unique_identifier]. Örnek:

<div class="Home_home__9Ke73">

ARTILARI 👍🏻

• Kapsamlıdır (scoped).
• Benzersiz sınıf isimleri. Çakışma olmayacaktır.
• Kurulum gerektirmez.

EKSİLERİ 👎🏻

• Belki birden fazla sınıf ismi kullanmak yanıltıcı olabilir ama öğrenmesi kolaydır.

Birden fazla ve koşullu sınıf isimleri için classnames kullanılabilir.

— CSS in JS

React dosyasının içine, HTML gibi CSS yazabilirsiniz. React bunu mümkün kıldı. Bu kodlar da açıkça kapsamlı (scoped) olacaktır.

Kullanım örneği:

import styled from "styled-components";

const Button = styled.button`
  color: limegreen;
  border: 2px solid limegreen;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
`;

ARTILARI👍🏻

• Kapsamlıdır (scoped).
• Benzersiz sınıf isimleri. Çakışma olmayacaktır.
• Export ile yeniden kullanılabilir ve genişletilebilir olabilir. Çünkü artık javascript.
• İsimlendirme daha kolay olacaktır.
• Props’lar kolayca kullanılabilir. Bu açık ara en iyi şeydir

EKSİLERİ👎🏻

• Üçüncü parti kütüphaneler kullanılmak zorundadır.
• Dosyalar karmaşık olacaktır.
• Bence boğucu. Bunu kullanmayı sevmiyorum.

— ÜÇÜNCÜ PARTİ KÜTÜPHANE KULLANMAK

Dışarıda birçok CSS kütüphanesi ve hazır bileşen var. Tailwind, bootstrap, chakraUI ve materialUI gibi. Bunları kullanmak diğerlerine kıyasla daha kolay olabilir.

ARTILARI👍🏻

• Daha hızlı ve çok daha kontrol edilebilir stil oluşturma.
• Kapsamlıdır (scoped). Çünkü ‘classnames’ içine yazılıyor.

EKSİLERİ 👎🏻

• Stil ve HTML karışık. Bu kötü ve karmaşık görünüyor.
• Yeniyseniz öğrenmesi zaman alır.
• Kendinizi tekrar etmeniz muhtemeldir.

Ben ne kullanıyorum?

Genellikle SCSS ile CSS modüllerini kullanıyorum. Çünkü bu tüm isteklerimi karşılıyor, kolay ve yaygın.

İlk olarak assets içinde bir styles klasörü oluşturuyorum ve içinde animasyonlar, global, mixins ve değişkenler gibi global dosyalar oluşturuyorum. Ondan sonra bunları main.scss dosyasında birleştiriyorum ve index.css dosyasında import ile referans gösteriyorum.

Bu arada bir klasör yapısı makalem var. Okumak isterseniz aşağıdaki linke tıklamanız yeterli.

React Folder Structure Deep Dive

The folder structure matters in many ways; it eases understanding, refactoring, and sustainability. In this article…

Ve diğer her dosyanın bir .module.scss dosyası var. Bu sayede birden fazla seçeneğin avantajlarını korudum.

Sonuç

React uygulamasını stilize etmenin neredeyse her olası yolundan bahsettim. Her seçeneğin artıları ve eksileri var. Seçim yapmak zor olabilir. Ama daha önce de söylediğim gibi, akıllıca değerlendirilmeli.

Umarım bu rehber size yardımcı olur.

Yazar: Mahir Uslu

Tags