CSS nesting: qoidalarni Sass'siz ichma-ich yozish va & selektori

Qisqacha: Zamonaviy CSS'da bir qoidani boshqasining ichiga yozish mumkin: .taom-karta { & h3 { ... } } — bu .taom-karta h3 bilan bir xil. Belgi & — "tashqi qoidaning selektori". Yopishgan &:hover — shu elementning o'zi hover'da. Bo'sh joyli & :hover esa uning ichidagi hover'dagi element. Qoida ichiga @media va @container ni ham yozsa bo'ladi. Ikki tuzoq bor: tashqi selektor ro'yxat bo'lsa, u :is() kabi eng og'ir qismining og'irligini oladi; Sass'dagi &__nom kabi so'z ulash native CSS'da ishlamaydi. Qoida — ko'pi bilan 3 daraja chuqurlik.

Bu darsda

• Ichma-ich qoidani yozib, u qaysi oddiy selektorga teng ekanini ayta olasiz.
• & ni turli joyda ishlatasiz: &:hover, &.yangi, .ota &, & + &.
• @media, @container va @supports ni komponent ichiga yozasiz.
• Ichma-ich selektorning og'irligini (specificity) hisoblay olasiz va :is() tuzog'ini taniysiz.
• Native nesting va Sass nesting farqini bilasiz, chuqurlikni cheklaysiz.

Oldin bilishingiz kerak: Specificity, Mantiqiy pseudo-klasslar: :is(), :where(), Asosiy selektorlar va kombinatorlar, Container queries.

1. Nega bu kerak?

Portfoliongizning Yakuniy loyiha dagi non yo'li bo'limini oching:

nav[aria-label="Non yo'li"] { ... }
nav[aria-label="Non yo'li"] ol { ... }
nav[aria-label="Non yo'li"] li { ... }
nav[aria-label="Non yo'li"] li + li::before { ... }
nav[aria-label="Non yo'li"] li:last-child { ... }
nav[aria-label="Non yo'li"] [aria-current="page"] { ... }

Bir xil nav[aria-label="Non yo'li"] olti marta. Ertaga aria-label o'zgarsa — olti joyni tuzatasiz, bittasini unutasiz. Ko'z ham qiynaladi: bu olti qoida bitta komponentga tegishli ekanini birinchi qarashda ko'rish qiyin.

Xuddi shu kod ichma-ich:

nav[aria-label="Non yo'li"] {
  ...
  & ol { ... }
  & li { ... }
  & [aria-current="page"] { ... }
}

Uzun nom bir marta yozildi, komponent bitta blokda. Buni CSS nesting (ichma-ich yozish) deyishadi. Uzoq yillar u faqat Sass kabi vositalarda bor edi (Sass/SCSS 1 — kursda keyinroq). Endi brauzerning o'zi tushunadi.

Specificity darsida "ichma-ich yozishda og'irlik sezdirmay o'sib ketishi mumkin" degan edik. Bugun aynan qanday o'sishini ham ko'ramiz.

Qisqa tarix. Sass 2006-yilda paydo bo'ldi va ichma-ich yozish uning eng sevimli imkoniyatiga aylandi. Dasturchilar o'n yildan ortiq "shuni brauzerning o'ziga qo'shing" deb so'radi. Qiyinchilik tezlikda edi: brauzer selektorlarni juda tez tekshirishi kerak, ichma-ichlik esa ularni murakkablashtiradi. Yechim topildi, 2023-yilda hamma asosiy brauzer uni chiqardi. Bu dars — shu yechimning qoidalari haqida.

O'xshatish: manzil. "Toshkent, Chilonzor tumani, 5-kvartal, 12-uy" ni har xat uchun to'liq yozish o'rniga, bir marta "Chilonzor, 5-kvartal" deb sarlavha qo'yasiz va ostiga uylarni sanaysiz: 12-uy, 14-uy, 20-uy.

2. Birinchi ichma-ich qoida

2.1 Sintaksis

<style>
  body { font-family: system-ui, sans-serif; }
  .taom-karta {
    max-width: 16rem;
    padding: 0.5rem 1rem;
    border: 2px solid #2f6b3a;
    border-radius: 0.5rem;

    & h3 {
      margin-block: 0.25rem;
      color: #2f6b3a;
    }

    & .narx {
      font-weight: bold;
      color: #b4461a;
    }
  }
</style>
<article class="taom-karta">
  <h3>Lag'mon</h3>
  <p class="narx">28 000 so'm</p>
</article>
<h3>Karta tashqarisidagi sarlavha</h3>

Nimaga qarang: karta ichidagi "Lag'mon" yashil, narx qizg'ish va qalin. Karta tashqarisidagi sarlavha esa oddiy qora — & h3 faqat karta ichidagi h3 ni tanladi.

Brauzer buni shunday o'qiydi:

Deklaratsiyalar va ichki qoidalar bitta blokda yashaydi. Chrome'da tekshirdik: DevTools'dagi Styles panelida ham qoida .taom-karta ichida, & bilan ko'rinadi.

2.2 & — "tashqi selektor"

& (nesting selektori) — tashqi qoidaning selektori o'rniga turadigan belgi. Uni "shu element" deb o'qing. & h3 — "shu elementning ichidagi h3".

& siz ham yozsa bo'ladi: .taom-karta { h3 { ... } } — hozirgi brauzerlar uni & h3 deb tushunadi. Chrome'da tekshirdik: bunday qoidani brauzer o'zi & h3 qilib saqladi. Lekin nesting'ning birinchi versiyalarida teg nomi bilan boshlangan ichki selektor & siz ishlamas edi. Kursda doim & yozamiz — o'quvchiga ham, eski brauzerga ham aniq.

2.3 Brauzer ichma-ich qoidani qanday o'qiydi

Brauzer har ichki selektorni bitta qoida bo'yicha "yoyadi":

flowchart TD
  A["Ichki selektor"] --> B{"Ichida & bormi?"}
  B -->|Yo'q| C["Boshiga '& ' qo'shiladi"]
  B -->|Ha| D["O'zgarishsiz"]
  C --> E["& o'rniga tashqi selektor"]
  D --> E
  E --> F["Oddiy selektor"]

Nimaga qarang: & yo'q bo'lsa, brauzer o'zi & (bo'sh joy bilan) qo'shadi — ya'ni "ichidagi" ma'nosi. Keyin & o'rniga tashqi selektor qo'yiladi. Ichma-ichlik bir necha qavat bo'lsa, bu jarayon ichkaridan tashqariga qarab takrorlanadi: .taom-karta { & .narx { &:hover {} } } → .taom-karta .narx:hover.

Aniqrog'i, & o'rniga tashqi selektor :is(...) ichida qo'yiladi. Bitta oddiy selektorda bu hech narsani o'zgartirmaydi. Ro'yxat bo'lsa esa farq qiladi — «Og'irlik tuzog'i» bo'limida ko'ramiz.

2.4 Qo'llab-quvvatlash

Baseline ma'lumotiga ko'ra CSS nesting 2023-yil dekabrda hamma asosiy brauzerga yetib keldi va 2026-yil iyunidan keng tarqalgan (Widely available). Bugun uni bemalol ishlatish mumkin. Juda eski brauzer ichma-ich qoidalarni tushunmaydi — kerak bo'lsa, vositalar ularni oddiy CSS'ga "yoyib" beradi (PostCSS va Lightning CSS darsida).

Tekshirib ko'ring: .aksiya { & strong { color: #b4461a; } } — oddiy CSS'da qanday yoziladi va qaysi elementni bo'yaydi?

3. & ning joyi ma'noni o'zgartiradi

3.1 Bo'sh joy muhim

.taom-karta {
  &:hover { ... }       /* .taom-karta:hover */
  & :hover { ... }      /* .taom-karta :hover */
  &.yangi { ... }       /* .taom-karta.yangi */
  & .yangi { ... }      /* .taom-karta .yangi */
}

Asosiy selektorlar darsidagi qoida: bo'sh joy — "ichidagi" kombinatori. Shuning uchun:

• &:hover — kartaning o'zi sichqoncha ostida.
• & :hover — karta ichidagi qaysidir element sichqoncha ostida.
• &.yangi — kartaning o'zida yangi class'i ham bor.
• & .yangi — karta ichidagi yangi class'li element.

Bitta bo'sh joy — butunlay boshqa selektor. Bu nesting'dagi eng ko'p uchraydigan xato.

3.2 Boshqa kombinatorlar

.taom-karta {
  & > h3 { ... }        /* bevosita bola */
  & + & { ... }         /* karta ortidan kelgan karta */
  & ~ p { ... }         /* kartadan keyingi p qo'shnilar */
}

& + & — ikki & bir selektorda. Ro'yxatdagi kartalar orasiga masofa berishning qisqa yo'li: Margin sirlari darsidagi "boyqush" naqshining ichma-ich shakli.

3.3 & oxirida: kontekst

& faqat boshda turmaydi:

<style>
  body { font-family: system-ui, sans-serif; }
  .narx {
    font-weight: bold;
    color: #b4461a;

    .aksiya & {
      text-decoration: line-through;
      color: #5b6660;
    }
  }
</style>
<p>Osh: <span class="narx">35 000 so'm</span></p>
<p class="aksiya">Aksiyadan oldin:
  <span class="narx">35 000 so'm</span></p>

Nimaga qarang: birinchi narx qizg'ish va qalin. Ikkinchisi — .aksiya ichida — kulrang va ustidan chizilgan. .aksiya & = .aksiya .narx: "aksiya ichidagi narx". Qoida .narx blokida yashaydi — narx haqidagi hamma narsa bir joyda, garchi shart ota element haqida bo'lsa ham.

3.4 Holatlarni birlashtirish

& ga istalgan pseudo-klassni yopishtirish mumkin — Mantiqiy pseudo-klasslar ham:

.taom-karta {
  &:not(.tugadi):hover {
    border-color: #b4461a;
  }
  &:has(.aksiya) {
    border-width: 3px;
  }
  &:is(:hover, :focus-within) .narx {
    text-decoration: underline;
  }
}

• Tugamagan karta hover'da qizg'ish chegara oladi — tugaganlari javob bermaydi.
• Ichida aksiya yozuvi bor karta qalinroq chegarada.
• Karta hover'da yoki uning ichidagi havola fokusda bo'lsa, narx tagiga chiziladi.

Oddiy CSS'da bular .taom-karta:not(.tugadi):hover, .taom-karta:has(.aksiya) va .taom-karta:is(:hover, :focus-within) .narx bo'lardi. Ichma-ich shaklda hammasi kartaning bitta blokida — "karta qanday holatlarda qanday ko'rinadi" degan savolga bitta joyda javob.

3.5 Psevdo-elementlar

&::before — ishlaydi: "shu elementning ::before i". Teskarisi esa yo'q: .narx::before { &:hover { ... } } hech narsani tanlamaydi, chunki & psevdo-elementni ifodalay olmaydi (MDN). Holatni ota qoidada yozing: .narx:hover::before.

Tekshirib ko'ring: .taom-karta { &.tugadi { opacity: 0.5; } } va .taom-karta { & .tugadi { opacity: 0.5; } } — qaysi biri "tugagan taom kartasini" xiralashtiradi?

4. Ichma-ich @media, @container va @supports

4.1 Komponent o'z shartlari bilan

Eng foydali imkoniyat — @-qoidani komponent ichiga yozish:

<style>
  body { font-family: system-ui, sans-serif; }
  .taom-karta {
    padding: 0.5rem 1rem;
    border: 2px solid #2f6b3a;
    border-radius: 0.5rem;

    @media (width >= 40rem) {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    &:hover {
      border-color: #b4461a;
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: translate 0.2s ease-out;

      &:hover {
        translate: 0 -4px;
      }
    }
  }
</style>
<article class="taom-karta">
  <h3>Manti</h3>
  <p class="narx">30 000 so'm</p>
</article>

Nimaga qarang: telefon enida (360) nom va narx ustma-ust. Planshet va kompyuterda (768, 1280) karta bitta qatorga yoyiladi: nom chapda, narx o'ngda. Hover'da chegara qizg'ish bo'ladi va harakatga ruxsat bo'lsa, karta biroz ko'tariladi.

Ikki narsa:

• @media ichida to'g'ridan-to'g'ri deklaratsiya (display: flex) — u tashqi selektorga (.taom-karta) tegadi. Selektorni takrorlash shart emas.
• Harakat etikasi darsidagi no-motion-first endi karta blokining ichida. Kartaning butun "hikoyasi" — oddiy holat, keng ekran, hover, harakat — bitta joyda.

@container ham xuddi shunday (Container queries), @supports ham (Brauzer mosligi).

4.2 Media query: fayl oxirida yoki komponent ichida?

05-qismda media query'larni fayl oxiriga, breakpoint bo'yicha guruhlab yozgan edik (Mobile-first). Endi ikkinchi yo'l ham bor:

Katta loyihalarda ikkinchisi ko'proq tanlanadi: komponentni o'chirsangiz, uning media query'lari ham birga ketadi, "yetim" qoida qolmaydi. Brauzer uchun farqi yo'q — natija bir xil. Asosiysi, bitta faylda bitta usul bo'lsin.

Tekshirib ko'ring: .taom-karta { @media (width >= 40rem) { & .narx { font-size: 1.25rem; } } } — oddiy CSS'da qanday yoziladi?

@media (width >= 40rem) {
  .taom-karta .narx {
    font-size: 1.25rem;
  }
}

4.3 Tartib: avval deklaratsiyalar

Deklaratsiyani ichki qoidadan keyin ham yozsa bo'ladi:

.taom-karta {
  color: #1f2a24;
  & h3 { color: #2f6b3a; }
  border: 2px solid #2f6b3a; /* ichki qoidadan keyin */
}

Hozirgi brauzerlar uni to'g'ri, yozilgan tartibda qo'llaydi — Chrome'da tekshirdik. Lekin nesting'ning birinchi versiyalarida bunday deklaratsiyalar blok boshiga "ko'chirilardi". O'qish uchun ham qulayroq qoida: avval o'zining deklaratsiyalari, keyin ichki qoidalar, oxirida @-qoidalar. Stylelint — CSS kodini tekshiradigan vosita — qo'shimcha plagin bilan bu tartibni avtomatik nazorat qila oladi. Uni Stylelint darsida o'rganamiz, hozir bilish shart emas.

5. Og'irlik tuzog'i: & — bu :is()

5.1 Ro'yxat bo'lsa

Specificity darsidagi hisobni eslang: id — (1,0,0), class — (0,1,0), teg — (0,0,1). Endi:

#bosh, .taom-karta {
  & .narx { color: #2f6b3a; }
}

Bu #bosh .narx, .taom-karta .narx emas. CSS standarti bo'yicha & o'zini :is() kabi tutadi: :is(#bosh, .taom-karta) .narx. Mantiqiy pseudo-klasslar darsidan: :is() ning og'irligi — ro'yxatdagi eng og'ir selektorniki. Demak, karta ichidagi narx ham (1,1,0) og'irlik oladi — go'yo unda id bor.

<style>
  body { font-family: system-ui, sans-serif; }
  #bosh, .taom-karta {
    & .narx { color: #2f6b3a; }
  }
  /* aksiya narxini qizg'ish qilmoqchimiz: (0,2,0) */
  .aksiya .narx {
    color: #b4461a;
  }
</style>
<article class="taom-karta aksiya">
  <h3>Ko'k choy</h3>
  <p class="narx">5 000 so'm</p>
</article>

Nimaga qarang: narx yashil qoldi, qizg'ish emas. .aksiya .narx (0,2,0) pastda yozilgan, lekin yutqazdi — ichma-ich qoida (1,1,0) og'irlikda. Sahifada #bosh degan element umuman yo'q, uning og'irligi esa baribir ishladi.

5.2 Sass boshqacha

Sass — CSS'ning kengaytmasi. Uning kodini maxsus dastur oddiy CSS faylga aylantiradi (buni kompilyatsiya deyishadi, Sass/SCSS 1 darsida). Sass xuddi shu kodni ikkita alohida selektorga yoyadi. sass 1.105 bilan kompilyatsiya qildik:

#bosh .narx, .taom-karta .narx {
  color: #2f6b3a;
}

Bu yerda karta narxining og'irligi (0,2,0) — id'siz. Ya'ni bir xil ko'rinadigan kod Sass'da va brauzerda turli og'irlik beradi. Sass'dan native CSS'ga ko'chayotgan loyihalarda aynan shu joy buziladi.

5.3 Qanday qochish

• Tashqi selektorni ro'yxat qilmang — bitta komponent, bitta selektor.
• Tashqi selektorda id ishlatmang (Specificity darsidagi qoida).
• Ro'yxat kerak bo'lsa, og'irlikni nolga tushiring: :where(#bosh, .taom-karta) { & .narx { ... } }.

Bitta selektor bo'lsa (.taom-karta { & .narx {} }), :is(.taom-karta) .narx ning og'irligi .taom-karta .narx bilan bir xil — tuzoq yo'q.

Tekshirib ko'ring: header, footer { & a { color: #2f6b3a; } } — footer a ning og'irligi qancha? Oddiy yozuvdagidan farq qiladimi?

6. Sass'dan farqlar

6.1 So'z ulash yo'q

Sass'da & matnga yopishtirilib, yangi class nomi yasaladi. CSS metodologiyalari darsidagi BEM nomlari shunday yoziladi:

.taom-karta {
  &-nomi { color: #2f6b3a; }  /* Sass: .taom-karta-nomi */
}

Native CSS'da & — selektor, matn bo'lagi emas. Chrome'da tekshirdik: &-nomi li ichki qoida butunlay tashlab yuborildi — .taom-karta-nomi hech qanday rang olmadi. Sass esa 1.105-bob uni .taom-karta-nomi ga aylantirdi. Native CSS'da to'liq nomni yozing: .taom-karta-nomi { ... } — ichma-ich emas, yonma-yon.

6.2 Boshqa farqlar

6.3 Nega brauzer Sass kabi yoymaydi?

Savol tug'iladi: brauzer ham ro'yxatni alohida selektorlarga yoysa, og'irlik tuzog'i bo'lmasdi-ku? Sababi — o'lcham. Tasavvur qiling: tashqi qoidada 3 ta selektor, uning ichida 3 ta, uning ichida yana 3 ta. Yoyilganda 3 × 3 × 3 = 27 ta selektor chiqadi. Yana bir qavat qo'shsangiz — 81 ta. Sass buni bir marta, kompyuteringizda qiladi va tayyor faylni beradi. Brauzer esa har sahifa ochilganda, har foydalanuvchining telefonida qilishi kerak bo'lardi.

:is() bilan esa selektor yoyilmaydi: :is(a, b, c) — bitta selektor, ichida ro'yxat. Tezlik uchun qilingan tanlov og'irlik qoidasini o'zgartirdi. Buni bilsangiz, tuzoqdan qochish oson.

Qaysi birini tanlash — Sass/SCSS 1 darsida. Hozircha: oddiy loyihada native nesting yetadi va hech qanday vosita kerak emas.

7. Chuqurlik: 3 darajadan oshirmang

/* ❌ 5 daraja — "zinapoya" */
main {
  & section {
    & .taom-karta {
      & p {
        & .narx {
          color: #b4461a;
        }
      }
    }
  }
}

Bu main section .taom-karta p .narx — og'irligi (0,2,3), HTML tuzilishiga qattiq bog'langan: p ni div ga almashtirsangiz, narx rangini yo'qotadi. O'qish ham qiyin — qavslarni sanab chiqish kerak.

Qoidalar:

• Ko'pi bilan 3 daraja (komponent → uning qismi → holat yoki @-qoida).
• Ichma-ich yozish — qisqartirish uchun, HTML daraxtini ko'chirish uchun emas. Selektor oddiy CSS'da ham qisqa bo'lsin: .taom-karta .narx yetadi.
• Yaxshi nomzodlar: holatlar (&:hover, &[open]), modifikatorlar (&.yangi), @media, bevosita qismlar.

To'g'risi:

.taom-karta {
  & .narx {
    color: #b4461a;
  }
}

7.1 Qachon ichma-ich yozmaslik

Ichma-ichlik — vosita, maqsad emas. Uch holatda oddiy yozuv yaxshiroq:

• Bitta ichki qoida. .aksiya { & strong { ... } } o'rniga .aksiya strong { ... } qisqaroq va aniqroq.
• Mustaqil komponent. Karta ichidagi tugma boshqa joylarda ham ishlatilsa, uning qoidalari kartaning ichida emas, o'z blokida bo'lsin. Aks holda karta tashqarisidagi tugma uslubsiz qoladi.
• Global qoidalar. body, h1, a kabi hamma sahifaga tegishli qoidalar — Yakuniy loyiha dagi "Umumiy" bo'lim — ichma-ich yozilmaydi.

Tekshirib ko'ring: Hamkasbingiz .taom-karta { & .bron-havola { ... } } yozdi — karta ichidagi "Stolni band qilish" havolasi uchun. Ertaga xuddi shunday havola bosh sahifaning tepasida ham kerak bo'ldi. Nima muammo?

8. Ko'p uchraydigan xatolar

8.1 &:hover o'rniga & :hover

Bo'sh joy "ichidagi" ma'nosini beradi — karta hover'da o'zgarmaydi, uning ichidagi elementlar esa kutilmaganda o'zgaradi. Tuzatish: holat va class'ni & ga yopishtiring: &:hover, &.yangi.

8.2 Sass odatida &-nomi

Qoida jim tashlanadi. Tuzatish: to'liq class nomini alohida qoidada yozing.

8.3 Ro'yxatli tashqi selektor

#bosh, .taom-karta { & .narx {} } — og'irlik id darajasiga ko'tariladi. Tuzatish: alohida qoidalar yoki :where().

8.4 Chuqur zinapoya

5–6 daraja — og'ir va mo'rt selektor. Tuzatish: 3 darajadan oshsa, ichki qismga o'z nomini bering yoki ichma-ichlikdan chiqaring.

8.5 Deklaratsiya ichki qoidalar orasida

color ichki qoidadan keyin yozilgan. Hozirgi brauzerda ishlaydi, lekin kodni o'qigan odam uni topa olmaydi, eski brauzer esa boshqa tartibda qo'llashi mumkin. Tuzatish: o'z deklaratsiyalarini blok boshiga yig'ing.

9. Mashqlar

1-mashq (oson): Oddiy CSS'ga yoying

Har ichki qoidani oddiy selektorga aylantiring:

.aksiya {
  & strong { font-weight: bold; }
  &:hover { background: #fffaf0; }
  footer & { font-size: 0.875rem; }
  & + & { margin-block-start: 1rem; }
}

Ishora: & o'rniga .aksiya ni qo'ying.

2-mashq (o'rta): «Bahor» menyusini ichma-ich yozing

.taom-karta {
  border: 2px solid #2f6b3a;
}
.taom-karta:hover {
  border-color: #b4461a;
}
.taom-karta.tugadi {
  opacity: 0.6;
}
.taom-karta .taom-nomi {
  color: #2f6b3a;
}
.taom-karta .narx {
  color: #b4461a;
}
@media (width >= 40rem) {
  .taom-karta {
    padding: 1rem;
  }
}

Hammasini bitta .taom-karta blokiga yig'ing. Og'irlik o'zgarmasin.

Ishora: «Tartib» bo'limi — avval deklaratsiyalar, keyin qoidalar, oxirida @-qoidalar.

.taom-karta {
  border: 2px solid #2f6b3a;

  &:hover {
    border-color: #b4461a;
  }
  &.tugadi {
    opacity: 0.6;
  }
  & .taom-nomi {
    color: #2f6b3a;
  }
  & .narx {
    color: #b4461a;
  }

  @media (width >= 40rem) {
    padding: 1rem;
  }
}

3-mashq (qiyin): Nega narx rangi o'zgarmayapti?

Hamkasbingiz Sass'dan ko'chirilgan kodni brauzerda ishlatdi:

#menyu, .taom-karta {
  &-nomi { color: #2f6b3a; }
  & .narx { color: #1f2a24; }
}

.aksiya .narx {
  color: #b4461a;
}

Ikki shikoyat: (1) taom nomlari yashil emas; (2) aksiya kartasidagi narx qizg'ish emas. Har birining sababini ayting va kodni native CSS uchun tuzating. Og'irlik iloji boricha past bo'lsin.

Ishora: «So'z ulash yo'q» va «Og'irlik tuzog'i» bo'limlari.

.taom-karta {
  & .taom-nomi {
    color: #2f6b3a;
  }
  & .narx {
    color: #1f2a24;
  }
}

.aksiya .narx {
  color: #b4461a;
}

4-mashq: Portfolio qadami — non yo'lini ichma-ich yozing

«Nega bu kerak?» bo'limidagi portfolio kodini oling va nav[aria-label="Non yo'li"] ning hamma qoidasini bitta blokka yig'ing.

1. Tashqi selektor bir marta yozilsin.
2. Og'irlik va natija o'zgarmasin — sahifa avvalgidek ko'rinsin.
3. Chuqurlik 3 darajadan oshmasin.
4. Tayyor bo'lgach, npm run format va npm run check — Prettier ichma-ich CSS'ni ham to'g'ri tekislaydi.

Ishora: li + li::before va li:last-child — li ning holatlari: ularni & li ichiga & + li::before va &:last-child qilib yozsa bo'ladi.

/* --- Non yo'li: bir qator, oxirgisi sig'masa "…"
   (Auto margin va Native CSS nesting darslari) --- */
nav[aria-label="Non yo'li"] {
  margin-block-start: 1rem;
  font-size: 0.875rem;

  & ol {
    display: flex;
    gap: 0.5rem;
  }

  & li {
    display: flex;
    flex: none;

    & + li::before {
      content: "/" / "";
      margin-inline-end: 0.5rem;
      color: var(--rang-ikkinchi);
    }

    &:last-child {
      flex-shrink: 1;
      min-width: 0;
    }
  }

  & [aria-current="page"] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

10. Real ishda

• Zamonaviy loyihalar Sass'dan native nesting'ga o'tmoqda: bitta vosita kam, kompilyatsiya yo'q. Lekin eski katta loyihalarda Sass hali ko'p (Sass/SCSS 1).
• Komponent CSS'i — React, Vue kabi freymvorklarda (kursda keyinroq) har komponentning CSS fayli odatda bitta tashqi selektor va uning ichidagi holatlardan iborat. Nesting shu uslubga mos.
• Kod ko'rigi. "Chuqurlik 3 dan oshmasin" va "tashqi selektor ro'yxat bo'lmasin" — ko'p jamoalarning yozilgan qoidasi, Stylelint bilan tekshiriladi.
• DevTools. Styles panelida ichma-ich qoida tashqi qoidasi bilan birga ko'rsatiladi, uni o'sha yerda tahrirlash ham mumkin. Qaysi qoida yutganini bilish uchun esa Computed tabini oching (DevTools'da CSS) — u yakuniy qiymatni va uni bergan selektorni ko'rsatadi.
• Intervyuda so'raladi: "Native nesting va Sass nesting farqi?", "&:hover va & :hover farqi?", "Ichma-ich selektorning specificity'si qanday hisoblanadi?".

Xulosa

• Ichma-ich qoida = tashqi selektor + ichki selektor: .taom-karta { & h3 {} } → .taom-karta h3.
• & — "shu element"; &:hover/&.yangi — yopishgan, & .yangi — ichidagi; .ota & — kontekst.
• @media, @container, @supports komponent ichida yoziladi — selektor takrorlanmaydi.
• & — :is(): ro'yxatli tashqi selektor eng og'irining og'irligini beradi.
• &-nomi (Sass odati) native CSS'da ishlamaydi; to'liq nomni yozing.
• Tartib: deklaratsiyalar → ichki qoidalar → @-qoidalar; chuqurlik ≤ 3.

Keyingi dars: @property: turlangan custom property'lar — CSS o'zgaruvchisiga tur berib, gradient va burchaklarni ham animatsiya qilishni o'rganamiz.

Manbalar

• MDN: "CSS nesting", "Using CSS nesting", "Nesting and specificity", "& nesting selector" — developer.mozilla.org
• W3C: "CSS Nesting Module" — drafts.csswg.org/css-nesting
• Sass: "Style Rules — Nesting", "Parent Selector" — sass-lang.com/documentation
• web-features (Baseline ma'lumotlari): "nesting" — github.com/web-platform-dx/web-features