CSS in JS and CSS Module

css-in-js-module.md

CSS in Modern Web Projects

Web Project တွေအတွက် CSS ကုဒ်တွေ ရေးသားတဲ့အခါ External CSS, Internal CSS, Inline CSS စသဖြင့် ပုံစံအမျိုးမျိုး ရေးသားလို့ရတာကို သိရှိကြပြီး ဖြစ်ပါလိမ့်မယ်။ ကျွန်တော်သင်ကြားပို့ချနေတဲ့ Professional Web Developer Course မှာဆိုရင် CSS ရဲ့ အဓိကအားသာချက်ဟာ HTML Markup (Content) နဲ့ Style ကို ခွဲခြားရေးသား နိုင်ခြင်းဖြစ်ကြောင်း ထည့်သွင်း ရှင်းပြလေ့ရှိပါတယ်။ ဒီလိုခွဲခြား ရေးသားနိုင်တဲ့အတွက် Reusable ခေါ် ပြန်လည်အသုံးပြုနိုင်တဲ့ Style Sheet များနဲ့ Markup နဲ့ Style ကို သီးခြားခွဲပြီး စီမံနိုင်မှုတို့ကြောင့် ပြုပြင်ထိမ်းသိမ်းရ လွယ်တဲ့ကုဒ်ကို ရရှိစေတယ်ဆိုတာကိုလည်း ထည့်သွင်း ရှင်းပြရပါတယ်။

ဒါပေမယ့် React အပါအဝင် ခေတ်ပေါ် JavaScript Framework တွေ ထွက်ပေါ်လာခြင်းနဲ့အတူ ချည်းကပ်ပုံတွေလည်း ပြောင်းလဲလို့ လာခဲ့ပါပြီ။ အရင်က တစ်ကူးတစ်က ခွဲခြားရေးသားရတဲ့ CSS ကုဒ်တွေကို HTML တွေထဲမှာ ထည့်သွင်းရေးသားလာကြပြန်ပါပြီ။ အရင်က အထူးအလေးပေး ရှောင်ရှားရတဲ့ Inline Style ရေးထုံးကိုလည်း အခုအခါ အသုံးပြုကြဖို့ တိုက်တွန်းလာကြပြန်ပါပြီ။ ဘာကြောင့် ဒီလိုတွေ ပြောင်းလဲလာသလိုဆိုတာကို ရှင်းပြရမယ်ဆိုရင် ပေရှည်ပါလိမ့်မယ်။

အတက်နိုင်ဆုံး လိုရင်းတိုတို ပြောရရင်တော့... ခေတ်ပေါ် Web Project တွေဟာ သီးခြားစီရပ်တည်နိုင်ပြီး ပြန်လည်အသုံးပြုနိုင်တဲ့ Component တွေကို ပေါင်းစပ်တည်ဆောက်လာကြပြီ ဖြစ်ပါတယ်။ ဒီတော့ ဒီလိုသီးခြားရပ်တည်နိုင်တဲ့ Independent Component တွေ တည်ဆောင်တဲ့အခါ သူ့အတွက် Style တွေကို အခြား Component တွေအတွက် Style တွေနဲ့ ရောမရေးသင့်တော့ပါဘူး။ သူ့အတွက် Style ကို သူ့အတွက်ပဲ သီးသန့် ရေးပေးရမယ်ဆိုတဲ့ သဘောပါ။ ပြန်လည်အသုံးပြုနိုင်တဲ့ Reusable Component ဖြစ်ဖို့ဆိုရင် သူ့အတွက် Style ဟာ သူ့ထဲမှာ တစ်ခါတည်း တွဲပါနေဖို့ လိုတယ်ဆိုတဲ့ သဘောလည်း ဖြစ်လာပြန်ပါတယ်။ ဒီလိုအပြောင်းအလဲတွေကြောင့် CSS တွေကို သက်ဆိုင်ရာ Component ကုဒ်ဖြစ်တဲ့ HTML တွေ JavaScript တွေနဲ့ တစ်ခါတည်း ရောရေးလာကြတဲ့ သဘောပါ။

ဒီနေရာမှာ ထင်ရှားတဲ့ ရေးထုံးနှစ်မျိုး ရှိနေပါတယ်။ ပထမတစ်မျိုးက CSS-in-JS ဖြစ်ပြီး နောက်တစ်မျိုးကတော့ CSS Module ပဲဖြစ်ပါတယ်။

CSS-in-JS

CSS-in-JS အကြောင်းပြောမယ်ဆိုရင် React JavaScript Framework ရဲ့ CSS Style တွေ စီမံပုံအကြောင်း အနည်းငယ် ပြောဖို့လိုပါလိမ့်မယ်။ ပုံမှန် HTML Element တစ်ခုအတွက် Inline Style တွေကို အခုလိုရေးသားရပါတယ်။

<a style="color: red; background-color: yellow">

React Component တွေမှာတော့ ဒီလို ရေးသားအသုံးပြုကြလေ့ရှိပါတယ်။

<Link style={{color: 'red', backgroundColor: 'yellow'}}>

သို့မဟုတ် ဒီလိုလည်း ရေးကြပါတယ်။

const LinkStyle = {
    color: 'red',
    backgroundColor: 'yellow'
}

<link style={LinkStyle}>

ရိုးရိုး CSS Syntax အစား JSON ရေးထုံးကို ပြောင်းလဲအသုံးပြု ရေးသားလိုက်ခြင်းပဲ ဖြစ်ပါတယ်။ ဒီလိုရေးသားလိုက်တဲ့အတွက် ရရှိလာတဲ့ အားသာချက်တွေထဲမှာ အရေးအကြီးဆုံး အချက်ကတော့ CSS Property အဖြစ် JavaScript Expression တွေ ထည့်သွင်း အသုံးပြုနိုင်သွားခြင်းပါ။ ဥပမာ -

const LinkStyle = {
    width: 12 / 4
}

<link style={LinkStyle}>

CSS ရဲ့ Declearative ကုဒ်ကို JavaScript ရဲ့ Imperative/OOP ကုဒ်နဲ့ ပေါင်းပေးလိုက်လို့ ကျားကိုအတောင်တပ်ပေးတယ်ဆိုတာ ဒါမျိုးကို ခေါ်တာလို့ ဆိုနိုင်ပါတယ်။ ဒါကို မကြိုက်တဲ့သူတွေလည်း အများကြီးရှိနေပါတယ်။

အရင်ကဒီလိုလုပ်ဆောင်ချက်တွေ ရရှိဖို့အတွက် SASS တို့ LESS တို့လို CSS Pre-processor နည်းပညာတွေကို ကြားခံအသုံးပြုခဲ့ကြရာက၊ အခုတော့ ခပ်ရှင်းရှင်းပဲ JavaScript ထဲ တိုက်ရိုက်ထည့်ရေးလိုက်တာဖြစ်လို့ ရိုးရိုးလေးတဲ့ ဆန်းကျယ်သွားစေတယ်လို့ ဆိုရမှာပါ။

CSS Module

နောက်ထပ်အသုံးများလာတဲ့ နည်းကတော့ CSS Module ဖြစ်ပါတယ်။ ဒီနည်းပညာကို အသုံးချလိုရင်တော့ Webpack လို Module Bundler နည်းပညာတွေကို အသုံးပြုဖို့လိုပါလိမ့်မယ်။ ဒီနေရာမှာ အသေးစိတ်တော့ မဖော်ပြနိုင်ပါဘူး။ ရေးထုံး သဘောသဘာဝကိုပဲ ဖော်ပြနိုင်မှာပါ။ ဒီလိုပါ...

CSS ကုဒ်တစ်ချို့ကို Link.module.css ဖိုင်ထဲမှာ အခုလိုရေးသားထားတယ် ဆိုပါစို့။

.primary {
    color: red;
    background: yellow;
}

နမူနာအနေနဲ့ နောက်ထပ် Button.module.css ဆိုတဲ့ ဖိုင်တစ်ခုလည်း ရှိသေးတယ်ဆိုကြပါစို့။

.primary {
    color: red;
    background: blue;
}

ရိုးရိုး HTML ရေးထုံးအတိုင်း ရေးမယ်ဆိုရင် ဒီလိုဖြစ်ပါလိမ့်မယ်။

<link rel="stylesheet" href="Link.module.css">
<link rel="stylesheet" href="Button.module.css">

<a class="primary">

<a> Element အတွက် primary ဆိုတဲ့ class ကိုအသုံးပြုတဲ့အခါ Link.module.css ထဲက .primary လည်း သက်ရောက်မှာဖြစ်သလို Button.module.css ထဲက .primary လည်း သက်ရောက်နေမှာပဲ ဖြစ်ပါတယ်။

CSS Module ရေးထုံးမှာတော့ JavaScript ကုဒ်ကနေ အဲ့ဒီ CSS ဖိုင်ကို အခုလို Import လုပ်ယူ အသုံးပြုနိုင်မှာ ဖြစ်ပါတယ်။

import LinkStyle from './Link.module.css'
import ButtonStyle from './Button.module.css'

const Link = `<a class="${LinkStyle.primary}">`
const Button = `<a class="${ButtonStyle.primary}">`

မြင်တွေ့ရတဲ့အတိုင်း LinkStyle.primary နဲ့ ButtonStyle.primary ဆိုပြီး မိမိသတ်မှတ်လိုရာကို တိတိကျကျ ရွေးချယ်သတ်မှတ် အသုံးပြုနိုင် သွားခြင်းပဲဖြစ်ပါတယ်။ ဒီလို ရွေးချယ်လို့ရအောင် Module Bundler က နောက်ကွယ်မှာ ဘာတွေဘယ်လို လုပ်သွားတာလဲ ဆိုတာကိုတော့ ထည့်မပြောတော့ပါဘူး။ နားရှုပ်စရာ ဖြစ်သွားမှာ စိုးလို့ပါ။ စိတ်ဝင်စားရင် ကိုယ်တိုင် ဆက်လက်လေ့လာကြည့်လိုက်ပါ။

Conclusion

အခုလို ပြောင်းလဲလာတဲ့ ရေးထုံးရေးနည်းရေးဟန်တွေဟာ စိတ်ရှုပ်ဖို့ ကောင်းသလို စိတ်ဝင်စားဖို့လည်း ကောင်းပါတယ်။ ကြိုက်တဲ့သူလည်း ရှိတယ်။ မကြိုက်တဲ့သူလည်း ရှိတယ်။ တစ်ချို့နည်းတွေက ရေရှည်တည်တံ့နိုင်သလို အချို့နည်းတွေကတော့ တစ်ချိန်မှာ ကွယ်ပျောက်သွားနိုင်ပါတယ်။ ဒီကနေ့ သိပ်ကောင်းပါတယ်ဆိုတဲ့ Best Practice ဟာ မနက်ဖြန် မသုံးသင့်တဲ့ Deprecated ဖြစ်သွားနိုင်ပါတယ်။ အပြန်အလှန်အားဖြင့် ဒီနေ့ မရေးသင့်ဘူးဆိုတဲ့ ရေးထုံးက နောက်နေ့မှာ ထင်ရှားလူကြိုက်များနေတာမျိုးလည်း ဖြစ်နိုင်ပါသေးတယ်။

ဘာပဲဖြစ်ဖြစ် ဝက်ဖြစ်မှတော့ ရွံ့ကြောက်နေလို့ မဖြစ်ပါဘူး။ ကျွန်တော်တို့အနေနဲ့ လေ့လာစရာရှိတာကို မပြတ်ဆက်လက် လေ့လာနေကြရမှာပဲ ဖြစ်ပါတော့တယ်။