Css Naming Convention - BEM

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 လဲပြုလုပ်ရ လွယ်ကူစေပါတယ်။