Styling
Büyük Web Uygulamalarında, Ölçeklenebilir Styling için Sass, JSS veya TailwindCSS
Web Uygulaması geliştirirken adını sıkça duyduğumuz styling kütüphaneleri ve teknikleri hakkında ne gibi farklar olduğunu analiz edeceğim.
React, Vue, Angular veya Svelte benzeri kütüphaneler ile yazılım geliştirdinizde bileşen yapıları çok önemli bir noktaya oturuyor. Bu bileşen yapısının Scale (Ölçeklenebilir) bir yapıda olması için aşağıdaki konuların çok iyi anlaşılması gerekiyor.
- Bileşenin İç Yapısı
- Bileşenin Stillendirilmesi
- Bileşenin Testi
- Bileşenin Dokümantasyonu
- Bileşenin Çevresi ile iletişimi
- Bileşenin Layout içerisine yerleştirilmesi
Bugünkü yazımızda React bileşenlerin stillendirilmesi ve layout konuları üzerine duracağız.
Web uygulamaları geliştirirken bileşenlerimizin projede stillendirilmesi ölçeklenebilmesini sağlayacak, büyük projeler geliştirmemize olanak sağlayacak kütüphanelerden bazılarını analiz edelim.
CSS Pre and Post Processors
CSS daha güçlü kullanmamızı sağlayacak mixin,nesting ve utility fonksiyonları, plugin yapısı bulunan processor yani build sırasında yazdığınız kodu CSS dönüştüren transpiler tarzı araçlardır. Bu konuda daha önceden Why Web Dev Preprocessors are So Important? yazısını okumanızı öneririm.
Aşağıda belirttiğim download sayıları haftalıktır.
Özellikle bir UIX Designer ile çalışıyorsanız. Uygulamanıza özel bileşenler ve tasarımlar gerçekleştiriyorsa CSS en yakın kullanabileceğiniz kütüphaneler bunlardır. Aynı zamanda kullandığınız bileşen kütüphanelerini, açık kaynaklı kütüphanelerin CSS ezmek(override) istediğinizde bu kütüphaneler sizin büyük projelerde bir numaralı yardımcınız olur.
- Bunu modüler yapısı ile her bir bileşenin kendisine ait ayrı scss dosyası olabilir. Bu sadece bileşene ait styling diğer bileşenlerden ayrışımı sağlanır.
- Aynı zamanda ortak stillendirme için scss içerisinden import, mixin, include yeteneklerinden faydalanılır.
- Stillendirme dosyalarınını okunabilirliği DOM yapısındaki hiyerarşiye nested özelliği sayesinde çok benzer bir yapıya gelir. Bu da geliştiricinin okuduğu stilleri direk DOM yapısı ile eşleştirmesine imkan tanır.
- Son olarak webpack bu scss dosyalarını birleştirerek, boyutu küçültülmüş tek bir dosya haline getirmesini veya bileşenlerinizin sayfaya yüklenme durumlarına göre ayarlanmış hale getirir.
Sass her ne kadar bir çok avantaj sağlasada büyük ölçekli projelerde webpack tarafından birleştirilen bu css dosyalarında bileşen stillerinin karışmaması için BEM (Block. Element. Modifier) yöntemi kullanarak isimlendirmeler yapmaktan faydalanmak gerekir.
Block: Tek başına anlamlı UI elemanları (header, container, menu, checkbox …)
Element: Block bir parçası olan tek başına anlamı olmayan elemanlar (header.title, menu.item …)
Modifier: Block veya Elemanınn üzerindeki bir flag ve bu flag onun görünüşünü ve davranışını değiştirir. (disabled, hover, highlighted, checked …)
JSS (JS in CSS)
Aşağıda belirttiğim download sayıları haftalıktır.
- Style Components (2.9 M)
- Style JSX (1.7M)
- Emotion, (0.6M)
Madem bileşen temelli bir geliştirme yapıyoruz. Neden isimlendirme veya bileşen scope uğraşalım ki ? Neden ayrı styling dosyaları oluşturalım. Stillendirme de o bileşenin bir parçası ise direk CSS , bileşenin içerisinde JS ile aşağıdaki şekilde yazabiliriz.
Bu yöntem hem scope anlamında, hemde dinamiklik anlamında bir çok avantaj sağlar. Örneğin aşağıdaki Colorful Button örneğinde Emotion kütüphanesini kullandım.
Normal CSS yöntemlerinde JS class ekleyip çıkaracağım yerde, micro seviyede stillendirmede çok büyük avantajlar sağlıyor. Bu örnek React’ın kendi inline styling yöntemini de kullanabilirsiniz ama React’ın camelCased yapısı, CSS diliyle örtüşmüyor. Figma, Invision vb.. tasarım araçlarından aldığınız CSS kodlarını birde dönüştürmekle uğraşmanız gerekiyor.
Utility First CSS Frameworks
Aşağıda belirttiğim download sayıları haftalıktır.
- TailwindCSS (1 M)
Tailwind SaSS veya CSS de geliştiricilerin elinde olan stillendirme yeteneğinin kontrol edilemediğinin zaman içerisinde bakımının imkansız hale geldiğini bunun için Component Level CSS yerine Semantic CSS yazarak bunu ölçeklenmeden kaynaklı büyümeyi ve bakımı daha iyi yönetebileceğimiz CSS bir üst katmana taşıyan bir CSS Framework’tür
TailwindCSS anlamak için aşağıdaki a few thounds words yazısını okumanızı öneririm.
Tailwind normal CSS üzerine örülü bir alalıklar kümesi tanımlanmış durumda. Örneğin
Genişlikler: Siz pixel, em, rem cinsinden istediğiniz rakamı tanımlayabilirken burada sadece belli aralıklarda bunu kullanabiliyorsunuz.
Aynı konu Color, Typography ve Shadow içinde geçerli. Biraz Bootstap ve Bulma CSS Framework benziyor. Sizi belli sınırlandırmalar içerisinde tutarak stillendirme yapmanızı bu şekilde hem JS geliştiricisine daha yakım mantıksal bir dil oluşturmayı amaçlamış Adam Wathan.
Aşağıda TailwindCSS ait bir CheatSheet bulunuyor. Bundan faydalanarak uygulamalarınızı daha solid bir tasarımla geliştirebilirsiniz.
- Tailwind Cheat Sheet https://nerdcave.com/tailwind-cheat-sheet içerisinden TailwindCSS tanımlanmış CSS Semantic hızlıca görüntüleyebilirsiniz.
React UI Bileşen Kütüphaneleri
Aşağıda belirttiğim download sayıları haftalıktır.
- Material UI (2.1 M)
- Ant Design (0.6M)
- SemanticUI React (0.2M)
- ChakraUI (0.14M)
Uzun bir süredir Semantic UI kullanıyoruz. Bu kütüphaneyi oldukça beğeniyorum çünkü Material diğerlerine göre daha az özelliğe sahip, yani kullanıcı etkileşimlerinde çok fazla kendi bileşen animasyonları ve tepkimelerine sahip değil. Bu sayede UIX Designer hazırladığı tasarımları bu yapıya giydirmek daha kolay oluyor.
Fakat ChakraUI incelediğimde UI yapısı ve Theme açısından Semantic UI göre daha artı özelliklere sahip olduğunu farkediyorum. TailwindCSS benzer yapısı ile hazır UI bileşenlerinin bulunması birçok geliştirici tarafından farkedilmeye başlanmış durumda.
Özetle:
Web uygulaması geliştirme sırasında stillendirmede kullanacağınız kütüphanelerin birbirlerine göre artı ve eksi yanları var. Siz ihtiyacınız doğrultusunda bir kütüphane seçmeniz çok önemli;
- Gelişmiş özelliklere sahip yoğun bileşenlere ihtiyacınız var ise. Metarial UI, Ant Design, Semantic UI bileşen kütüphanelerini anlayıp onların design sistemi hangi yapı üzerine kurulmuş ise Sass, Less veya Emotion vb çalışacak yapıları oluşturmak.
- Landing sayfası tarzında Web Sayfasına yakın sayfalar oluşturmak için kullanacaksanız TailwindCSS
- Orta seviye bileşen kütüphanesi ile TailwindCSS benzeri bir tanımlama altyapısı düşünüyorsanız ChakraUI
- Tasarımcınız ile birlikte kendi design sisteminizi ve bileşenlerinizi yazacaksınız Sass+BEM veya JS in CSS yaklaşımlarını kullanabilirsiniz.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara (React UI Styling) erişmek için bu linke tıklayabilirsiniz.
