CSS - SOMO LA 26: CSS Specificity (Kipaumbele cha Styles)

Katika somo hili, tutajifunza kuhusu CSS Specificity — yaani mfumo wa kipaumbele unaotumiwa na kivinjari kuchagua ni mtindo (style) upi utumike iwapo kuna migongano kati ya selectors mbalimbali. Utaelewa jinsi ya kupanga selectors zako vizuri ili kuzuia matatizo ya mitindo kutofanya kazi kama ulivyotarajia.

Jiunge nasi WhatsApp

? Utangulizi

Katika CSS, wakati ambapo selector zaidi ya moja inalenga elementi ile ile, kivinjari huchagua mtindo mmoja tu wa kutumia. Ili kufanya hivyo, hutegemea mfumo unaoitwa specificity — ambao ni mfumo wa alama unaoamua ni mtindo gani una nguvu zaidi.

Mfano: Kama selector #header na .title zote zinaweka rangi ya maandishi tofauti kwenye <h1 class="title" id="header">, basi kivinjari kitaweka ile yenye specificity kubwa zaidi.

✅ 1. Uelewa wa Specificity

Specificity ni kipimo cha "nguvu" ya CSS selector. Selector yenye nguvu zaidi (specificity kubwa) hushinda zingine zinazolenga elementi hiyo hiyo.

CSS Specificity huhesabiwa kwa mfumo wa pointi kwa aina mbalimbali za selectors.

✅ 2. Viwango vya Specificity

Selector	Pointi/Uzito wa Specificity
Inline styles (`style=""`)	1000
ID selectors (`#id`)	100
Class, pseudo-class (`.class`, `:hover`)	10
Element selectors (`div`, `p`)	1
Universal selector (`*`)	0

✅ 3. Mfano wa Specificity kwa Vitendo

<h1 class="title" id="header">Habari</h1>

CSS:

h1 { color: blue; }                 /* Specificity = 1 */
.title { color: green; }           /* Specificity = 10 */
#header { color: red; }            /* Specificity = 100 */

Matokeo:
Rangi ya h1 itakuwa nyekundu, kwa sababu #header ina specificity kubwa zaidi.

✅ 4. Inline Styles na !important

<h1 id="main" style="color: orange;">Karibu</h1>

Inline style inakuwa na specificity ya 1000 — hivyo hushinda zote.

Pia, ikiwa utatumia !important, hiyo ina nguvu ya kipekee na hushinda hata selector yoyote:

.title {
  color: blue !important;
}

Lakini tumia !important kwa tahadhari — ni vizuri kutumia specificity ya kawaida ili kuweka msimamizi bora wa CSS zako.

✅ 5. Jinsi ya Kuepuka Migongano

Tumia selectors zenye uhusiano mzuri: epuka kutumia id nyingi bila sababu.
Andika CSS kwa mfumo wa ndani nje: mfano, nav ul li a inaeleweka vizuri kuliko #menuItem.
Epuka kutumia !important ovyo.
Tumia specificity calculator (kama ile ya w3schools au CSS Tricks) kusaidia kuhesabu.

✅ Hitimisho

Specificity ni sehemu muhimu ya CSS ambayo kila mbunifu wa tovuti anatakiwa kuelewa. Ikiwa hautazingatia specificity, unaweza kuona mitindo yako haitumiki jinsi ulivyotarajia. Kwa kuielewa, utaweza kusuluhisha migongano ya CSS kwa haraka na kwa ustadi.

? Maswali ya Kujitathmini

Ni ipi kati ya zifuatazo ina specificity kubwa zaidi?
a) .title
b) h1
c) #header
d) *
Specificity ya selector p.intro ni ngapi?
a) 1
b) 10
c) 11
d) 101
Ni ipi hutumika kushinda specificity zote ikiwa imewekwa?
a) .class
b) #id
c) style
d) !important
Selector div ul li a:hover ina specificity ya:
a) 4
b) 11
c) 12
d) 13
Ni ipi kati ya hizi ni njia bora ya kuepuka migongano ya specificity?
a) Kutumia id mara nyingi
b) Kutumia !important kila sehemu
c) Kufuatilia mfumo wa selectors wa ndani kwenda nje
d) Kutumia universal selector