Ang Cascade, Inheritance, at Specificity

Ang cascade ay isang algorithm na ginagamit ng browser para malaman kung paano pagsasama-samahin ang mga style rule mula sa iba’t ibang locations. Ito ang mismong core ng CSS, kaya ito tinawag na Cascading Style Sheets.

Habang gumagawa ka ng websites, mapapansin mo na may ilang kaso kung saan hindi gumagana ang mga style rules na ginawa mo. Kadalasan na, nangyayari ito dahil may dalawa ka o higit pang style rules na potentially ay puwedeng mag-apply sa element, at dahil dito, nagko-conflict sila. Ginagamit ng browsers ang cascade at ang specificity (isa pang concept na kalapit din ng cascade) para malaman kung aling style rules ang ia-apply nito sa mga element kapag nagkaroon ng conflict. At mahalaga na maintindihan mo kung paano ito gumagana para malaman mo kung bakit minsan ay hindi nangyayari ang gusto mong gawin sa CSS.

Isa pang konsepto na dapat mong malaman ay ang inheritance. Nangyayari ito kapag nai-inherit o namamana ng isang element ang CSS styles na nasa parent element nito. Puwede rin itong maging dahilan ng unexpected na styles sa design mo.

Ang cascade

Sa madaling sabi, dahil sa cascade, mahalaga na pag-isipan natin ang pagkakasunod-sunod ng ating mga style rules. Kapag gumawa ka ng dalawang style rules na may magkaparehong selectors, halimbawa, ia-apply ng browser ang pinakahuling style na inilagay mo sa CSS dahil sa cascade. Tingnan ang halimbawang ito.

See the Pen Cascade with same specificity by Francis Rubio (@maniczirconium) on CodePen.

Dahil parehong h1 ang selector ng dalawang style rules na ito, magkakaroon dapat ng conflict sa styles. Pero dahil sa cascade, pinipili ng browser ang huling style rule.

Ang specificity

Ang specificity ay ang sukat kung gaano ka-specific ang selector ng isang style rule. Ginagamit din ito ng browser para malaman kung aling style ang dapat nitong gamitin kapag nagkaroon conflict. Tingnan natin ang susunod na example:

See the Pen Specificity by Francis Rubio (@maniczirconium) on CodePen.

Sa example na ito, parehas lang na tumutukoy sa iisang element ang .my-heading at h1 selector. Kung susundin ang cascade, magiging blue sana ang color ng text dahil iyon ang huling nakalagay sa code. Pero ayon sa specificity rules natin, mas specific ang class selector kaysa sa type selector. Bakit?^[1]

May order o ranking ang browser para malaman kung aling mga selectors ang mas specific kaysa sa iba. Sa ranking na ito, nasa top 1 ang mga declaration sa style="" attribute, kaya ito ang madalas na mag-a-apply sa element kapag may conflict.

1. Styles sa loob ng style="" attribute (pinaka-specific)
2. ID selectors (e.g. #my-id)
3. Class selectors (e.g. .my-class), attribute selectors (e.g. [type=radio]), at pseudo-classes (e.g. :hover, :focus)
4. Type selectors (e.g. h1, p) (least specific), at pseudo-elements (e.g. ::before, ::after)

Ang !important

Sa ilang cases, naglalagay tayo ng declaration sa style="" attribute ng HTML tag natin, pero gusto nating i-override iyon sa CSS. Isang way para magawa ito ay ang paggamit ng !important declaration. Tingnan ang halimbawang ito.

See the Pen Overriding inline styles with !important by Francis Rubio (@maniczirconium) on CodePen.

Sa example na ito, nag-set tayo ng color sa style attribute ng h1:

<h1 style="color: red;">This is a red headline</h1>

Sa unang rule na inilagay natin sa CSS, sinubukan nating baguhin ang kulay ng text at gawin itong blue:

h1 {
  color: blue;
}

Pero hindi ito gumagana dahil, ayon sa rules natin ng specificity, mas specific ang mga declaration na nasa loob ng styles="" attribute. Kaya para ma-override iyon, gumamit tayo ng !important declaration sa pangalawa nating rule:

h1 {
  color: green !important;
}

Ngayon, makikita na natin sa browser na in-override nito ang kulay ng text. Naging green na ito, mula sa red na naka-set sa style="" attribute.

Inheritance

May mga CSS declarations naman na naipapasa sa mga descendant ng isang element. Halimbawa, pansinin ang example na ito:

See the Pen Inheritance by Francis Rubio (@maniczirconium) on CodePen.

Sa HTML, mapapansin na sa p lang naka-set ang kulay na crimson, pero apektado rin ang strong sa loob ng p. Ito ang tinatawag na inheritance. Hindi ito nangyayari sa lahat ng CSS properties, pero may mga declarations na naipapasa o namamana ng isang element galing sa parent element niya.

Summary

Ang cascade, inheritance, at specificity ay mga techniques na ginagamit ng browser para malaman kung aling mga styles ang mag-a-apply sa bawat element.

Dahil sa cascade, ina-apply ng browser ang styling na pinakahuling na-declare sa CSS kapag may mga conflict.

Dahil sa specificity, ina-apply ng browser ang stylng na may pinaka specific na selector. Dahil dito, nagkakaroon tayo ng way para ma-override ang mga styles kung kailangan.

Dahil naman sa inheritance, nakukuha ng mga element ang ilang CSS properties galing sa parent element nila.

---

1. May mas detalyadong paliwanag sa MDN Docs. Tingnan ang article na Cascade and Inheritance. ↩︎