Photo by Tamara Bellis on Unsplash

Series for React Architecture

React Örnek Mimarisi — 8 (Own Styling and Naming)

Web uygulaması geliştirirken Styling (Sitillendirme) kısmı geliştiricileri en çok zorlayan konulardan bir tanesidir. Bu yazıda projenin kendi stillerini nasıl oluşturabileceğimiz üzerinde ki düşüncelerimi anlatmaya çalışacağım.

Web Uygulaması geliştirirken genelde hazır bir takım yapılardan faydalanırız.

• Fontlar
• Değişkenler (Padding, Border, Margin, Shadow vb…)
• Renk Paletleri
• Styling Utility Kütüphaneleri
• UI Bileşen, Harita ve Chart Kütüphaneleri
• Layout Kütüphaneleri
• Temalar

Yukarıda bahsettiğim tüm bunlar genelde 3rd Party ücretsiz(free) veya paralı kullanılacak şekilde projemize ekleriz.

1. Problem

Hazır paketleri eklerken ne gibi problemler oluşabilir ?

• Bu paketler içerisinde eklediğimizde bizim projemize ihtiyacı olmayan bir çok ekstra paket ile birlikte gelir. Kullanmayacağımız bileşenleri, renkleri, styling ile ilgili bir çok ekstra yanında gelmiş olur.
• Eklediğiniz bir UI kütüphanesinde istediğiniz bir bileşeni bulamadığınızda, aradığınız icon, icon seti içerisinde bulunmadığı durumlarda yeni NPM Paketleri, yeni icon setleri kullanarak sistemi hibrid bir yapı haline getiririz.

Yukarıda bahsettiğim 2 neden den ötürü Web uygulamanızın sadece ihtiyaç duyduğu Styling yapısını kendiniz kurgulayabilirsiniz.

2. Stillendirmeyi Kendimizin Yapması Zor mu?

Stilllendirme ihtiyaçlarını kendimizin belirlemesi çok mu zor ?

• Bence evet ama bunu başardığınızda her projenize özel bir altyapınız oluşmuş olacak, daha bakımı kolay, daha az yer kaplayan ve optimize sistemler geliştirebilirsiniz.
• Bu demek değil ki açık kaynaklı NPM paketleri kullanmayalım. Sadece büyük bütünleşik yapılar kullanmaktan kaçınarak daha ufak parçalar halinde yapılar kullanmak. Veya büyük yapılar kullansak da bunu mevcut styling yapısının üzerine inşaa edecek şekilde entegrasyonlarını yapmak.

3. Stillendirmeyi Nasıl Yapabiliriz ?

A. Metinler

Bir web uygulaması oluşturduğumuzda başlıklar, yazılar ve metinlerden oluşur bundan dolayı metinlerin yapısını bilmemiz ve bunların farklı kullanımları için Metin Değişkenleri / Kalıpları oluşturmamız gerekir.

• Kuş Bakışı CSS (4. Metinler)
• Fontları React Projesine Nasıl Dahil Ederiz ?
• Fontlarda hangi ölçek birimi ? CSS Units (pixel, em ve rem)
• Değişken yapısının tanımlanması (Light /Dark Mode)
• SaSS ile Preprocessor ile Değişken Kullanımı
• Metinlerin ilgili alana sıgmadığı durumlar React Wrap Balancer veya Tooltip gösterimleri
• i18n, Time Format, Currency Format vb… gösterim şekilleri
• Bu metinlerin kullanıldığı yerlere göre Header, SubHeader, Link, Body, Tab Name, Düğme vb… yerlerde alabilecekleri değerler kümesi..

B. Renkler

Web uygulamamız bileşen arkaplan renkleri, metin renkleri vb bir çok yerde renklere ihtiyacımız vardır, bu renklerin nasıl kullanılacağı, nasıl isimlendirileceğinin belirlenmesi gerekiyor;

• Renk Modelleri (RGB, CMY, HSV, HSL)
• Değişken yapısının tanımlanması (Light /Dark Mode) CSS ile Değişken tanımlama
• SaSS ile Preprocessor ile Değişken Kullanımı ve Renk Değişkenleri üzerinde
• Design System Nedir ? (Color Part)
• Hazır Renk palatleri veya Renkler üzerinde işlem yapabilmenizi sağlayan kütüphaneler bulunuyor RadixColors, D3js Color Scales, AdobeColors vb. , Chroma.js
• Neticede renklerin hangi bileşenlerde nasıl kullanılacak ise bunların öncesinde tanımlanması ve isimlendirilmesi gerekmektedir.

C. Iconlar

Web uygulamalarımız oluşturan bir önemli konuda iconlar,

• Iconları React Projesine Nasıl Dahil Ederiz
• Iconların React Projesinde Yönetilmesi

D. Resimler ve İllistrasyonlar

• Resim Dosyaları hangi boyutta ve formatta olması lazım
• Resimlerin Aspect Ratio’sunu koruyarak nasıl göstereceğiz.
• Resimlerin yüklenmesini nasıl gerçekleştireceğiz SRC kısmını nasıl tanımlayacağız
• Resimler üzerinde efektleri nasıl uygulayacağız.

E. Bileşenler, Chartlar ve Harita ..

Piyasada kullanabileceğiniz hazır bir çok bileşen , chart ve harita kütüphanesi bulunuyor. Çoğununda kendi Design System, Theme yapısı, Renkleri ve Iconları bulunuyor.

• Burada karşımıza çıkacak olan ya var olan yapıları kullanması konusunda UIX Designer ikna etmek,
• Bunun olmadığı durumda Bileşen kütüphanelerinin mevcut yapısını Figma , Invision, Zeplin vb araçlardaki tasarımlara benzer hale getirmektir.

F. Layoutlar

• Bu kısım bazen bileşen kütüphaneleri içerisinde yer alırken, bazende Flex ve Gridler ile yazılım geliştiricilerin gerçekleştirmesi gerekir. Bu gibi durumlarda
• Layout düzgün bir şekilde isimlendirilmesi
• Layout’un responsive durumlar için ayarlanması
• Child elemanların bu layout içerisine düzgün şekilde yerleştirilmeleri gerekiyor.

4. Stillendirme İçin Hangi Araçları Kullanalım ?

Yukarıda bahsettiğimiz Metin, Renk, Icon, Image, Bileşen ve Layoutlar için stillendirme yöntemlerinden bazılarını kullanmamız gerekiyor.

1. SaSS, CSS gibi araçlar ile bileşenlerinizi isimlendirerek kullanmak.
2. Tailwind, Bulma, WindiCSS gibi Atomic CSS kalıplar üzerinden bileşenleri ve UI Tasarlamak. (Atomic CSS Nedir ?)
3. JS in CSS ile JavaScript içerisinde bir takım CSS yazarak, bileşenleri design etmek.

Bu 3 konuda daha önceden yazmış olduğum Büyük Web Uygulamalarında, Ölçeklenebilir Styling için Sass, JSS veya TailwindCSS blog yazısında bahsettiğim gibi yukarıdaki yapılardan bir tanesini seçerek ilerleyebilirsiniz.

Benim buradaki tercihim işin gelme şekline ve ihtiyaçlarına göre değişecektir.

• 1 numaralı yöntemi (SaSS, CSS)projenizde Tasarımcınız/UIX Designer’lar bulunuyor ise ve bu kişiler Product Manager ile birlikte ürünüze özel bir tasarımı hazırlayıp bunu size Figma, Invision üzerinden aktarıyor ise tercih edeceğiniz bir yöntemdir.
• 2 numaralı yöntemi (Tailwind, Bootstrap) projenizde bir tasarımcı bulunmuyor ve siz FullStack olarak müşterinizin ürününü hızlı bir şekilde çıkarmak istiyorsunuz, Tasarım kaygıları ile uğraşmadan hızlı , atomik yapılarla, emin bir şekilde uygulamanızı stillendirmek istiyorsanız bu yöntemi tercih edebilirsiniz. Bunun dezavantajı UI ların birbirine çok benziyor olması
• 3 numaralı yöntemi (CSS in JS) projenizde tasarımlar etkileşim ile sürekli değişiyor ve dinamik bir yapıda Paint Tool, Drawing Tool, Flow Tool vb… UI araçları üretiyor iseniz CSS in JS size dinamik stilllendirme konusunda büyük esneklikler sağlar.

5. (SaSS, CSS yönteminde) İsimlenlendirme Metodu

Benim Sass ve CSS için tercih ettiğim yöntem BEM isimlendirme modelidir. BEM isimlendirme Modeli temelde 3 kısımdan oluşur. Web Uygulamasını birbirini kapsayan (compose) eden ağaç yapısındaki bir bileşen organizasyonu olarak düşünürsek.

Her bir bileşeni ister Page, ister PageComponents, ister Platform Components olsun aslında hepsi kendi ismi ile olan bir klasör içerisinde kendi ismine ait bir .jsx ve .scss uzantılı dosyalarda tanımlanır.

Not: Page, PageComponents ve Platform Components daha iyi anlamak için React Örnek Proje Mimarisi — 2 blog yazısını okuyabilirsiniz.

• App klasörü (App.jsx, App.scss)
• CompA klasörü (CompA.jsx, CompA.scss)
• CompB …
• vb..

şeklinde her bir bileşen için kapsayıcı bir alan oluşturuyoruz. Burada en büyük problemimiz; JSX içerisinde geçen HTML elemanlarına karşılık gelen Styling (ClassName) isimlendirmesinin nasıl bir standart içerisinde gerçekleştirileceği.

BEM Modeli bunun için güzel bir öneri sunuyor.

• B → (Block)
• E → (Element)
• M → (Modifier)

Yukarıda bahsettiğimiz her bir bileşenimiz CompA, CompB …. → Block , Blokların içerisinde yer alan div, span vb… HTML yapıları ile veya başka blockların belli görseller oluşturmak için verdiğimiz sınıf styling. → Element, Bu elementlerin veya Blockların farklı farklı durumları (Hover, Enabled, Disabled, Focus vb.. ise bunların → Modifier durumları

BEM Info Key Concept bu konuyu daha net bir şekilde anlatıyor. Aşağıdaki resimde blokları, elementleri ve modifier görebilirsiniz.

BEM Info Key Concept

Gelin birlikte analiz edelim.

• Öncelikle Head Block yapısı bulunuyor.
• Bunun içerisinde TabMenu, Logo, Search ve Auth Block bulunuyor
• AuthBlıck içerisinde TextInput ve PasswordInput ve Button Block bulunuyor
• TabMenu Block içerisinde Elementleri içeriyor.
• Elementlerinde farklı farklı state (durumları) onların Modifier belirtiyor.

Not: Modifier bir block ait olabilir bir elemente da ait olabilir. Örneğin;

button-disabed:{}
button-enabled:{}
tabmenu__tab--active:{}
...

6. Proje’de Stillendirmenin Yazılım Geliştirme Sürecine Entegrasyonu.

Bu konuda daha önceden yazılım 3 farklı türde yazılım geliştirme yaparken

• Refactoring
• Bug Fix
• Feature Development

Bunun Figma/Invision veya tasarım yapısı üzerinde nasıl olması gerektiği konusunda React Örnek Proje Mimarisi — 5 (Figma vb.. Tasarım Yapısı) blog yazısını paylaşmıştım.

Bu yazı ilerleyen, gelişen ve değişen yazılım projesini tasarım ile nasıl sync tutabileceğimiz üzerine hazırladığım örnek bir çalışmaydı.

Referanlar

• https://en.bem.info
• https://sass-lang.com/styleguide/code
• https://bradfrost.com/blog/post/css-architecture-for-design-systems/
• https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/
• https://www.freecodecamp.org/news/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849/
• https://www.hongkiat.com/blog/css-writing-methodologies/

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.