Forem: Kaung Htet

Css Naming Convention - BEM

Kaung Htet — Mon, 06 Feb 2023 07:52:24 +0000

Web developer ဆိုတာနဲ့ ကျွန်တော်တို့တွေ လုံးဝချန်ထားခဲ့လို့မရတာကတော့ css ပါပဲ။
css ဆိုတာတော်တော်လေးကို ကျယ်ပြန့် ပြီးတော့လေ့လာစရာတွေ မကုန်နိုင်လောက်အောင်ကို များပြားလှပါတယ်။ဆိုတော့ များပြားလှတဲ့ css ရေးသားဟန်တွေထဲကမှ css naming convention အကြောင်းလေး sharing လုပ်ပေးချင်ပါတယ်။ strict လုပ်ထားတဲ့ အရာတစ်ခုမဟုတ်လို့ မလိုက်နာလဲ ကိစ္စတော့မရှိပေမယ့် convention အတိုင်းလိုက်နာပီးရေးသားလိုက်ရင်တော့ အကျိုးကျေးဇူးတွေရလာနိုင်ပါတယ်။

BEM

BEM ဆိုတာကတော့ block, element, modifier သုံးမျိုးကို ပေါင်းစပ်ပီးတော့
class name ပေးတဲ့ method တစ်မျိုးဖြစ်ပါတယ်။

ကျွန်တော်တို့ မှာ section 3 ပိုင်းပါဝင်တဲ့ Home.html file တစ်ခုရှိတယ်ဆိုကြပါစို့။
ပါဝင်တဲ့ section တွေကတော့

Hero section
About section
Contact section တွေပဲဖြစ်ပါတယ်။

Block ဆိုတော့ ကိုယ်သုံးမယ့် section တွေရဲ့ parent container တွေကို ပေးတာသင့်တော်ပါတယ်။ဉပမာ ကျွန်တော်က Hero section ထဲမှာ button တစ်ခု ဆောက်ပီးတော့ အဲ့သည့် button ကို style လုပ်ဖို့ class name ပေးမယ်ဆိုရင် .hero-section-button ဆိုပီးတော့ပေးမှာဖြစ်ပါတယ်။ကျတော်တို့ website က dark-theme နဲ့ light theme ၂ခု လုပ်ထားတာမျိုးဆိုရင် .hero-section__button--light နဲ့ .hero-section__button--dark ဆိုပီးတော့ပေးမှာပဲဖြစ်ပါတယ်။ class name တွေကို ပြန်ခွဲကြည့်ရမယ်ဆိုရင် hero-section ဆိုတာ block (သို့) parent နဲ့သက်ဆိုင်တာဖြစ်ပီးတော့ button ဆိုတာကတော့ ဘယ်လို html element ကို သုံးထားသလဲဆိုတာကို ကိုယ်စားပြုပါတယ်။ နောက်ဆုံးက --light နဲ့ --dark တွေကတော့ modifier တွေပဲဖြစ်ပါတယ်။

modifier တွေကိုတော့ -- နဲ့နောက်ကနေပီးတော့ ဆက်တိုက်ပေးသွားလို့ရပါတယ်။
ဉပမာ button ကိုအသေးအကြီး ၂ခု ခွဲထားတယ်ဆိုရင်တော့
.hero-section__button--small--light
.hero-section__button--small--dark ဆိုပြီးတော့ ရေးလို့ရပါတယ်။

ကျွန်တော်တို့ က hero section ကို left, right ဆိုပီးတော့ ၂ပိုင်းခွဲထားတယ်ဆိုရင်
.hero-section__left__button--small--light
.hero-section__right__button--big--dark ဆိုပြီးတော့ ရေးလို့ရပါတယ်။

BEM ကို နိဂုံးချုပ်ရမယ်ဆိုရင်တော့ Block ဖြစ်တဲ့ parent section ကိုရှေ့ဆုံးမှာရေးပြီးတော့parent ထဲက child element တွေကို double underscore (__) ခံပြီးတော့
modifier တွေကိုတော့ (--) double hyphen နဲ့ရေးကြပါတယ်။

များသောအားဖြင့် developer တွေက project တစ်ခုဖြစ်လာဖို့ ပူပေါင်းလုပ်ဆောင်ကြရတာဖြစ်ပီးတော့ ထိုကဲ့သို့ convention တွေကို သတ်သတ်မှတ်မှတ်ထားပီးရေးသားတာကလဲ ပိုပြီး team နဲ့ ချိတ်ဆက်မိစေပီးတော့ maintain နဲ့ modify လဲပြုလုပ်ရ လွယ်ကူစေပါတယ်။

React component patterns

Kaung Htet — Mon, 06 Feb 2023 05:08:30 +0000

npx create-react-app

ဆိုတာကို teminal မှာရိုက်ထည့်လိုက်တာနဲ့ react နဲ့စတင်ထိတွေ့ရပါပီ
အထဲမှာ state တွေ event တွေစပီးတော့ ဖြတ်သန်းနေကြပီ ဆိုတော့ model တစ်ခုပွင့်လာဖို့ ပိတ်သွားဖို့ကိုလဲ true/false စတဲ့ boolean တွေနဲ့ ကိုင်တွယ်ရတော့မယ်။ model တွေများလာတာနဲ့အမျှ true/false တွေကလဲများလာမှာပဲဘယ်နားက model ကိုပိတ်ချင်တာ ဘယ် boolean ကိုပြောင်းရမယ် စသဖြင့်တွေလုပ်စရာများလာပီ။ react မှ မဟုတ်ဖူးတစ်ခြား vue ဆိုလဲ component တွေခွဲပီးရေးလို့ရတာပဲ ပြသနာက component တွေပွလာတာပဲ

ဆိုကြပါစို့ code တစ်ခုထဲမှာ dev ၂ယောက် ဝိုင်းရေးတယ်

တစ်ယောက်က component တွေကို မွနေအောင်ခွဲထားတယ်။ပီးတော့ပြန်ယူသုံးထားတယ်။သူ့အတွက်တော့အဆင်ပြေနေတယ်။ သူခွဲပီး သူယူသုံးထားတာ။အာ့တာကိုနောက်တစ်ယောက်က maintain ဝင်လုပ်တယ် ဘယ်နားကဘယ်လိုတွေခေါ်သုံးထားလဲသေချာမသိတော့ဘူး။ဖြတ်လို့လဲမရဘူး တစ်ခုနဲ့တစ်ခုနဲ့က props တွေတောက်လျှောက်ပေးထားတာ props drilling down တွေတစ်အားများတာ ၊ name တွေ consistent မဖြစ်နေတာနဲ့ လိုရင်းမရောက်သွားဘူး
တစ်ယောက်က သိပ်မခွဲဘူး၊ အပေါ်မှာတွေချည်းရှိသမျှ data တွေ event ကိုစုပီးတော့သုံးထားတယ်။code line တွေက ရှည်လျှားပီးတော့ တစ်ခုခုပြင်ဖို့ဆိုရင် ctrl+f ကိုနှိပ်ပီးမရှာရင် scroll ကိုတော်တော်လေးဆွဲရတယ်။

ဆိုတော့ အာ့လိုမျိုးကိစ္စတွေအတွက် maintain လုပ်ဖို့ ပိုလွယ်သွားအောင်၊
တစ်ဉီးနဲ့တစ်ဉီးလဲ ပိုပီး harmony ကိုက်သွားအောင်လို့ ဘယ်လိုပုံစံမျိုးတွေရေး၊ global မဟုတ်ရင် component ကိုဘယ်လိုခွဲ ဘယ်လိုနေရာမျိုးတွေမှာထည့်ထား၊ သက်ဆိုင်ရာ component အတွက်ပဲ data နဲ့ data transformation ကို ဘယ်လိုလုပ်, ဘယ်အပိုင်းနဲ့ ဘယ်အပိုင်းကို ခွဲထား စသဖြင့်ပြောဆိုနေတာတွေကို pattern လို့ခေါ်တယ်ဆိုကြပါစို့

Pattern က တစ်ယောက်နဲ့ တစ်ယောက် team တစ်ခုနဲ့ တစ်ခု အာဘော်တွေမတူကြတာကြောင့် တူဖို့တော့မဖြစ်နိုင်ပေမယ့် pattern တော်တော်များများတော့ရှိနေပါတယ်။သူ့အားသာချက်နဲ့ သူ့အားသာချက်တွေရှိနေပီးသားပါပဲ
React env မှာလဲ pattern တွေအများကြီးရှိတယ်။ အာ့ထဲကမှာ တော်တော်များများ ပြောနေကြတာတွေကို
ထုတ်လိုက်ရင်တော့

Container View pattern
Provider Pattern
Compound Component pattern ဒီ pattern ၃ခုကတော့ တော်တော်လေး popular ဖြစ်ပုံရပါတယ်

Container View Pattern

Container နဲ့ View ပါဝင်တာပါ။ Container ဆိုတာ ကျတော်တို့ရဲ့ data တွေ event တွေ data transformation တွေစတဲ့ flow တွေပါဝင်နေတဲ့နေရာကိုခေါ်ပါတယ်။ ပိုပီးမြင်သာအောင် ဉပမာပေးရမယ်ဆိုရင် api data fetching လုပ်တယ်ဆိုကြပါစို့ ဘယ်အချိန်မှာ data fetch လုပ်မလဲ/ ရလာတဲ့ data တွေကို ဘယ်လိုမျိုး ပြောင်းလဲမလဲ စတာတွေကိုလုပ်ပေးတဲ့နေရာဖြစ်ပါတယ်။ View ဆိုတာကတော့ ui ပါ။ သူက Container ကနေပေးလိုက်တဲ့ data နဲ့ eventHandler တွေကိုပေါင်းစပ်ပီးတော့ web page မှာ မြင်ရအောင် style တွေ လုပ်ပေးတာပါ။ View ထဲမှာ data တွေကို ပြန်လည်ပြင်ဆင်ခြင်းတွေမလုပ်ပါဘူး ပြင်ဆင်ချင်တာရှိရင် container ကိုလှမ်းခိုင်းပါတယ်။ view ကတောင်းဆိုတဲ့ eventHandler တွေပေါ်မှာမူတည်ပီးတော့ container ကလုပ်ပေးပီးတော့ ရလာတဲ့ data ကို view ကိုပြန်ပေးပါတယ်။ ဆိုတော့ ui ပြင်ချင်ရင် view ထဲမှာ အေးဆေးသွားပြင်လို့ရပါတယ်။ view မှာ ပြတဲ့ data မှားနေရင် container ထဲမှာ သွားပြင်ပါတယ်။ သီးသန့်စီ တာဝန်ယူမှု ခွဲလိုက်တာကြောင့် maintain လုပ်ရတာဖြစ်ဖြစ်/ အသစ်ထပ်ထည့်တာဖြစ်ဖြစ် သက်ဆိုင်ရာ file ထဲမှာ သွားလုပ်လို့ ရသွားလို့ developer အတွက်လဲ work load သက်သာစေပါတယ်။

The Provider Pattern

React ကိုရေးကြပီဆိုရင် component တွေ ခွဲရေးပီးတော့ ပြန်ပေါင်းကြတာပါပဲ။ component တွေခွဲရေးကြပီဆိုရင်တော့ component တွေမှာ ဖော်ပြဖို့ (သို့) component တွေကနေလုပ်ဆောင်ဖို့ data တွေ event တွေကိုပေးကြရတာပါပဲ။ ဆိုကြစို့ Main Component ကနေ ChildA နဲ့ ChildB ခွဲလိုက်တယ်ပေါ့။ child components တွေအတွက် သက်ဆိုင်ရာ data နဲ့ event တွေကို props တွေကနေပေးလိုက်ကြတယ်။ ChildA component အောက်မှာ SubChildA တစ်ခုရှိနေပြန်တယ်။SubChildA ကို ChildA ကတစ်ဆင့် props တွေပေးလိုက်ရပြန်တယ်။Nested ဖြစ်ရင် ဖြစ်သလောက် props တွေ ဆင့်ဆင့်ပီးတော့ပေးရမှာ။ အာ့လို အဖြစ်မျိုးကို props drilling down လို့ခေါ်ကြတယ်။parent နဲ့ child ကဝေးသွားရင်ဝေးသွားသလောက် bug တစ်ခုခုဖြစ်လာရင် props trace လုပ်ရတာ များသွားတက်တယ်။အခုလိုကြုံတွေ့လာပီဆိုရင် ကျတော်တို့က ChildA context တစ်ခုဆောက်ပီးတော့ ChildA အောက်က sub child အကုန်လုံးကိုdata နဲ့ event ကို provide လုပ်ပေးလို့ရတယ်။ Parent က Nested Child ကို data လိုက်ပေးစရာမလိုတော့ဘူး။အာ့လိုမျိုးလုပ်ဆောင်ချက်ကို လဲ provider pattern လို့ခေါ်ကြတာဖြစ်ပါတယ်။

Compound Component Pattern

Compound Component ဆိုတာကတော့ ရည်ရွယ်ချက်တစ်ခုစီအတွက်တည်ဆောက်ထားတဲ့ component pieces တွေကို ပေါင်းစပ်ပီးတော့ ကိုယ်အသုံးချလိုတဲ့ component တစ်ခုအဖြစ်ပြန်လည်တည်ဆောက်တာဖြစ်ပါတယ်။ ဉပမာ ကျတော်တို့ model box တစ်ခုလုပ်ကြတယ်ဆိုပါစို့ model box တစ်ခုမှာဆိုရင် overlay လို့ခေါ်တဲ့ opacity လျော့ထားတဲ့ layer တစ်ခုပါလေ့ရှိတယ်။ ပီးတော့ အလည်မှာ ကိုယ်ဖော်ပြချင်တဲ့ တစ်ခုရှိတယ်။ ကျတော်တို့ က model တစ်ခုပြချင်တိုင်း overlay ရယ် information ရယ်ကို ပြန်ပြန်ပီး တည်ဆောက်နေမယ့်အစား overlay ဆိုတာကို တစ်နေရမှာ ဆောက်ထားပီးတော့ သုံးလိုက်တိုင်း information ပဲထည့်ပေးစရာလိုပီးတော့ model box ပေါ်လာအောင်လုပ်ထားလို့ရတယ်။ ရည်ရွယ်ချက်တစ်ခုစီ လုပ်ထားတာဖြစ်လို့ background opacity လျှော့သုံးထားပီးတော့ လိုချင်တာကို focus လုပ်ပြထားဖို့လိုတိုင်း ခုနက overlay component မှာသွားပီး ပေါင်းစပ်အသုံးပြုလို့ရသွားပါတယ်။

code example ကြည့်ရန်