Different approaches

Different approaches for styling

CSS

CSS ကအခုဆို feature တွေတော်တော်တိုးလာပြီလို့ပြောလို့ရတယ် အရင်တုန်းကလို limitation တွေအများကြီးသိပ်မရှိတော့ဘူး။

ဒါပေမယ့် လက်တွေ့ project ထဲမှာ plain CSS ကိုပဲ သုံးမယ်ဆိုရင် ထည့်စဉ်းစားစရာရှိတယ်။

ဘာလဲဆိုတော့ class name တွေကို စဉ်းစားရတဲ့ ပြဿနာပေါ့။

ဒါက ဒီကနေ့အထိကြုံနေရတဲ့ ပြဿနာပါပဲ

name တွေကို မတူအောင်စဉ်းစားရတယ် ဖတ်ကောင်းအောင် အဓိပ္ပါယ်ရှိအောင် စဉ်းစားရတယ်

ဘယ်လောက်စဉ်းစားပါစေ တချိန်ချိန်မှာ အဲ့ဒီပြဿနာတွေက တက်အုံးမှာဖြစ်ပါတယ်။

စဉ်းစားရပြီဆိုကတည်းက အချိန်ကုန်ပါတယ် productive မဖြစ်တော့ပါဘူး။

Bootstrap

Bootstrap ဆိုတာကတော့ CSS Framework တွေထဲက တစ်ခုပေါ့။

အသင့်သုံးရလွယ်အောင် လုပ်ပေးထားတဲ့ component တွေအများကြီးရှိတယ်။

Utility class တွေလည်း ထိုက်သင့်သလောက် ထည့်ပေးလာတယ်။

ဘာမှထွေထူး customize လုပ်ဖို့မလိုရင် သုံးရလွယ်တယ် မြန်တယ်လို့ပြောလို့ရပါတယ်။

ပြဿနာကတော့ customize လုပ်လို့အဆင်မပြေပါဘူး လုပ်လို့ရပါတယ် မပြေပါဘူး။

Specificity တွေကို တော်တော်သုံးထားတာက customize လုပ်တဲ့အခါ မလိုအပ်ဘဲ အလုပ်ရှုပ်စေပါတယ်။

Utility class တွေကလည်း တခြား utility-first library တွေလောက်ကောင်းလားဆိုတော့ မကောင်းဘူးလို့ပဲ ပြောချင်ပါတယ်။

TailwindCSS

TailwindCSS ကတော့ utility-first CSS library တစ်ခုပေါ့။

utility-first ဆိုတဲ့အဓိပ္ပါယ်ကတော့ component တွေကိုအသားမပေးဘဲနဲ့

one line of CSS = one line of TailwindCSS class ပုံစံမျိုးနဲ့သွားတာမျိုးဖြစ်ပါတယ်

one line ထက်ပိုတာတွေလည်း ရှိပါမယ် အဓိကဆိုလိုရင်းကို သဘောပေါက်မယ်ထင်ပါတယ်။

Bootstrap လို အသင့်သုံး component တွေမရှိဘူး။ သာမာန် CSS ရေးသလိုဘဲရေးရတဲ့သဘောဖြစ်ပါတယ်။

ဘာကောင်းသွားသလဲဆိုတော့ class တွေပဲရေးရုံပဲဖြစ်တဲ့အတွက် class name စဉ်းစားရတဲ့ ပြဿနာငြိမ်းသွားပါတယ်။

Custom design တွေဖန်တီးတဲ့အခါမှာ တော်တော်ထိရောက်တယ်လို့ပြောလို့ရပါတယ်။ productive လည်းဖြစ်ပါတယ်။

React.js လိုကောင်မျိုးသုံးတဲ့အခါမှာ အသင့်သုံး component တွေလည်းရချင်တယ်၊ customize လုပ်ရလည်း အဆင်ပြေချင်တယ်၊

TailwindCSS လည်း သုံးချင်တယ်ဆိုရင် Shadcn/ui လိုကောင်မျိုးသုံးလို့ရပါတယ်။

Shadcn/ui ရဲ့ feature တွေအပြင် TailwindCSS ကိုအခြေခံထားတာဖြစ်လို့ သူ့ရဲ့ productive ကတော့ တော်တော်ကြီးကို ကောင်းတာလို့ပြောရမှာဖြစ်ပါတယ်။

CSS-in-JS

CSS-in-JS ဆိုတာကတော့ React.js မှာအသုံးပြုလေ့ရှိတယ် နည်းပညာတစ်မျိုးဖြစ်ပါတယ်။

JavaScript Component တွေထဲမှာ CSS ကိုတိုက်ရိုက်ရေးရတာမျိုးဖြစ်ပါတယ်။

Emotion ဆိုတဲ့ library ကိုနမူနာကြည့်လို့ရပါတယ်။

Component နဲ့ Styling နဲ့အတူတူထားတဲ့ပုံစံမျိုးဖြစ်လို့ Scoping, Isolation တို့လိုကောင်တွေကို

အလွယ်တကူရရှိစေပါတယ်။

ဒါ့အပြင် TypeScript first ဖြစ်လာတဲ့ ဒီနေ့ခေတ်မှာ Type-safe styles တွေရေးဖို့လည်း အဆင်ပြေလာပါတယ်။

Type-safe CSS-in-JS တွေထဲမှာတော့ StyleX ဆိုတဲ့ library ကတော်တော်လေး powerful ဖြစ်တာကို တွေ့ရမှာပါ။

StyleX ဆိုတာကတော့ Facebook, Instagram, Whatsapp, Threads တို့မှာ အသုံးပြုတဲ့ library တစ်ခုဖြစ်ပါတယ်။

Thinking in StyleX ဆိုတာကို သူ့ရဲ့ official website ကမှာသွားလေ့လာဖို့အကြံပေးချင်ပါတယ်။

Preprocessors

Preprocessor ဆိုတာကတော့ အခု modern CSS ကနေမပေးနိုင်တဲ့ limitation တွေကို အရင်တုန်းကနေ အခုထိအသုံးပြုနေတဲ့ နည်းပညာတစ်မျိုးဖြစ်ပါတယ်။

Sass,Less, PostCSS တို့လို language တွေနဲ့ ရေးပြီးတော့မှ CSS ကို compile လုပ်ရတဲ့နည်းပညာမျိုးဖြစ်ပါတယ်။

CSS feature တွေဘယ်လောက်ပဲစုံလာပါစေ CSS ကို programming language တစ်ခုလိုအသုံးပြုလို့မရပါဘူး။

Preprocessor တွေဟာ CSS feature တွေကို programming language သုံးရသလိုမျိုးရေးနိုင်တဲ့ power ရှိပါတယ်။

variables, functions, mixins, conditions, loopings တွေသုံးပြီးရေးနိုင်တဲ့ power မျိုးကိုဆိုလိုတာပါ။

သက်ဆိုင်ရာ BEM, OOCSS စတဲ့ convention တွေနဲ့ ပေါင်းစပ်ပြီး Design system တွေကို implement လုပ်လေ့ရှိကြပါတယ်။

ဥပမာ Bootstrap, TailwindCSS တို့လိုကောင်တွေကို ဒီလို preprocessor တွေနဲ့ ဖန်တီးထားတာဖြစ်ပါတယ်။

powerful ဖြစ်တဲ့အလျောက် configuration, build process, plugin ecosystem တွေကိုလေ့လာရတာကြောင့် learning curve မြင့်ပြီး complex ဖြစ်လာပါတယ်။ ဘယ်နေရာမှာမလို trade off တွေတော့ ရှိပါတယ်။

နောက် preprocessor တွေကို ကိုယ့် project ထဲမှာ ထည့်သုံးရင် သတိထားစရာလေးပြောပြချင်ပါတယ်။

ဘာလဲဆိုတော့ ဖိုင်တစ်ဖိုင်တည်းမှာ app တစ်ခုလုံးရဲ့ style တွေကို စုထည့်ထားတာမျိုးတွေ မလုပ်ဖို့ပါ။

LOC (lines of code) အရေအတွက်များလာတာနဲ့အမျှ ပြင်ရပြုရ တော်တော်ခက်လာပါတယ်။ ဒါကတော့ အသုံးပြုသူတွေရဲ့ အားနည်းချက်ဖြစ်လို့ သတိထားဖို့ပြောခြင်းဖြစ်ပါတယ်။

ဒါတွေကတော့ Styling နဲ့ပတ်သတ်ပြီးသိထားသင့်တာတချို့ကို အကျဉ်းချုံးဖော်ပြပေးခဲ့တာဖြစ်ပါတယ်။ ကျန်တဲ့အသစ်သစ်တွေကိုလည်း ကိုယ်တိုင်ဆက်လေ့လာသွားဖို့ အကြံပေးချင်ပါတယ်။