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

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

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

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

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

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

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

textCopy
1#myElement {
2  color: blue;
3}
4

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

textCopy
1.myClass {
2  color: green;
3}
4
5[type="submit"] {
6  background-color: yellow;
7}
8
9a:hover {
10  text-decoration: underline;
11}

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

textCopy
1p {
2  font-size: 16px;
3}
4
5::before {
6  content: "Новае змесціва";
7}
8

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

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

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

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

Дзе:

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

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

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

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

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

textCopy
1/* Селектар: уласны стыль */
2#myElement {
3  color: blue;
4}
5/* Спецыфічнасць: (0 * 1000) + (1 * 100) + (0 * 10) + 0 = 100 */
6
7/* Селектар: ідэнтыфікатар + клас + элемент */
8#myElement .myClass p {
9  color: green;
10}
11/* Спецыфічнасць: (0 * 1000) + (1 * 100) + (1 * 10) + 1 = 111 */
12
13/* Селектар: два класы */
14.myClass.anotherClass {
15  font-weight: bold;
16}
17/* Спецыфічнасць: (0 * 1000) + (0 * 100) + (2 * 10) + 0 = 20 */
18

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

Заключэнне

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

PS.

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