1.9-bob: CSS arxitekturasi (BEM) va accessibility (a11y) asoslari

1-QISM — HTML, CSS va zamonaviy stillar · 9-mavzu (yakuniy)

1. Kirish va motivatsiya

1-QISMning so'nggi bobiga keldik. Endi ikki "kattalar" mavzusini o'rganamiz — bular boshlovchini professionaldan ajratadi:

1. CSS arxitekturasi (BEM) — katta loyihada CSS class'larini tartibli nomlash. Kichik loyihada CSS oson; lekin 100+ komponentli loyihada class nomlari chalkashib, bir-birini buzib ketadi (specificity urushlari — 1.2). BEM bu betartiblikni tugatadi.

2. Accessibility (a11y) — saytni hammaga (jumladan ko'zi ojiz, eshitmaydigan, sichqoncha ishlata olmaydigan odamlarga) ochiq qilish. Dunyoda ~1.3 milliard nogiron odam bor — siz yasagan sayt ular uchun ham ishlashi kerak.

O'xshatish (BEM): kutubxonani tasavvur qiling. Kitoblar tartibsiz uyilgan bo'lsa — kerakli kitobni topib bo'lmaydi. BEM — bu kataloglash tizimi: har kitobning aniq, mantiqli nomi va joyi bor. Katta loyihada CSS aynan shu tartibni talab qiladi.

O'xshatish (a11y): binoga panus (ramp) va lift qo'yish — bu faqat nogironlar uchun emas; chaqaloq aravachali ota-ona, yuk ko'targan kuryer ham foydalanadi. Accessibility ham shunday: u hammaga qulaylik beradi (klaviatura bilan ishlovchi, sekin internetli, keksa foydalanuvchi).

Nega bu majburiy?

• BEM: katta jamoa loyihasida CSS'ni boshqarib bo'ladigan tutadi; specificity urushlarini tugatadi.
• a11y: ko'p davlatda qonuniy talab; SEO'ga ijobiy ta'sir 13.8-bob; axloqiy mas'uliyat; ko'pincha kompaniyada intervyu savoli.

2. Nazariya — chuqur tushuntirish

A QISM: CSS ARXITEKTURASI (BEM)

2.1. Muammo: CSS nega chalkashadi?

CSS'ning ikki tabiiy muammosi 1.2-bob:

• Global makon: har bir class butun saytga ta'sir qiladi. .title ni ikki joyda boshqacha yozsangiz — konflikt.
• Specificity urushi: .karta h2 vs .muhim vs #maxsus — kim ustun? Tartibsiz CSS'da buni bashorat qilib bo'lmaydi (1.2: specificity).

Yechim — metodologiya (nomlash qoidasi). Eng mashhuri — BEM.

2.2. BEM nima? (Block, Element, Modifier)

BEM — Yandex tomonidan (2010) yaratilgan CSS nomlash konvensiyasi. Class nomini uch qismga bo'ladi:

   .block__element--modifier
    │      │        │
    │      │        └── Modifier (variant/holat)
    │      └────────── Element (block'ning qismi)
    └───────────────── Block (mustaqil komponent)

• Block (blok) — mustaqil, qayta ishlatiladigan komponent: .karta, .menyu, .tugma.
• Element (element) — blokning qismi, blocksiz ma'no bermaydi: .karta__sarlavha, .menyu__havola. (__ — ikki pastki chiziq.)
• Modifier (modifikator) — blok/elementning varianti yoki holati: .tugma--katta, .menyu__havola--faol. (-- — ikki tire.)

<div class="karta">                          <!-- Block -->
  <img class="karta__rasm" src="...">         <!-- Element -->
  <h3 class="karta__sarlavha">Nom</h3>        <!-- Element -->
  <button class="karta__tugma karta__tugma--asosiy">Bos</button> <!-- Element + Modifier -->
</div>

2.3. Nega aynan __ va -- (ikkita)?

BEM ataylab ikkita pastki chiziq/tire ishlatadi (getbem.com). Sababi: shunda bitta tire (-) so'z ajratuvchi sifatida erkin qoladi:

  .asosiy-menyu__havola-matni--juda-faol
   └────┬────┘  └────┬────┘  └───┬────┘
   block (2 so'z)  element     modifier
   (- bilan)       (- bilan)   (- bilan)

2.4. BEM'ning asosiy foydasi: tekis specificity

BEM'ning eng katta yutug'i (getbem.com): har selektor — bitta class, demak hamma qoida bir xil specificity'ga ega 1.2-bob. Specificity urushlari yo'qoladi:

/*  BEM'siz — har xil specificity, konflikt */
.karta .matn { }           /* (0,2,0) */
.matn.muhim { }            /* (0,2,0) — kim ustun? tartibga bog'liq */
#asosiy .matn { }          /* (1,1,0) — buni yengish qiyin */

/*  BEM — hammasi bitta class, teng specificity */
.karta__matn { }           /* (0,1,0) */
.karta__matn--muhim { }    /* (0,1,0) — bashoratli */

Eslatma — nesting bilan 1.6-bob: SCSS'da BEM juda qulay yoziladi: &__element, &--modifier (1.6, Misol 1). BEM + SCSS — keng tarqalgan juftlik.

Specificity hisobi (a, b, c) — qaysi qoida ustun?

Brauzer ikki qoida bitta elementga tegsa, specificity (xoslik) bo'yicha g'olibni tanlaydi. Specificity uch sondan iborat — (a, b, c):

  a = id selektorlar soni        (#id)
  b = class/atribut/pseudo-class (.class, [type], :hover)
  c = teg/element soni           (div, p, ::before)

Bu sonlarni chapdan o'ngga taqqoslanadi (a avval, keyin b, keyin c):

  #main .menu a        (1, 1, 1)
  .nav .menu a.faol    (0, 3, 1)
  ul li a              (0, 0, 3)

  (1,1,1) > (0,3,1) > (0,0,3)    id bitta b'dan ham kuchli

BEM aynan shu yerda yutadi: har selektor bitta class — hammasi (0, 1, 0). Hech bir qoida ikkinchisidan kuchli emas, demak fayldagi tartib hal qiladi (cascade — pastdagi g'olib). Bashoratli va sodda.

Cascade va !important xavfi

Agar ikki qoidaning specificity'si teng bo'lsa, cascade (kaskad) ishlaydi: CSS'da keyin kelgani g'olib. Shuning uchun BEM bilan tartibni faqat fayl ketma-ketligi orqali boshqarasiz.

!important esa specificity'ni butunlay chetlab o'tib, qoidani majburan ustun qiladi:

.matn { color: red !important; }   /* hamma narsani yengadi — hatto #id'ni ham */

!important'dan qoching. U specificity tartibini buzadi: bir !important'ni faqat boshqa (yanada keyingi) !important bilan yengasiz — bu «!important urushi»ga olib keladi va CSS'ni boshqarib bo'lmaydigan qiladi. To'g'ri BEM arxitekturasida !important deyarli kerak emas. Yagona o'rinli holat — utility class'lar (masalan, .hidden { display: none !important; }) yoki uchinchi tomon CSS'ini majburan bekor qilish.

2.5. Boshqa metodologiyalar (qisqacha)

BEM eng mashhuri, lekin yagona emas:

• OOCSS (Object-Oriented CSS) — struktura va ko'rinishni ajratish.
• SMACSS — qoidalarni kategoriyaga bo'lish (base, layout, module...).
• ITCSS (Inverted Triangle CSS) — CSS'ni specificity bo'yicha qatlamlarga ajratish (umumiydan xosga: settings tools generic elements ... utilities).
• Utility-first — Tailwind 1.7-bob — boshqacha yondashuv (umuman class nomlamaydi).

Tanlov loyihaga bog'liq: an'anaviy CSS/SCSS — BEM; Tailwind loyihasi — utility. Ikkov ham specificity muammosini hal qiladi.

B QISM: ACCESSIBILITY (a11y)

2.6. Accessibility nima va uchta ustun

Accessibility (a11y) — saytni imkoniyati cheklangan odamlar (ko'rish, eshitish, harakat, kognitiv) ham ishlata olishi. Uchta ustun (WCAG/sanoat):

1. Semantik HTML 1.1-bob — eng muhim poydevor.
2. Klaviatura bilan boshqaruv — sichqonchasiz ishlash.
3. Rang kontrasti — matn o'qishli bo'lishi.

2.7. 1-ustun: Semantik HTML — a11y poydevori

Eng katta a11y yutug'i — to'g'ri HTML 1.1-bob. Ekran o'quvchi (screen reader — ko'zi ojiz uchun dastur) semantik teglarni tushunadi:

   <div onclick="...">Yubor</div>    ekran o'quvchi: "matn" (tugma emas!)
   <button>Yubor</button>             "tugma, Yubor" + klaviatura bilan ishlaydi

Asosiy qoidalar (WCAG):

• Amal uchun <button>, navigatsiya uchun <a> (div'ga onclick emas).
• Sarlavha ierarxiyasi (<h1><h2>...) — tartibli 1.1-bob.
• Har input'ga <label> (for/id — 1.1).
• Har rasmga alt 1.1-bob; bezak bo'lsa alt="".
• Semantik regionlar (<nav>, <main>, <header> — 1.1).

Oltin qoida: to'g'ri semantik HTML — a11y'ning **80%**ini bepul beradi. 1.1-bobni yaxshi o'zlashtirgan bo'lsangiz — yarim yo'lni bosgansiz.

2.8. 2-ustun: Klaviatura bilan boshqaruv

Ko'p odam sichqonchani ishlata olmaydi (harakat cheklovi) yoki tezlik uchun klaviatura ishlatadi. Sayt faqat klaviatura bilan to'liq ishlashi kerak (WebAIM):

• Tab — keyingi interaktiv elementga o'tish; Shift+Tab — orqaga; Enter/Space — faollashtirish.
• Tab tartibi mantiqli bo'lsin — vizual oqimga mos (chapdan o'ngga, yuqoridan pastga).
• Focus indikatori (ko'rinadigan fokus halqasi) — qaysi element faolligini ko'rsatadi. Uni o'chirma!

/*  NOTO'G'RI — fokus halqasini o'chirish (klaviatura foydalanuvchisi adashadi) */
button:focus { outline: none; }

/*  TO'G'RI — chiroyli, lekin KO'RINADIGAN fokus */
button:focus-visible { outline: 2px solid #3b5bdb; outline-offset: 2px; }

:focus-visible — faqat klaviatura bilan kelganda halqani ko'rsatadi (sichqoncha bosishda emas) — eng to'g'ri yechim.

2.9. 3-ustun: Rang kontrasti

Matn foni bilan yetarli kontrastga ega bo'lishi kerak — aks holda kam ko'radigan (yoki quyoshda telefon ushlagan) odam o'qiy olmaydi. WCAG talablari (WebAIM):

WCAG darajalari (A / AA / AAA): WCAG mezonlari uch darajaga bo'linadi (W3C). A — eng asosiy minimum (masalan, har rasmga alt); AA — sanoat va ko'p qonunlar talab qiladigan amaliy maqsad (kontrast 4.5:1 shu yerda); AAA — eng yuqori, ko'pincha butun saytga yetib bo'lmaydigan ideal. Amalda AAga intiling.

   och kulrang matn (#aaa) oq fonda (#fff)   kontrast ~2:1 (o'qib bo'lmaydi)
   to'q kulrang (#595959) oq fonda            kontrast ~7:1 (a'lo)

Kontrast nisbati nima? Bu — matn va fon yorug'ligi orasidagi nisbat, 1:1 (bir xil rang, ko'rinmas) dan 21:1 (qora/oq, maksimal) gacha. Qancha katta — shuncha o'qishli. Faqat ranglarning «to'q/och»ligi muhim, ottenkasi (hue) emas — shuning uchun ko'zda chamalamasdan, kalkulyator bilan tekshiring.

Tekshirish: WebAIM Contrast Checker yoki DevTools 0.5-bob — rang yonida kontrast nisbatini ko'rsatadi.

2.9-b. Harakat sezgirligi: prefers-reduced-motion

Ba'zi odamlarda kuchli animatsiya, parallaks yoki tez harakat bosh aylanishi, ko'ngil aynishi yoki migrenni keltirib chiqaradi (vestibulyar buzilish). Bunday foydalanuvchilar tizim sozlamasida «harakatni kamaytirish»ni yoqib qo'yadi. CSS buni prefers-reduced-motion media so'rovi bilan hurmat qiladi (WCAG, MDN):

/* Animatsiyani faqat xohlovchilarga ko'rsat */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;   /* deyarli o'chiriladi */
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Bu — !important o'rinli bo'lgan kam holatlardan biri: foydalanuvchining sog'lig'iga oid sozlamasi har qanday boshqa qoidadan ustun turishi kerak.

2.10. ARIA — semantik HTML yetmaganda

ARIA (Accessible Rich Internet Applications) — role, aria-* atributlari bilan murakkab elementlarga (modal, dropdown, slider) ma'no qo'shish (MDN/W3C). Lekin eng muhim qoida:

ARIA — semantik HTML'ning O'RNINI BOSMAYDI, balki TO'LDIRADI. Avval to'g'ri HTML; ARIA — faqat HTML yetmaganda.

<!--  NOTO'G'RI — div'ni ARIA bilan "tugma" qilishga urinish -->
<div role="button" tabindex="0" onclick="...">Bos</div>

<!--  TO'G'RI — shunchaki <button> ishlat (hammasi bepul) -->
<button>Bos</button>

<!--  ARIA o'rinli — HTML'da muqobili yo'q holatlarda -->
<button aria-label="Yopish"></button>          <!-- matnsiz tugmaga nom -->
<nav aria-label="Asosiy menyu">...</nav>          <!-- bir nechta nav farqi -->
<div role="alert">Xato yuz berdi</div>            <!-- darrov o'qilsin -->

Mashhur ARIA: aria-label (nom berish), aria-hidden="true" (yashirish), aria-expanded (ochiq/yopiq), role (rol).

ARIA — rollar (role=) va holatlar. ARIA atributlarini ikki turga ajratish foydali (W3C):

• Rollar elementning nima ekanini aytadi: role="button", role="navigation", role="dialog", role="alert", role="tablist". (Eslatma: <nav>, <button> kabi semantik teglar bu rollarni avtomatik beradi — shuning uchun ularni qo'lda yozish kerak emas.)
• Holatlar va xossalar elementning hozirgi ahvolini aytadi: aria-expanded (ochiq/yopiq), aria-checked, aria-selected, aria-disabled, aria-current="page" (faol sahifa havolasi).

Dinamik o'zgarishlar — aria-live. JavaScript sahifani o'zgartirsa (masalan, «Savatga qo'shildi» xabari paydo bo'lsa), ekran o'quvchi buni avtomatik o'qimaydi — chunki fokus ko'chmagan. aria-live shu bo'shliqni to'ldiradi:

<!-- Ichidagi matn o'zgarsa, ekran o'quvchi xushmuomala o'qiydi (joriy gapni kutib) -->
<div aria-live="polite">Savatga qo'shildi</div>

<!-- Shoshilinch xabar — darrov o'qiladi (joriy gapni bo'lib) -->
<div aria-live="assertive" role="alert">Xato: parol noto'g'ri</div>

aria-live="polite" — odatiy tanlov (foydalanuvchini bezovta qilmaydi); assertive — faqat haqiqatan shoshilinch xatolar uchun.

Klaviatura va tabindex. Brauzer <a href>, <button>, <input> kabi interaktiv teglarni Tab tartibiga o'zi qo'shadi. tabindex bu tartibni boshqaradi:

• tabindex="0" — elementni tabiiy Tab tartibiga qo'shadi (masalan, role="button"li div'ni — lekin avval <button>ni o'ylang).
• tabindex="-1" — Tab bilan yetib bo'lmaydi, lekin JS bilan .focus() qilish mumkin (masalan, modal ochilganda fokusni unga ko'chirish).
• tabindex="1" va undan kattasidan qoching — ular tabiiy oqimni buzadi va Tab tartibini chalkashtiradi.

3. Sintaksis — tez ma'lumotnoma

/* BEM 2.2-bob */
.block { }
.block__element { }
.block__element--modifier { }
.block--modifier { }

/* SCSS bilan BEM 1.6-bob */
.block {
  &__element { }
  &--modifier { }
}

/* Fokus 2.8-bob */
:focus-visible { outline: 2px solid #3b5bdb; outline-offset: 2px; }

/* Harakatni kamaytirish (2.9-b) */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

<!-- a11y minimumlari -->
<button aria-label="Menyu"></button>
<img src="..." alt="Tavsif">
<label for="em">Email</label><input id="em" type="email">
<a href="#main" class="skip-link">Asosiy kontentga o't</a> <!-- skip link -->
<a href="/" aria-current="page">Bosh</a>              <!-- faol havola 2.10-bob -->
<div aria-live="polite">Saqlandi</div>                 <!-- dinamik xabar 2.10-bob -->

4. Batafsil kod namunalari

Misol 1 — BEM bilan karta komponenti

<article class="karta karta--taklif">          <!-- Block + Modifier -->
  <img class="karta__rasm" src="..." alt="Mahsulot">  <!-- Element -->
  <div class="karta__tana">
    <h3 class="karta__sarlavha">Mahsulot nomi</h3>
    <p class="karta__narx karta__narx--chegirma">99 000</p> <!-- Element + Modifier -->
    <button class="karta__tugma">Savatga</button>
  </div>
</article>

/* SCSS + BEM 1.6-bob */
.karta {
  border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden;

  &__rasm { width: 100%; height: 200px; object-fit: cover; }
  &__tana { padding: 1rem; }
  &__sarlavha { font-size: 1.1rem; margin-bottom: 0.5rem; }
  &__narx {
    font-weight: 700;
    &--chegirma { color: #e03131; }      // .karta__narx--chegirma
  }
  &--taklif { border-color: gold; }      // .karta--taklif
}

Misol 2 — Accessible tugma va forma

<form>
  <!-- label input'ga bog'langan 2.7-bob -->
  <label for="ism">To'liq ism</label>
  <input id="ism" name="ism" type="text" required
         aria-describedby="ism-yordam">
  <small id="ism-yordam">Ism va familiyangizni kiriting</small>

  <!-- matnsiz (ikonkali) tugmaga aria-label 2.10-bob -->
  <button type="button" aria-label="Parolni ko'rsatish"></button>

  <button type="submit">Yuborish</button>   <!-- semantik tugma 2.7-bob -->
</form>

Misol 3 — Ko'rinadigan fokus va skip-link (2.8)

/* Klaviatura fokusi — ko'rinadigan 2.8-bob */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #3b5bdb;
  outline-offset: 2px;
}

/* Skip-link — klaviatura foydalanuvchisi menyuni o'tkazib, kontentga sakraydi */
.skip-link {
  position: absolute; left: -9999px;        /* odatda yashirin */
}
.skip-link:focus { left: 1rem; top: 1rem; }  /* Tab bosilganda ko'rinadi */

Misol 4 — Kontrastli rang (2.9)

/*  kontrast past (~2.8:1) — AA'dan o'tmaydi */
.yomon { color: #999; background: #fff; }

/*  kontrast yetarli (~7:1) — AA va AAA'dan o'tadi */
.yaxshi { color: #595959; background: #fff; }

/* Tugma — oq matn ko'k fonda (kontrast ~5:1, AA OK) */
.btn { color: #fff; background: #3b5bdb; }

5. To'g'ri va noto'g'ri holatlar

1) divni tugma qilish

<!--  klaviatura/ekran o'quvchi ishlamaydi 2.7-bob -->
<div onclick="yubor()">Yubor</div>
<!--  semantik -->
<button onclick="yubor()">Yubor</button>

2) Fokus halqasini o'chirish

/*  klaviatura foydalanuvchisi qayerdaligini bilmaydi 2.8-bob */
*:focus { outline: none; }
/*  ko'rinadigan fokus */
*:focus-visible { outline: 2px solid #3b5bdb; }

3) ARIA bilan HTML'ni "qayta ixtiro qilish"

<!--  ko'p ARIA, lekin semantik HTML yo'q 2.10-bob -->
<div role="navigation"><div role="link">Bosh</div></div>
<!--  semantik HTML — ARIA shart emas -->
<nav><a href="/">Bosh</a></nav>

4) BEM'siz chuqur nesting

/*  specificity urushi (1.2, 2.4) */
.header .nav ul li a.active { }
/*  BEM — tekis, bashoratli */
.nav__havola--faol { }

6. Keng tarqalgan xatolar va yechimlari

Xato 1 — CSS bir-birini buzyapti (konflikt)

Sababi: global class nomlari takrorlangan yoki specificity tartibsiz 2.1-bob. Yechimi: BEM joriy qiling — har komponentga noyob blok nomi; bitta class = bitta specificity 2.4-bob.

Xato 2 — Sayt klaviatura bilan ishlamaydi

Sababi: div/spanga onclick 2.7-bob; interaktiv element fokuslanmaydi. Yechimi: <button>/<a> ishlating; tabolanishni Tab bilan tekshiring (sichqonchani qo'yib, faqat klaviatura bilan sayt bo'ylab yuring).

Xato 3 — Lighthouse/axe past a11y ball beradi

Sababi: alt yo'q, label yo'q, kontrast past, til (lang) belgilanmagan. Yechimi: DevTools Lighthouse 0.5-bob yoki axe DevTools kengaytmasini ishlating — aniq muammolarni ko'rsatadi va tuzating.

Xato 4 — Ekran o'quvchi ikonka tugmani o'qiy olmaydi

Sababi: matnsiz tugma (faqat /) — nomi yo'q 2.10-bob. Yechimi: aria-label="Yopish" qo'shing.

Xato 5 — Rang past kontrast

Sababi: och rang oq fonda 2.9-bob. Yechimi: WebAIM Contrast Checker bilan tekshiring; matnni to'qroq qiling (≥4.5:1).

7. Integratsiya — bu mavzu stack'ning qayerida uchraydi

• HTML 1.1-bob: semantik HTML — a11y'ning poydevori; BEM class'lar shu teglarga.
• CSS/SCSS (1.2, 1.6): BEM — specificityni past va tekis tutadi; SCSS & bilan qulay.
• Tailwind 1.7-bob: muqobil arxitektura (utility) — BEM o'rniga.
• React (11): komponentlar — BEM blokiga mos; a11y React'da ham muhim (htmlFor, aria-*).
• SEO 13.8-bob: semantik HTML + a11y yaxshi indeks.
• Xavfsizlik/sifat (14, 15): a11y — sifat va qonuniy talab; code review'da tekshiriladi.
• Test (8.11, 11.17): a11y testlari (axe, Testing Library).

8. Eng yaxshi amaliyotlar (best practices)

• An'anaviy CSS/SCSS loyihasida BEM ishlating — block__element--modifier; bir class = bir specificity (2.2, 2.4).
• Nesting'ni past tuting 1.6-bob — BEM allaqachon tekis.
• !important'dan qoching 2.4-bob — u specificity tartibini buzadi; to'g'ri BEM'da kerak bo'lmaydi.
• Semantik HTML — a11y'ning 80%i 2.7-bob. To'g'ri teg = bepul a11y.
• Harakatga sezgir foydalanuvchilarni hurmat qiling — prefers-reduced-motion bilan animatsiyani kamaytiring (2.9-b).
• Fokusni hech qachon o'chirmang — :focus-visible bilan chiroyli qiling 2.8-bob.
• Kontrastni tekshiring (≥4.5:1) — WebAIM/DevTools 2.9-bob.
• ARIA — oxirgi chora — avval semantik HTML 2.10-bob.
• Faqat klaviatura bilan saytni sinang — Tab bilan hamma joyga yeta olasizmi?
• Lighthouse/axe bilan a11y auditi o'tkazing — har loyihada.

9. Amaliy loyiha: "Accessible, BEM-li Komponent Kutubxonasi"

1-QISMni yakunlovchi loyiha: professional, tartibli va hammaga ochiq komponentlar to'plami.

Maqsad

BEM bilan tartibli CSS arxitekturasi va WCAG a11y tamoyillarini birlashtirib, qayta ishlatiladigan, ochiq (accessible) komponentlar yasash.

Talablar (requirements)

1. Kamida 4 BEM komponenti: .tugma, .karta, .forma, .menyu — har biri block + element + modifier bilan (2.2, Misol 1). SCSS & bilan yozing 1.6-bob.
2. Semantik HTML: har komponent to'g'ri teglarda (<button>, <nav>, <article>, <label>) 2.7-bob.
3. Tugma variantlari (modifier): .tugma--asosiy, .tugma--xavf, .tugma--katta.
4. Accessible forma: har input <label> bilan; matnsiz tugmaga aria-label; :focus-visible ko'rinadigan fokus (Misol 2, 3).
5. Skip-link qo'shing (Misol 3).
6. Kontrast: barcha matn ≥4.5:1 (WebAIM bilan tekshiring) 2.9-bob.
7. Klaviatura testi: sichqonchani qo'yib, faqat Tab/Enter bilan butun sahifani aylanib chiqing.
8. Audit: Lighthouse yoki axe DevTools bilan a11y ballni oling (maqsad: 95+).
9. (Bonus) Dropdown/modal'ga aria-expanded/role qo'shing 2.10-bob.

Maslahatlar (hint)

• BEM: &__element, &--modifier SCSS'da (1.6, Misol 1).
• Fokus uchun :focus-visible (sichqonchada chiqmaydi, klaviaturada chiqadi) 2.8-bob.
• Kontrast: webaim.org/resources/contrastchecker — rang juftini kiriting.
• axe DevTools yoki Lighthouse (DevTools Lighthouse Accessibility) bilan auditlang.
• Klaviatura test: Tab bilan har interaktiv elementga yeta olasizmi va fokus ko'rinadimi?

"Tayyor" mezonlari (acceptance criteria)

• Kamida 4 komponent BEM (block__element--modifier) bilan.
• Har selektor bitta class (tekis specificity).
• Semantik HTML (button/nav/article/label) ishlatilgan.
• Har input label bilan; matnsiz tugmada aria-label.
• :focus-visible ko'rinadigan fokus bor (o'chirilmagan).
• Skip-link ishlaydi.
• Barcha matn kontrasti ≥4.5:1.
• Faqat klaviatura bilan butun sahifa boshqariladi.
• Lighthouse/axe a11y ball ≥95.

Yechim kodi ataylab berilmagan — bu loyihani o'zingiz yozib ko'ring.

10. Xulosa — 1-QISM yakunlandi!

Bu bobda professional CSS va inklyuziv veb tamoyillarini o'rgandik:

• BEM (block__element--modifier) — CSS'ni tartibli nomlash; har selektor bitta class tekis specificity 1.2-bob, konflikt yo'q. SCSS & bilan qulay 1.6-bob. !important'dan qoching 2.4-bob.
• Accessibility (a11y) uchta ustunda: semantik HTML (80%ini beradi — 1.1), klaviatura (:focus-visible, mantiqli Tab, tabindex), rang kontrasti (≥4.5:1 AA). Animatsiyada prefers-reduced-motionni hurmat qiling (2.9-b).
• ARIA — semantik HTML'ning o'rnini bosmaydi, to'ldiradi (aria-label, role, aria-live — faqat zarurda).
• Auditi: Lighthouse/axe DevTools.

1-QISM (HTML, CSS va zamonaviy stillar) — to'liq yakunlandi!

Siz endi bilasiz:

• 1.1 HTML — semantik tuzilma, formalar, jadval, media
• 1.2 CSS asoslari — selektorlar, box model, ranglar, birliklar
• 1.3 Flexbox — bir o'lchamli layout
• 1.4 CSS Grid + positions — ikki o'lchamli layout
• 1.5 Responsive dizayn — media queries, mobile-first
• 1.6 SCSS/Sass — o'zgaruvchi, nesting, mixin, modul
• 1.7 Tailwind CSS — utility-first
• 1.8 Figma — dizayndan kodga
• 1.9 BEM + accessibility — arxitektura va inklyuziya

Endi siz chiroyli, responsive, tartibli va hammaga ochiq statik saytlar yasay olasiz. Lekin ular hozircha jonsiz — bosilganda hech narsa bo'lmaydi, ma'lumot saqlamaydi.

Keyingi bob — 2.1-bob: JavaScript kirish (o'zgaruvchilar, ma'lumot turlari, operatorlar). 2-QISM boshlanadi — endi saytga jon kiritamiz! JavaScript bilan sayt fikrlaydigan, javob beradigan, o'zgaradigan bo'ladi. Bu — butun kitobning eng katta va eng muhim qismi.

Foydalanilgan rasmiy/ishonchli manbalar

• getbem.com — BEM naming (Block, Element, Modifier), __/-- konvensiyasi
• MDN Web Docs — WAI-ARIA basics, accessibility, :focus-visible
• WebAIM — color contrast (WCAG AA 4.5:1 / 3:1), keyboard accessibility
• W3C WAI / WCAG 2.x — accessibility success criteria