Што такое спецыфічнасць?

Спецыфічнасць (specificity) у CSS гаворыць пра прыярытэт стылю для элемента ў залежнасці ад селектараў, якія прымяняюцца да гэтага элемента. Яна дапамагае вызначыць, якія стылі будуць мець перавагу ў выпадку канфлікту селектараў.

Калі на адзін элемент маецца некалькі селектараў з розных правілаў, спецыфічнасць выкарыстоўваецца для вызначэння прыарытэту. Алгарытм вылічэння спецыфічнасці базуецца на падліку адносных ваг селектараў.Чым вышэй узровень спецыфічнасці, тым вышэй прыарытэт стылю.

У CSS спецыфічнасць вылічваецца на аснове чатырох элементаў:

1. Уласныя стылі: Уласныя стылі, вызначаныя непасрэдна ў тэгу элемента з дапамогай атрыбута style, маюць найвышэйшы прыарытэт.

<div style="color: red;">Тэкст будзе чырвоным</div>

2. Ідэнтыфікатары: Селектары па ідэнтыфікатарах (ID) маюць высокую спецыфічнасць. Яны пазначаюць элементы па іх унікальным id.

#myElement {
  color: blue;
}

3. Класы, атрыбуты і псеўда-класы: Селектары па класах, атрыбутах і псэўда-класах маюць сярэднюю спецыфічнасць. Яны пазначаюць элементы па класе, атрыбуце або стане.

.myClass {
  color: green;
}

[type="submit"] {
  background-color: yellow;
}

a:hover {
  text-decoration: underline;
}

4. Элементы і псэўда-элементы: Селектары па элементах і псэўда-элементах маюць найменшую спецыфічнасць. Яны пазначаюць элементы па іх тэгу або ўводзяць новае змесціва.

p {
  font-size: 16px;
}

::before {
  content: "Новае змесціва";
}

Калі два або больш правілы маюць аднолькавую спецыфічнасць, перавагу атрымае правіла, вызначанае апошнім у CSS-файле.

Як вылічваецца спецыфічнасць?

Вось формула для вылічэння спецыфічнасці ў CSS:

Спецыфічнасць = (a * 1000) + (b * 100) + (c * 10) + d

Дзе:

a - прадстаўляе колькасць уласных стыляў у селектары.

b - прадстаўляе колькасць ідэнтыфікатараў у селектары.

c - прадстаўляе колькасць класавых селектараў, атрыбутных селектараў і псэўда-класаў у селектары.

d - прадстаўляе колькасць селектараў элементаў і псэўда-элементаў у селектары.

Вось прыклад выкарыстання гэтай формулы:

/* Селектар: уласны стыль */
#myElement {
  color: blue;
}
/* Спецыфічнасць: (0 * 1000) + (1 * 100) + (0 * 10) + 0 = 100 */

/* Селектар: ідэнтыфікатар + клас + элемент */
#myElement .myClass p {
  color: green;
}
/* Спецыфічнасць: (0 * 1000) + (1 * 100) + (1 * 10) + 1 = 111 */

/* Селектар: два класы */
.myClass.anotherClass {
  font-weight: bold;
}
/* Спецыфічнасць: (0 * 1000) + (0 * 100) + (2 * 10) + 0 = 20 */

Выкарыстоўваючы гэту формулу, вы можаце вылічыць спецыфічнасць любога селектара ў CSS і вызначыць парадак прыарытэту пры вырашэнні канфліктаў стыляў.

Заключэнне

Спецыфічнасць селектараў - адзін з найболш важных інструментаў працы са стылямі. Веданне і разуменне яго дазволіць пазбягаць канфліктаў стыляў, вырашаць праблемы з перавыкарыстанням коду, ды дапаможа рабіць вашыя стылі больш модульнымі. Таксама ведаючы спецыфічнасць можна пазбегнуць стварэння лішніх стыляў і трымаць код ў чысціні.

PS.

Вялікі дзякуй усім хто дачытаў да канца, спадзяюся артыкул быў цікавы ды карысны.