5-dars

!important va Inheritance

Bu darsda !important nima ekanligini, nega xavfli bo'lishini va CSS inheritance (meros) tushunchasini o'rganamiz.

1. !important nima va nega xavfli?

!important nima?

!important — bu CSS'da majburlash.

Oddiy qilib aytganda:

❝ Qoidalar, cascade, specificity — hammasini chetga surib faqat men ishlayman ❞

Eng oddiy misol 👇

p {
  color: red !important;
}

.text {
  color: blue;
}

<p class="text">Salom</p>

❓ Rang qanaqa?

👉 red

❗ Nega?

.text class kuchliroq edi

lekin !important hammasini bosib ketdi

!important nima qiladi?

U quyidagilarni buzadi:

❌ cascade tartibini ❌ specificity hisobini ❌ CSS mantiqini

Brauzer shunday deydi:

"Menga baribir, !important bor ekan."

Eng xavfli joy ⚠️

!important → zanjirli muammo

Misol:

.title {
  color: red !important;
}

Keyin sen xohlaysan:

.page .title {
  color: blue;
}

❌ Ishlamaydi.

Unda nima qilasan?

.page .title {
  color: blue !important;
}

👉 important vs important urushi boshlanadi 😬

Natijasi qanday bo'ladi?

• CSS o'qilmaydi
• qayerda nima ishlayotganini tushunmaysan
• kichik o'zgarish katta bug bo'ladi
• project sekin o'ladi

Shuning uchun:

!importantni oxirgi chora deb bilish kerak

Qachon !important ishlatish mumkin?

Ha, umuman taqiqlanmagan.

✔ Faqat shular uchun:

• browser default'ni majburan o'chirish
• utility class (.hidden, .sr-only)
• tashqi library override qilishga majbur bo'lsang

📌 Lekin:

"CSS ishlamadi, shuning uchun !important qo'ydim" — ❌ bu noto'g'ri sabab

Yaxshi alternativalar 🧠

!important o'rniga:

✔ selectorni to'g'ri aniqlashtir ✔ CSS'ni to'g'ri joyga yoz ✔ keraksiz ID'lardan qoch ✔ cascade'ni tushun

Oson misol 😄

!important — bolg'a

CSS esa — mexanizm

Bolg'a bilan hamma narsani urib bo'ladi, lekin hammasi sinadi.

Xulosa

!important — CSS'ning eng kuchli, lekin eng xavfli quroli. Faqat oxirgi chora sifatida ishlatish kerak.

2. Inheritance nima?

Inheritance — bu nima?

Inheritance — bu CSS'da ota elementdan bola elementga xususiyat o'tishi.

Oddiy qilib aytganda:

❝ Ota elementda yozilgan ba'zi CSS'lar ichidagi bolalarga avtomatik o'tadi ❞

Eng oddiy misol 👇

div {
  color: red;
}

<div>
  <p>Salom</p>
  <span>World</span>
</div>

❓ p va span rangi qanaqa?

👉 red

❗ Nega?

color — meros bo'ladigan property

bola elementlar ota'dan oladi

Muhim tushuncha ⚠️

❗ Hamma CSS property meros bo'lmaydi

CSS ikki guruhga bo'linadi:

🧬 Meros bo'ladigan

🧱 Meros bo'lmaydigan

Nega bunday qilingan?

Tasavvur qil:

har bir p, span, a ga alohida color yozsang

👉 CSS 100 baravar ko'payib ketadi

Shuning uchun:

text bilan bog'liq narsalar

ota'dan bolaga o'tadi

Yana bir misol 👇

body {
  font-family: Arial;
}

👉 Sen p, h1, li ga yozmasang ham 👉 hammasi Arial bo'ladi

Bu — inheritance

Inheritance qayerda ishlamaydi?

Misol 👇

div {
  border: 1px solid red;
}

<div>
  <p>Text</p>
</div>

❓ p da border bormi?

👉 ❌ Yo'q

❗ Sabab:

border — meros bo'lmaydi

Cascade vs Inheritance (farqi!)

Bu joy juda muhim ⚠️

Cascade → qaysi style tanlanadi

Inheritance → style ota'dan o'tadimi yo'qmi

Meros bo'ladigan propertylar

Ko'pincha text bilan bog'liq:

• color
• font-family
• font-size
• font-weight
• line-height
• text-align
• va boshqalar...

Meros bo'lmaydigan propertylar

Ko'pincha layout va border bilan bog'liq:

• border
• margin
• padding
• width
• height
• background
• va boshqalar...

Xulosa

Inheritance — CSS'ning kuchli mexanizmi bo'lib, ota elementdan bola elementlarga ba'zi xususiyatlarni avtomatik o'tkazadi. Bu CSS kodni qisqartirishga yordam beradi.