Specificity ба cascade

CSS-д нэг элементэд хэд хэдэн дүрэм хамаарч болдог. Cascade нь аль дүрэм давамгайлахыг шийдэх механизм бөгөөд specificity нь тэрхүү шийдвэрийн гол хэмжүүр юм.

Cascade-ийн дүрэм

Browser дүрмийн эрэмбийг дараах дарааллаар тодорхойлно:

1. Origin — хаанаас ирсэн (browser анхдагч → хэрэглэгчийн → зохиогчийн CSS)
2. Specificity — selector хэр тодорхой вэ
3. Source order — хожим бичигдсэн дүрэм давамгайлна

/* Хоёул .title-д хамаарна — хожим бичигдсэн нь давамгайлна */
.title {
  color: gray;
}
.title {
  color: white;
} /* энэ ажиллана */

Specificity тооцоолох — (A-B-C)

Specificity нь гурван тоон утгаар илэрхийлэгдэнэ:

| Тооцоолол | Утга | Жишээ | | --------- | ---------------------------------- | --------------------------------- | | A | ID selector бүр | #header → A+1 | | B | Class, attribute, pseudo-class бүр | .card, [type], :hover → B+1 | | C | Element, pseudo-element бүр | div, p, ::before → C+1 |

p {
} /* 0-0-1 */
.card {
} /* 0-1-0 */
#header {
} /* 1-0-0 */
p.card {
} /* 0-1-1 */
#header .nav {
} /* 1-1-0 */
#header .nav a {
} /* 1-1-1 */

Харьцуулах — A > B > C:

/* 0-0-1 (p) vs 0-1-0 (.card) */
p {
  color: gray;
} /* specificity: 0-0-1 */
.card {
  color: white;
} /* specificity: 0-1-0 — ДАВАМГАЙЛНА */

/* 0-1-0 (.card) vs 1-0-0 (#main) */
.card {
  color: white;
} /* 0-1-0 */
#main {
  color: purple;
} /* 1-0-0 — ДАВАМГАЙЛНА */

Specificity тооцооны жишээнүүд

/* Хэд хэдэн selector нэгтгэх */
nav ul li a:hover {
} /* 0-1-3: :hover=B+1, nav/ul/li/a=C+4 → 0-1-4 */
.nav .link:hover {
} /* 0-3-0: .nav=B+1, .link=B+1, :hover=B+1 */
#nav a.active {
} /* 1-1-1 */

Жишээ тооцоол:
#header .nav li:first-child a
= ID(1) + class(1) + pseudo-class(1) + element(2)
= 1-2-2

Inline style ба !important

/* Inline style — specificity: 1-0-0-0 (хамгийн их) */
<div style="color: red">  →  давамгайлна selector бүхнийг

/* !important — cascade-г бүрэн тойроно */
p {
  color: blue !important;
} /* бусад бүх дүрмийг дарна */
p {
  color: red;
} /* ажиллахгүй */

!important-г хэзээ ашиглах вэ? Ашиглахгүй байх нь зөв. Зайлшгүй тохиолдол: гуравдагч талын CSS-г override хийх шаардлагатай бол л зөвшөөрнө.

Specificity-г бага байлгах яагаад чухал

Specificity өсөх тусам CSS-г override хийхэд улам хэцүү болдог:

/* Муу — specificity нь өндөр */
#main #content .card .title {
  color: gray;
}
/* Дараа нь override хийхэд маш хэцүү болно */

/* Сайн — specificity бага, давхарлах хялбар */
.card-title {
  color: gray;
}
.card-title--featured {
  color: white;
}

Практик дүрмүүд

1. ID selector-г CSS-д ашиглахаас зайлсхий:

/* Муу */
#submit-button {
  background: purple;
}

/* Сайн */
.btn-submit {
  background: purple;
}

2. Selector-г хэрэгцээгүй урт болгохгүй:

/* Муу — хэт тодорхой */
nav ul li a.nav-link {
  color: white;
}

/* Сайн */
.nav-link {
  color: white;
}

3. Specificity-г тэнцүү байлгах — source order ашиглах:

/* Base */
.btn {
  background: gray;
}

/* State — specificity тэнцүү, source order давамгайлна */
.btn-primary {
  background: purple;
}
.btn-disabled {
  background: gray;
  opacity: 0.5;
}

DevTools-д specificity харах

Chrome DevTools-д элементийг inspect хийхэд баруун талын Styles панелд:

• Ямар дүрэм давамгайлж байгаа харагдана
• Дарагдсан дүрэм зураастай харагдана
• Selector дээр hover хийхэд specificity тоо гарна

Дараагийн хичээлд:

CSS өвлөлт (inheritance) — ямар property хүүхэд элементэд автоматаар дамждаг, ямар нь дамждаггүй, мөн inherit, initial, unset, revert утгуудыг судална.