CSS'da kaskad va meros qanday ishlaydi?

Savol

CSS bitta elementga qaysi ziddiyatli qoidani qo'llashni qanday hal qiladi va xususiyatlarning otadan farzandga merosi qanday ishlaydi?

Qisqa javob

Kaskad — bitta elementga bir nechta qoida qo'llanilishi mumkin bo'lganda, mezonlar zanjiri bo'yicha yakuniy qiymatni tanlaydigan algoritm: qoidaning kelib chiqishi va muhimligi (!important, muallif/brauzer/foydalanuvchi), selektorning aniqligi (specificity) va koddagi e'lon qilish tartibi. Meros — alohida mexanizm: xususiyatlarning bir qismi (asosan matnga oid) aniq belgilanmagan bo'lsa, standart tarzda otadan farzandga o'tadi.

Batafsil javob

Kaskad bitta elementga qo'llaniladigan bir nechta qoida orasidagi ziddiyatni quyidagi ustuvorlik tartibida hal qiladi (kam muhimdan ko'proq muhimga qarab):

1. Origin (kelib chiqishi) va muhimlik — brauzerning standart stillari (user agent) → foydalanuvchi stillari → muallif (bizning) stillarimiz → !importantli muallif stillari → !importantli foydalanuvchi stillari. Amalda ko'pincha "oddiy" muallif qoidalari va !important-qoidalar solishtiriladi: !important muhimlik tartibini teskari aylantiradi va uni juda ehtiyotkorlik bilan ishlatish kerak, chunki u kaskadning bashorat qilinuvchanligini buzadi.
2. Specificity (aniqlik) — selektor bo'yicha hisoblanadi: inline stil > id > klass/atribut/psevdoklass > teg. Ko'proq aniq selektor fayldagi tartibdan qat'i nazar g'alaba qozonadi. (Specificity'ni batafsil hisoblash — alohida mavzu.)
3. Source order (koddagi tartib) — aniqlik va muhimlik teng bo'lganda kaskadda keyinroq e'lon qilingan qoida (fayldagi keyinroq, yoki keyinroq ulangan faylda) g'alaba qozonadi.

Meros — kaskaddan mustaqil mexanizm: elementga aniq belgilanmagan xususiyat qiymati otadan olinishi mumkin. Barcha xususiyatlar ham meros bo'lmaydi:

• Standart holda meros bo'ladi — asosan matn/tipografik xususiyatlar: color, font-family, font-size, line-height, text-align, visibility, cursor.
• Standart holda meros bo'lmaydi — asosan bloklar modeli va joylashuvga oid xususiyatlar: margin, padding, border, width, height, background, position, display. Mantiq shundaki, bunday xususiyatlar aniq blokka xos bo'lib, ularning meros bo'lishi vyorstkani bashorat qilib bo'lmaydigan holga keltirar edi.

Har qanday xususiyatga qo'llaniladigan boshqaruvchi kalit so'zlar:

• inherit — xususiyat odatda meros bo'lmasa ham, majburan otaning qiymatini olish.
• initial — CSS spetsifikatsiyasidagi (brauzerniki emas!) standart qiymatga qaytarish, masalan display: initial shu element uchun spetsifikatsiyaga muvofiq standart qiymatni qaytaradi.
• unset — meros bo'ladigan xususiyatlar uchun inherit kabi, meros bo'lmaydiganlar uchun initial kabi ishlaydi — "tabiiy xatti-harakatga qaytarish"ning universal usuli.
• revert — kaskadning oldingi qatlamidagi stiliga qaytaradi (odatda brauzerning standart stiliga), initialdan farqli o'laroq, u CSS spetsifikatsiyasiga, ya'ni muallif stillarisiz brauzer haqiqatda ko'rsatadigan narsaga emas.

Misol

/* meros: color va font-family aniq ko'rsatilmasa ham farzandlarga o'tadi */
body {
  color: #222;
  font-family: sans-serif;
}

.card {
  /* border, padding, background — meros BO'LMAYDI, ularni aniq belgilash kerak */
  border: 1px solid #ddd;
  padding: 16px;
}

.card p {
  /* explicit inherit: havola rangini majburan otadan olish */
  color: inherit;
}

/* aniqlik bo'yicha kaskad: .warning (klass) p (teg)dan kuchliroq */
p {
  color: black;
}
.warning {
  color: crimson; /* g'alaba qozonadi, chunki klassning aniqligi tegnikidan yuqori */
}

/* !important kaskadning odatiy tartibini teskari aylantiradi — ehtiyotkorlik bilan ishlatish kerak */
.legacy-override {
  color: blue !important;
}

/* "muallif hech narsa yozmagandek" holatga qaytarish */
.reset-all {
  all: unset;
}

Qo'shimcha savollar

• all: unset all: revertdan nimasi bilan farq qiladi?
• Kaskad qatlamlari (@layer) katta loyihada jamoalar orasidagi ziddiyatlarni hal qilish tartibini qanday o'zgartiradi?
• Nega !important antipattern hisoblanadi va uni ishlatmasdan specificity ziddiyatini qanday hal qilish mumkin?