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

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

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

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

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 မှာ စာသားဟာ ဘယ်အရောင် ဖြစ်မလဲ ကြည့်ကြရအောင်။

<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` — အားလုံးကို ကျော်ဖြတ်သူ

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

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

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

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

Property အချို့ (ဥပမာ — color, font-family, font-size) ကို parent element မှာ ပေးလိုက်ရင်၊ အထဲက child element တွေက အလိုအလျောက် အမွေဆက်ခံ ပါတယ်။

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