Specificity & The Cascade (ဘယ် Rule က အနိုင်ရမလဲ)

The Cascade ဆိုတာ ဘာလဲ?

CSS ဆိုတဲ့ နာမည်မှာပါတဲ့ C ဟာ Cascading — “အဆင့်ဆင့် စီးဆင်းခြင်း” လို့ အဓိပ္ပာယ်ရပါတယ်။ Element တစ်ခုတည်းအတွက် Style Rule တွေ အများကြီး ထပ်ပြီးရေးမိတဲ့အခါ၊ Browser အနေနဲ့ ဘယ် Rule ကို အတည်ယူရမလဲ ဆိုတာ ဆုံးဖြတ်ဖို့ အောက်ပါ စည်းမျဉ်း (၃) ဆင့်ကို အသုံးပြုပါတယ်။

Importance: ရေးထားတဲ့ Rule မှာ !important ပါသလား။
Specificity: အသုံးပြုထားတဲ့ Selector ရဲ့ အလေးချိန် (တိကျမှု) က ဘယ်လောက်ရှိလဲ။
Source Order: အပေါ်က အချက်နှစ်ခုလုံး တူညီနေမယ်ဆိုရင်တော့၊ နောက်ဆုံးမှ ရေးထားတဲ့ Rule က အနိုင်ရမှာ ဖြစ်ပါတယ်။

Specificity ကို နားလည်လွယ်အောင် ကုမ္ပဏီတစ်ခုရဲ့ အမိန့်ပေးစနစ် နဲ့ တင်စားလို့ ရပါတယ်။ ရိုးရိုး ဝန်ထမ်းချင်း (Element) စကားပြောတာထက်စာရင် Team Lead (Class) ရဲ့ စကားက ပိုပြီး အာဏာရှိပါတယ်။ အဲဒီ Team Lead ထက်ကို Manager (ID) ရဲ့ စကားက ပိုမြင့်ပါတယ်။ အားလုံးရဲ့ အပေါ်မှာမှ CEO (Inline Style) ရဲ့ စကားက အနိုင်ရပါတယ်။ အဲဒီလိုပဲ ရာထူးပိုမြင့်တဲ့သူ ပြောတဲ့စကားက အတည်ဖြစ်သလို Specificity ပိုမြင့်တဲ့ Selector က အနိုင်ရသွားတာ ဖြစ်ပါတယ်။

Specificity ကို တွက်ချက်ခြင်း

Selector တစ်ခုစီတိုင်းမှာ သူတို့နဲ့ သက်ဆိုင်တဲ့ အလေးချိန် အသီးသီး ရှိကြပါတယ်။ အလေးချိန် ပိုများတဲ့ Selector က အနိုင်ရမှာပါ။

Selector အမျိုးအစား	ဥပမာ	အလေးချိန်
Inline style	`style="..."`	1000
ID	`#header`	100
Class / Attribute / Pseudo-class	`.btn` `[type]` `:hover`	10
Element / Pseudo-element	`div` `p` `::before`	1

CSS Specificity — selector အမျိုးအစားအလိုက် အလေးချိန်နှင့် တွက်ချက်ပုံ

လက်တွေ့ ဥပမာ

အောက်မှာ ပေးထားတဲ့ HTML Code လေးမှာ စာသားက ဘယ်အရောင် ဖြစ်သွားမလဲဆိုတာ လက်တွေ့ ကြည့်ကြရအောင်ပါ။

<p id="intro" class="lead">မင်္ဂလာပါ</p>

p            { color: black; }   /* အလေးချိန် = 1   */
.lead        { color: green; }   /* အလေးချိန် = 10  */
#intro       { color: blue; }    /* အလေးချိန် = 100 */

ရလဒ်: စာသားက အပြာရောင် (blue) ဖြစ်မယ်
→ #intro (100) က အားအကြီးဆုံးမို့ အနိုင်ရတယ်

Source Order (နောက်ဆုံး ရေးတာ အနိုင်ရခြင်း)

တကယ်လို့ Specificity တွေ တူညီ နေခဲ့ရင်တော့၊ ခင်ဗျားရဲ့ CSS ဖိုင်ထဲမှာ နောက်ဆုံး ရေးခဲ့တဲ့ Rule က အနိုင်ရသွားမှာ ဖြစ်ပါတယ်။

.btn { background: blue; }
.btn { background: red; }   /* ← ဒါ အနိုင်ရမယ် (နောက်မှ ရေးထားလို့) */

ရလဒ်: button က အနီရောင် (red) ဖြစ်မယ်

`!important` — အားလုံးကို ကျော်ဖြတ်သူ

Style တစ်ခုမှာ !important ကို ထည့်ရေးလိုက်ရင် Specificity အလေးချိန် ဘယ်လောက်ပဲ များနေပါစေ သူ့ကို ကျော်ဖြတ်ပြီး အနိုင်ရသွားမှာပါ။ ဒါပေမဲ့ ဒါကို အလွန်အကျွံ မသုံးဖို့တော့ အကြံပေးချင်ပါတယ် — ဘာလို့လဲဆိုတော့ နောက်ပိုင်း Code တွေ ပြန်ပြင်တဲ့အခါ Style တွေ Override လုပ်ရတာ အရမ်းကို ခက်ခဲသွားစေလို့ပါ။

p { color: blue !important; }   /* ဘယ် rule မှ ကျော်လို့ မရတော့ဘူး */

Style တစ်ခုက ကိုယ်ရေးထားတဲ့အတိုင်း အလုပ်မလုပ်တာကို တွေ့ရင် ချက်ချင်းကြီး !important သွားမထည့်လိုက်ပါနဲ့။ အရင်ဆုံး ဘယ် Selector က Specificity ပိုအားကြီးနေလဲ ဆိုတာကို သေချာ စစ်ဆေးကြည့်ပါ။
ID Selector (#) ကို Style ရေးတဲ့အခါ အများကြီး မသုံးပါနဲ့ — သူ့ရဲ့ Specificity က မြင့်လွန်းတဲ့အတွက် နောက်ပိုင်း Style ပြန်ပြင်ချင်တဲ့အခါ အခက်တွေ့နိုင်ပါတယ်။ Class Selector (.) ကိုပဲ အဓိကထား ဦးစားပေး သုံးသင့်ပါတယ် ခင်ဗျာ။
Specificity တွေ တူနေတဲ့အခါ နောက်ဆုံး ရေးထားတာက အနိုင်ရ တာ ဖြစ်လို့၊ CSS ဖိုင်ထဲမှာ ခင်ဗျားရေးထားတဲ့ Rule တွေရဲ့ အစီအစဉ်ကလည်း အရေးကြီးပါတယ်။

Inheritance (အမွေဆက်ခံခြင်း)

Property တချို့ (ဥပမာ — color, font-family, font-size စတာတွေ) ကို Parent Element မှာ သတ်မှတ်ပေးလိုက်ရင်၊ သူ့အထဲမှာရှိတဲ့ Child Element တွေကလည်း အဲဒီ Style တွေကို အလိုအလျောက် အမွေဆက်ခံ (Inherit) ရရှိသွားမှာ ဖြစ်ပါတယ်။

body {
  font-family: "Padauk", sans-serif;
  color: #333;
}
/* body အထဲက စာသား အားလုံး ဒီ font နဲ့ အရောင်ကို အလိုလို ရသွားမယ် */