Chapter 18 — CSS Arxitekturasi va BEM Metodologiyasi

---

18.1 BEM Nomlash Konventsiyasi

Simple Explanation

BEM — Block, Element, Modifier: .block__element--modifier formatida CSS klasslarini nomlash metodologiyasi.

Example

index.html
HTMLNusxalash
01<div class="card">
02  <h3 class="card__title">Sarlavha</h3>
03  <p class="card__text card__text--highlighted">Matn</p>
04</div>

styles.css
CSSNusxalash
01.card { padding: 16px; }
02.card__title { font-weight: bold; }
03.card__text { color: gray; }
04.card__text--highlighted { color: black; font-weight: bold; }

18.2 Nima uchun BEM?

Mental Model

🧠 BEM'ning asosiy maqsadi — CSS specificity urushlarini oldini olish. Har bir klass FLAT (bir darajali) specificity'ga ega bo'ladi, chunki BEM ichma-ich selektorlardan (div p span) emas, faqat class nomlaridan foydalanadi.

⚠️ Common Mistake
BEM bilan ham ichma-ich selektorlar (.card .card__title) yozishga urinish — bu BEM falsafasiga zid, chunki BEM klasslar mustaqil, ota-bola bog'liqligisiz ishlashi kerak.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: .button, .button__icon, .button--primary klasslarini o'z ichiga olgan tugma componentini yarating.

🟡 Exercise 2 — Medium

Task: To'liq .navbar blokini BEM metodologiyasida yarating: .navbar__logo, .navbar__link, .navbar__link--active.

🔴 Exercise 3 — Hard

Task: Katta forma componentini (.form, .form__field, .form__label, .form__input--error) BEM bilan qurib, xato holatini modifikator orqali ko'rsating.

---

🐛 Debugging Challenge

styles.css
CSSNusxalash
01.card .title { font-weight: bold; }

index.html
HTMLNusxalash
01<div class="card"><h3 class="title">Sarlavha</h3></div>

Your Task: Bu CSS BEM tamoyillariga mos keladimi? Nega yo'q, va qanday tuzatish kerak?

<details> <summary>Solution</summary> Yo'q, bu ichma-ich (nested) selektor — BEM'ga zid, chunki `.title` `.card`dan tashqarida ishlatilsa boshqacha ishlaydi. To'g'ri BEM yechimi: `.card__title { font-weight: bold; }` va HTML'da `class="card__title"`. </details>

---

📌 Chapter Summary

BEM (.block__element--modifier) — CSS'ni flat, mustaqil va qayta ishlatiluvchi qismlarga bo'luvchi nomlash metodologiyasi. U specificity urushlarini oldini oladi va katta loyihalarda kod bazasini boshqarishni osonlashtiradi.

🎯 Key Takeaways

• __ — Element, -- — Modifier
• BEM ichma-ich selektorlardan qochadi, faqat flat class nomlaridan foydalanadi
• Katta jamoada ishlashda BEM izchillikni ta'minlaydi

⚡ Quick Cheat Sheet

styles.css
CSSNusxalash
01.block { }
02.block__element { }
03.block--modifier { }
04.block__element--modifier { }

---