Coding

CSS Architecture

အားလုံးပဲ မဂၤလာပါရွင့္။

ညီမကေတာ့ 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 ေတြကို ဖတ္ရႈမိၿပီး ဗဟုသုတတစ္ခုအေနနဲ႔ အက်ိဳးရွိလိမ့္မယ္လို႔ ေမွ်ာ္လင့္ပါတယ္။ အခ်ိန္ေပးၿပီး ဖတ္ရႈေပးခဲ့ၾကတဲ့အတြက္ ေက်းဇူးတင္ပါတယ္။

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *