အားလုံးပဲ မင်္ဂလာပါရှင့်။
ညီမကတော့ Spiceworks Myanmar Company တွင် Web Designer အနေနဲ့ ဝင်ရောက် အလုပ်လုပ်ကိုင်နေတဲ့ မဇင်နုထွေး ဖြစ်ပါတယ်ရှင့်။
ဒီတစ်ပတ်မှာတော့ “CSS Architecture” ဆိုတဲ့ ခေါင်းစဉ်နဲ့ ပတ်သက်တဲ့ အကြောင်းအရာတွေကို ညီမ သိရှိသလောက်၊ လေ့လာမိသလောက်လေးတွေကို မျှဝေပေးသွားပါမယ်။
CSS Architecture သို့မဟုတ် CSS design method ဆိုတာ CSS code တွေကို ပြန်လည်ပြုပြင်ထိန်းသိမ်းနိုင်မှုနှင့် code ရေးရာမှာ ပိုမိုပြီး မြန်ဆန်စေရန် HTML tag တွေကို class, id အမည်များ၏ သတ်မှတ်ပုံများကို ရည်ညွှန်းပါတယ်။ ၎င်းကို တစ်နည်းအားဖြင့်လည်း CSS convention လို့လည်း သုံးနှုန်းကြပါတယ်။
Website တစ်ခုမှာ page အရေအတွက် နည်းပြီး code ပမာဏလည်း သိပ်မများဘူးဆိုရင် ညီမတို့က naming နဲ့ပတ်သက်ပြီး အရမ်း စိုးရိမ်စရာမလိုပေမယ့် အကယ်၍ page များခဲ့မယ်ဆိုရင်တော့ naming တွေကို သေချာဂရုတစိုက်ပေးဖို့လိုပါတယ်။ ထို့အတွက်ကြောင့် CSS design method တွေကို ကောင်းစွာလေ့လာပြီး အသုံးပြုပေးရမှာ ဖြစ်ပါတယ်။
ဒါ့ကြောင့် အသုံးများပြီး အခြေခံကျတဲ့ CSS design method (၃) မျိုးကို အနည်းငယ်စီ ပြောပြပေးသွားပါမယ်။
Design method တွေကို တစ်ခုချင်းစီ မရှင်းခင်မှာ ဘာကြောင့် အရေးကြီးတာလဲဆိုတဲ့ အချက်လေးတွေကို အရင်ပြောချင်ပါသေးတယ်။ ယေဘုယျအားဖြင့် (၃)ချက် ရှိပါမယ်။
(၁) ပြုပြင်ထိန်းသိမ်းနိုင်မှုကို မြှင့်တင်ပေးပါတယ်။
ညီမတို့က project ရေးပြီးလို့ နောက်တစ်ကြိမ်အနေနဲ့ ဝင်ပြင်ရမယ်၊ ဝင်ရေးရမယ်ဆိုရင် CSS design method ကိုသာ မှန်ကန်စွာ စနစ်တကျအသုံးပြုပြီး ရေးခဲ့မယ်ဆိုရင် ကိုယ်မဟုတ်ဘဲ တခြား member ဖြစ်နေခဲ့ရင်တောင် ကိုင်တွယ်ရေးသားဖို့အတွက် ပိုမိုလွယ်ကူစေပါလိမ့်မယ်။
(၂) Page များတဲ့ project အနေနဲ့ဆိုရင်လည်း code တွေကမရှုပ်နေဘဲ ရှင်းရှင်းလင်းလင်း ဖြစ်နေစေပါမယ်။
ပုံမှန် page တစ်ခုကို ရေးရာမှာ ပြဿနာမဖြစ်နိုင်ပေမယ့် page များလာပြီး module တွေအနေနဲ့ ထုတ်ရေးရဖို့ ဖြစ်လာတဲ့အခါမှာတော့ naming တွေကို သဘောတူညီချက်နဲ့အတူ သတ်မှတ်ပြီး ပေးကြဖို့ အရေးကြီးပါတယ်။ သို့မှသာ တခြားသူအနေနဲ့လည်း နားလည်ရလွယ်ပြီး ရှင်းရှင်းလင်းလင်း ဖြစ်စေပါလိမ့်မယ်။
(၃) တစ်ယောက်ထဲအနေနဲ့မဟုတ်ဘဲ team အနေနဲ့ member အများသုံးပြီး ရေးမယ်ဆိုရင်လည်း ပိုမိုလွယ်ကူစေပါမယ်။
CSS design method ကိုသုံးပြီး member တစ်ဦးချင်းစီက တူညီတဲ့ပုံစံနဲ့ ရေးကြမယ်ဆိုရင် တစ်ယောက်တစ်မျိုးစီ ဖြစ်မနေတော့ဘဲ ပုံစံတူတဲ့ code တွေပဲ ဖြစ်နေပါလိမ့်မယ်။ Member များခဲ့မယ်ဆိုရင်လည်း code ရေးကြရာမှာ ပိုပြီး အဆင်ပြေပြေဖြစ်ပါလိမ့်မယ်။
အသုံးများသော CSS design method (၃) မျိုး
မတူညီတဲ့ company တွေ၊ team တွေ ရှိကြတာ ဖြစ်တဲ့အတွက် အသုံးပြုတဲ့ coding rule တွေ၊ method တွေ တူညီကြမှာတော့ မဟုတ်ပါဘူး။
အများသောအားဖြင့် အသုံးပြုကြတဲ့ method တွေကတော့
(၁) BEM (Block, Element, Modifiers)
(၂) OOCSS (Object Oriented CSS)
(၃) SMACSS (Scalable and Modular Architecture for CSS)
(၁) BEM (Block, Element, Modifiers)
BEM method ကတော့ (Block, Element, Modifiers) ဆိုတဲ့ element သုံးခုရဲ့ ရှေ့စကားလုံးတစ်ခုကို အတိုကောက်အနေနဲ့ ယူပြီး ခေါ်ဝေါ်ထားတဲ့ နည်းလမ်းဖြစ်ပါတယ်။
Block
Sections, containers တွေကို block အနေနဲ့ သတ်မှတ်ပါမယ်။
Element
Block အတွင်းမှာရှိတဲ့ child ကို ဆိုလိုပါတယ်။
Modifiers
Block, element တွေရဲ့ state နဲ့ condition တွေကို သီးသန့်အနေနဲ့ အထူးပြု ဖော်ပြရာမှာ သုံးပါမယ်။
Sample code အနေနဲ့ကတော့
block__element--modifier • .header__menu—active • .nav__list • .btn—orange
BEM နဲ့ပတ်သက်တဲ့ အသေးစိတ်အကြောင်းအရာကို လေ့လာချင်တယ်ဆိုရင်တော့ အောက်ပါ link မှာ လေ့လာလို့ ရပါမယ်။
https://css-tricks.com/bem-101/?ref=hackernoon.com
(၂) OOCSS (Object Oriented CSS)
OOCSS method ကတော့ code တွေကို module အနေနဲ့ ပြန်လည် အသုံးပြုနိုင်ပြီး ထိရောက်မှုရှိစွာ မြန်မြန်ဆန်ဆန်ရေးနိုင်တဲ့ ပုံစံမျိုးဖြစ်ပါတယ်။ ဒီ method ကတော့ ညီမအနေနဲ့ ပြောရမယ်ဆိုရင် page နည်းပြီး module ရေးရတဲ့ အပိုင်းတွေမှာ ပိုအဆင်ပြေပါတယ်။
Sample code အနေနဲ့ကတော့
#top {
padding-top: 100px;
}
.button {
padding: 10px 15px;
}
.h1 {
font-size: 14px;
}
.primary {
color: #fff;
}
OOCSS နဲ့ပတ်သက်တဲ့ အသေးစိတ်အကြောင်းအရာကို လေ့လာချင်တယ်ဆိုရင်တော့ အောက်ပါ link မှာ လေ့လာလို့ ရပါမယ်။
https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/?ref=hackernoon.com
(၃) SMACSS (Scalable and Modular Architecture for CSS)
SMACSS ကတော့ Scalable and Modular Architecture for CSS ရဲ့ အတိုကောက်အနေနဲ့ ခေါ်ဝေါ်တာဖြစ်ပြီး အသုံးများတဲ့ CSS design method တွေထဲက တစ်မျိုးဖြစ်ပါတယ်။
SMACSS မှာ CSS အမျိုးအစားတွေကို အောက်ပါအတိုင်း (၅) မျိုးဖြင့် ခွဲခြားဖော်ပြပြီး naming သတ်မှတ်ကြပါတယ်။
base
HTML tag တွေရဲ့ default style တွေကို reset လုပ်ပြီး base အနေနဲ့ ယူပါမယ်။
layout
ဒီ page (၁) ခု၊ section (၁) ခု အနေနဲ့ မဟုတ်ဘဲ တခြား page၊ section တွေမှာရော UI design တူမယ်ဆိုရင် layout အနေနဲ့ သတ်မှတ်ပြီး naming ပေးရာမှာ အားလုံးနဲ့အဆင်ပြေအောင် ပေးထားရပါမယ်။
module
Website တစ်ခုလုံးမှာ ရှိနိုင်တဲ့ ဘုံသုံးချင်တဲ့ module အပိုင်းတွေကို သေချာ naming ရွေးချယ်ပေးရပါမယ်။ ဥပမာ button, font-family, color အစရှိသဖြင့်ပေါ့။
state
State ကလည်း အရေးပါတဲ့ အချက်ထဲမှာ ပါပါတယ်။ Condition စစ်ပေးဖို့လိုတာတွေဆိုရင် ကိုယ်ပေးလိုက်တဲ့ class name ကို ကြည့်ပြီး နားလည်လွယ်မယ်ဆိုရင် တခြား member အတွက် ပိုအဆင်ပြေပါတယ်။ ကိုယ်က state ကို မတွေးဘဲ name ပေးလိုက်မယ်ဆိုရင် တခြားသူအတွက် အချိန်ပိုကြာစေပြီး အဆင်မပြေဖြစ်နိုင်ပါတယ်။
ဥပမာ is-active, is-disabled, is-error, is-success, …
theme
Base color နဲ့ main color ကဲ့သို့သော website တစ်ခုလုံးမှာသုံးရမယ့် style ကို ဆိုလိုပါတယ်။ Site တစ်ခုလုံးကို တခြားအရောင်တစ်ခု ပြန်ပြီး သုံးမယ်၊ ပြောင်းမယ်ဆိုရင် theme အနေနဲ့ အစထဲက သတ်မှတ်ပြီး ရေးထားပေးရင် ပြောင်းရတာ လွယ်ကူစေပါလိမ့်မယ်။ မသတ်မှတ်ထားခဲ့ဘူးဆိုရင် သုံးထားတဲ့ တစ်ခုချင်းစီရဲ့ နေရာတွေမှာ လိုက်ပြောင်းပေးနေရမှာ ဖြစ်ပါတယ်။
SMACSS နဲ့ပတ်သက်တဲ့ အသေးစိတ်အကြောင်းအရာကို လေ့လာချင်တယ်ဆိုရင်တော့ အောက်ပါ link မှာ လေ့လာလို့ ရပါမယ်။
https://www.toptal.com/css/smacss-scalable-modular-architecture-css
အထက်မှာ ဖော်ပြပေးခဲ့တဲ့ method တွေက တစ်ခုချင်းစီမှာတော့ အားသာချက်၊ အားနည်ချက်တွေ ရှိကြတာဖြစ်တဲ့အတွက် ဘယ် method ကတော့ အကောင်းဆုံးဆိုပြီးတော့ မပြောလိုပါဘူး။ Project ရဲ့ page အရေအတွက်နဲ့ member အရေအတွက် အပေါ်မူတည်ပြီး code ရေးတဲ့ ပုံစံလည်း မတူညီကြတာ ဖြစ်တဲ့အတွက် အခြေအနေအရ သုံးချင်တဲ့၊ ကြိုက်နှစ်သက်တဲ့ပုံစံလည်း ကွဲပြားနိုင်ပါတယ်။ ကွဲပြားမှုတွေရှိနေကြပေမယ့် ကိုယ့်ရဲ့ company, team အနေနဲ့ အသုံးပြုမယ့် method ကိုတော့ ဆွေးနွေးတိုင်ပင်ပြီး သေချာလေး စနစ်တကျ ချမှတ်ထားမယ်ဆိုရင် code ရေးရာမှာ ပိုပြီး အဆင်ပြေချောမွေ့ပါလိမ့်မယ်။
ပြောပြပေးခဲ့တဲ့ method တွေကို ဖတ်ရှုမိပြီး ဗဟုသုတတစ်ခုအနေနဲ့ အကျိုးရှိလိမ့်မယ်လို့ မျှော်လင့်ပါတယ်။ အချိန်ပေးပြီး ဖတ်ရှုပေးခဲ့ကြတဲ့အတွက် ကျေးဇူးတင်ပါတယ်။
