Chapter 20 — CSS Debugging Laboratoriyasi

---

🐛 Bug 1: Style Umuman Qo'llanmayapti

styles.css
CSSNusxalash
01.Card { color: red; }

index.html
HTMLNusxalash
01<div class="card">Matn</div>

Diagnosis: Matn qizil bo'lishi kerak, lekin bo'lmayapti.

<details> <summary>Why?</summary> CSS class nomlari CASE-SENSITIVE (katta-kichik harfga sezgir): `.Card` va `.card` ikki xil selektor hisoblanadi. </details>

🐛 Bug 2: Specificity Muammosi

styles.css
CSSNusxalash
01.btn { color: blue; }
02#submit { color: black; }

index.html
HTMLNusxalash
01<button id="submit" class="btn">Yuborish</button>

Diagnosis: Tugma nega ko'k emas, qora rangda?

<details> <summary>Why?</summary> ID selektor (`#submit`) class selektordan (`.btn`) yuqori specificity'ga ega, shuning uchun `color: black` g'olib chiqadi, garchi `.btn` boshqa fayl oxirida yozilgan bo'lsa ham. </details>

🐛 Bug 3: Flexbox Elementlar Kutilganidek Joylashmayapti

styles.css
CSSNusxalash
01.container { display: flex; }
02.item { width: 50%; }

Diagnosis: 3 ta .item konteynerda, ularning har biri 50% bo'lishi kerak, lekin ular qatorga sig'may, siqilib qolmoqda.

<details> <summary>Why?</summary> Default holatda flex itemlar `flex-shrink: 1` bilan siqiladi, chunki 3×50%=150% konteynerdan katta. Flexbox `width`ni faqat "taklif" sifatida qabul qiladi. </details>

🐛 Bug 4: Margin Auto Ishlamayapti

styles.css
CSSNusxalash
01.box { margin: 0 auto; }

Diagnosis: Element markazlashmayapti.

<details> <summary>Why?</summary> `margin: 0 auto` faqat BLOCK elementlarda va element ANIQ WIDTH'ga ega bo'lganda ishlaydi. Agar element `inline` bo'lsa yoki `width` berilmagan (default 100%) bo'lsa, bu ishlamaydi. </details>

🐛 Bug 5: z-index Ishlamayapti

styles.css
CSSNusxalash
01.modal { z-index: 999; }

Diagnosis: Modal boshqa elementlar ortida qolmoqda.

<details> <summary>Why?</summary> `.modal`da `position` (static'dan boshqa) berilmagan — `z-index` faqat positioned elementlarda ishlaydi. </details>

📌 Chapter Summary

Eng ko'p uchraydigan CSS xatolari: case-sensitivity, specificity to'qnashuvi, flexbox width noto'g'ri tushunilishi, margin: auto shartlari va z-index+position bog'liqligi.

🎯 Key Takeaways

• Har doim class nomlarini aniq (case-sensitive) yozing
• ID'lardan CSS stillashda qochish — specificity muammolarini oldini oladi
• Flexbox'da width qat'iy emas, "taklif" hisoblanadi
• z-index va margin: auto uchun kerakli shartlarni yodda tuting

⚡ Quick Cheat Sheet — Debugging Checklist

code.text
TEXTNusxalash
011. Class case-sensitive yozilganmi?
022. Specificity to'qnashuvi bormi? (ID vs class)
033. Flexbox/grid asosiy display klassi bormi?
044. z-index uchun position berilganmi?
055. margin:auto uchun width va display:block bormi?

---