Kaskadni boshqarish: @layer va @scope

Qisqacha: @layer — CSS qoidalarini nomli qatlamlarga yig'ish. @layer reset, asos, komponentlar; tartibni e'lon qiladi va keyingi qatlam oldingisidan selektor og'irligiga qaramay yutadi. Qatlamga kirmagan stil hammasidan kuchli. Qatlamlarda !important esa teskari ishlaydi: eng birinchi qatlamdagisi eng kuchli. Butun faylni qatlamga @import url("reset.css") layer(reset) qo'yadi. Ikkinchi vosita — @scope (.taom-karta) { ... }: u qoidalarni DOM'ning bir bo'lagiga chegaralaydi, ikki mos qoidadan esa elementga yaqinroq ildizdagisini tanlaydi.

Bu darsda

• @layer bilan qatlamlar tartibini e'lon qilasiz va qatlam og'irlikdan oldin tekshirilishini natijada ko'rasiz.
• Qatlamsiz stil, !important va revert-layer qatlamlarda qanday ishlashini tushuntirasiz.
• «Bahor»ning yetti faylini @import ... layer() bilan qatlamlarga joylaysiz va begona CSS'ni o'z qatlamiga "qamaysiz".
• @scope bilan stilni kartaga chegaralaysiz, "donut" chegara va yaqinlik qoidasini ishlatasiz.
• Ikkala imkoniyatning brauzer mosligini bilasiz.

Oldin bilishingiz kerak: Kaskad, Specificity, Meros va global kalit so'zlar, CSS reset, CSS metodologiyalari.

1. Nega bu kerak?

Oldingi darsda «Bahor» CSS'ini yetti faylga bo'ldik. Tartib — ITCSS: reset tepada, komponentlar pastda. Bu tartib hozircha ishlaydi. Lekin u ikki narsaga tayanadi:

1. Fayllar tartibi to'g'ri. Kimdir asosiy.css da importlarni almashtirsa, reset komponentlarni bosib ketishi mumkin.
2. Og'irliklar "odobli". Tepadagi qoida pastdagidan og'ir bo'lmasa. Og'irroq bo'lsa, u tartibga qaramay yutadi.

Ikkinchisini biz o'zimiz nazorat qilamiz: reset :where() bilan yozilgan. Lekin hamma CSS'ni biz yozmaymiz. Otabek bron formasiga tayyor sana tanlash vidjetini qo'shmoqchi, deylik — u o'z CSS fayli bilan keladi. Uning ichida shunday qator bor:

form input[type="date"] {
  border: 1px solid #999;
  font-size: 14px;
}

Og'irligi (0,1,2). Bizning asos.css dagi input qoidasi — (0,0,1). Vidjet fayli qayerda chaqirilmasin, u bizning maydon qoidamizni yengadi. Endi uni yengish uchun biz ham og'irroq selektor yozamiz, vidjetning keyingi versiyasi yanada og'irroq... CSS metodologiyalari darsidagi "og'irlik urushi".

Kaskad darsida bunga javobning faqat nomini aytgan edik: kaskad qatlamlari. Bugun ularni to'liq o'rganamiz. Qatlam — ko'p qavatli uy: yuqori qavatdagi xona, qanchalik kichik bo'lmasin, pastki qavatdagi eng katta xonadan baland turadi.

2. @layer asoslari

2.1 Qatlam va tartib

Qatlam ikki xil yoziladi:

/* Tartibni e'lon qilish (statement) */
@layer reset, asos, komponentlar;

/* Qatlamga qoida qo'shish (blok) */
@layer asos {
  a {
    color: #2f6b3a;
  }
}

Birinchi qator faqat nomlar va tartibni aytadi — ichida qoida yo'q. Ikkinchisi — qoidalarni nomli qatlamga qo'yadi. Bitta qatlamga bir necha marta qo'shish mumkin: hammasi o'sha qatlamga "yig'iladi".

Asosiy qoida: ro'yxatda keyinroq turgan qatlam yutadi. Kaskad darsidagi misolni kengaytiramiz:

<style>
  @layer reset, asos, komponentlar;

  @layer komponentlar {
    .narx { color: #b4461a; }
  }
  @layer asos {
    #asosiy p span { color: #2f6b3a; }
    body { font-family: system-ui, sans-serif; }
  }
  @layer reset {
    #asosiy article p span.narx { color: black; }
  }
</style>
<main id="asosiy">
  <article>
    <p>Osh — <span class="narx">35 000 so'm</span></p>
  </article>
</main>

Nimaga qarang: narx qizg'ish. Uchta qoida narxga mos keladi. Eng og'iri — reset dagisi (1,1,3), undan keyin asos dagisi (1,0,2). Yutgan esa .narx — (0,1,0), eng yengili. Chunki u komponentlar qatlamida, u esa ro'yxatda oxirgi. Qatlamlar bloklarining faylda qaysi tartibda yozilgani ham ahamiyatsiz — birinchi qatordagi e'lon hal qildi.

2.2 Kaskadning yangi bosqichi

Kaskad darsida "qatlam — kaskadning specificity'dan oldingi bosqichi" degan edik. To'liq tartib endi shunday:

flowchart TD
  A["1. Manba va !important<br/>brauzer, muallif"] --> B["2. style atributi"]
  B --> C["3. Qatlam tartibi"]
  C --> D["4. Og'irlik (specificity)"]
  D --> E["5. Yaqinlik (@scope)"]
  E --> F["6. Faylda qaysi keyin"]

Nimaga qarang: qatlam og'irlikdan oldin tekshiriladi. Ikki qoida turli qatlamda bo'lsa, og'irlikka umuman qaralmaydi. Og'irlik faqat bir qatlam ichidagi qoidalarni solishtiradi. Yaqinlik bosqichi — shu darsning ikkinchi yarmida, @scope bilan keladi.

2.3 Qatlamsiz stil — eng kuchli

Qatlamga kirmagan oddiy qoidalar ham kaskadda qatnashadi. Ular oxirgi, eng yuqori qatlam kabi ishlaydi:

<style>
  @layer komponentlar {
    #asosiy .narx { color: #b4461a; font-weight: bold; }
  }
  span { color: #2f6b3a; }
  body { font-family: system-ui, sans-serif; }
</style>
<main id="asosiy">
  <p>Ko'k choy — <span class="narx">5 000 so'm</span></p>
</main>

Nimaga qarang: narx yashil, lekin qalin. Qatlamsiz span (0,0,1) rangni yutdi — id'li qatlamli qoidaga qaramay. font-weight ga esa raqobatchi yo'q, u qatlamdan keldi.

Bu xulq ataylab shunday qilingan. Katta loyihaga qatlamlarni asta-sekin kiritasiz: yangi kod qatlamlarga tushadi, eski qatlamsiz kod esa hali ham yutadi — hech narsa buzilmaydi. Keyin eski kodni ham bo'lak-bo'lak qatlamlarga ko'chirasiz.

Teskari tomoni: qatlamlarga o'tgan loyihada unutilgan qatlamsiz qator hammasini bosib ketadi. «Bahor»da qoida bitta: hamma CSS — qatlamda.

2.4 Birinchi eslatish tartibni belgilaydi

Qatlam tartibi uning birinchi eslatilishi bilan belgilanadi — e'londami, blokdami, farqi yo'q. Shuning uchun e'lon faylning eng boshida turadi:

<style>
  @layer komponentlar {
    .narx { color: #b4461a; }
  }
  @layer reset, komponentlar;
  @layer reset {
    span { color: black; }
  }
  body { font-family: system-ui, sans-serif; }
</style>
<p>Lag'mon — <span class="narx">28 000 so'm</span></p>

Nimaga qarang: narx qora. komponentlar bloki e'londan oldin keldi — u birinchi qatlam bo'lib qoldi. Keyingi @layer reset, komponentlar; qatori tartibni o'zgartirmaydi: komponentlar allaqachon bor, faqat reset yangi qo'shildi — oxiriga. Chrome'da tekshirdik: reset yutdi.

2.5 Nomsiz va ichma-ich qatlamlar

Ikki qo'shimcha imkoniyat — kam ishlatiladi, lekin kodda uchraydi:

• Nomsiz qatlam: @layer { ... }. Tartibda o'z joyini oladi, lekin unga keyin qoida qo'shib bo'lmaydi — nomi yo'q.
• Ichma-ich qatlam: komponentlar ichida karta va forma. Tashqaridan nuqta bilan murojaat qilinadi: @layer komponentlar.karta { ... }. Katta loyihada komponentlarni o'zaro tartiblash uchun.

Tekshirib ko'ring: Faylda @layer asos, komponentlar; e'loni bor. asos da main a (0,0,2), komponentlar da a (0,0,1), qatlamsiz joyda esa hech narsa yo'q. Qaysi qoida yutadi?

3. !important qatlamlarda

3.1 Teskari tartib

Kaskad darsida ko'rgan edik: !important deklaratsiya oddiy deklaratsiyalardan alohida, kuchliroq guruhda solishtiriladi. Qatlamlarda esa bu guruh ichidagi tartib teskari: eng birinchi qatlamning !important i eng kuchli, qatlamsiz !important esa eng kuchsiz.

Nega shunday? !important ning ma'nosi — "himoya". Reset'dagi !important aytadi: "bu qiymatga hech kim tegmasin". Agar keyingi qatlamlar uni yenga olsa, himoya ma'nosiz bo'lardi.

«Bahor» reset'idagi [hidden] qoidasi aynan shunday (display):

<style>
  @layer reset, komponentlar;
  @layer reset {
    [hidden]:not([hidden="until-found"]) {
      display: none !important;
    }
  }
  @layer komponentlar {
    .aksiya { display: block !important; }
  }
  .aksiya { display: flex !important; }
  body { font-family: system-ui, sans-serif; }
</style>
<p class="aksiya" hidden>Aksiya tugadi — ko'rinmaydi</p>
<p>Bugungi menyu tayyor.</p>

Nimaga qarang: faqat ikkinchi paragraf ko'rinadi. Aksiya matniga uchta !important display beradi: reset'da, komponentlarda va qatlamsiz joyda. Yutgani — eng birinchi qatlamdagi, reset'dagi none. Chrome'da tekshirdik: qatlamsiz !important ham uni yenga olmadi.

flowchart LR
  subgraph O["Oddiy deklaratsiyalar"]
    direction LR
    O1["reset"] --> O2["asos"] --> O3["komponentlar"] --> O4["qatlamsiz"]
  end
  subgraph I["!important"]
    direction LR
    I1["qatlamsiz"] --> I2["komponentlar"] --> I3["asos"] --> I4["reset"]
  end
  O4 --> I1

Nimaga qarang: o'q kuchsizdan kuchliga. Oddiy qoidalarda qatlamsiz stil eng kuchli, !important larda esa reset. Har qanday !important har qanday oddiy deklaratsiyadan kuchli.

3.2 Nima qilish kerak

Qatlamli loyihada !important ga qoida oddiy: faqat himoya uchun, faqat past qatlamda. Reset'dagi [hidden] — to'g'ri ishlatish. Yordamchilar qatlamida (yordamchi) "shu hamma narsadan ustun bo'lsin" deb !important yozish esa kerak emas — qatlam tartibining o'zi yordamchini komponentlardan kuchli qiladi.

Tekshirib ko'ring: yordamchi qatlamidagi .korinmas { position: absolute !important; } reset'dagi * { position: static !important; } ni yengadimi? (Ikkinchi qator — faraziy yomon reset.)

4. revert-layer

Meros darsida beshinchi global kalit so'zni va'da qilgan edik: revert-layer. U xususiyatni oldingi qatlam bergan qiymatga qaytaradi — go'yo joriy qatlamda bu deklaratsiya umuman yozilmagandek.

«Bahor»da havolalar asosiy qatlamda yashil. Komponentlar qatlamida menyu havolalari qizg'ish qilindi, lekin footer'dagi havolalarga bu tegmasligi kerak:

<style>
  @layer asos, komponentlar;
  @layer asos {
    body { font-family: system-ui, sans-serif; }
    a { color: #2f6b3a; }
  }
  @layer komponentlar {
    nav a { color: #b4461a; font-weight: bold; }
    footer nav a { color: revert-layer; }
  }
</style>
<nav><a href="menyu/">Menyu</a></nav>
<footer>
  <nav><a href="aloqa/">Aloqa</a></nav>
</footer>

Nimaga qarang: tepadagi "Menyu" qizg'ish, footer'dagi "Aloqa" — yashil, lekin qalin. revert-layer faqat rangni asos qatlamiga "qaytardi": komponentlar dagi rang bekor bo'ldi, font-weight esa qoldi. Yashil rangni qayta yozmadik — agar ertaga asos dagi havola rangi o'zgarsa, footer ham o'zi ergashadi.

Qatlamdan tashqarida (qatlamsiz qoidada) revert-layer revert kabi ishlaydi — brauzer qiymatiga qaytaradi.

5. Fayllar va qatlamlar

5.1 @import ... layer()

Butun faylni qatlamga qo'yish uchun uni o'zgartirish shart emas. Import qatorining o'zida qatlamni aytasiz:

@import url("reset.css") layer(reset);

reset.css ichidagi hamma qoida reset qatlamiga tushadi. Faylning ichida @layer yozilmaydi — u oddiy CSS bo'lib qoladi.

«Bahor»ning asosiy.css i endi shunday:

/* «Bahor» — kirish fayli: qatlamlar tartibi va importlar */
@layer tokenlar, reset, asos, layout, komponentlar, yordamchi;

@import url("tokenlar.css") layer(tokenlar);
@import url("reset.css") layer(reset);
@import url("asos.css") layer(asos);
@import url("layout.css") layer(layout);
@import url("komponentlar.css") layer(komponentlar);
@import url("yordamchi.css") layer(yordamchi);

Ikki narsaga e'tibor bering:

• @layer e'loni @import lardan oldin. Odatda @import dan oldin hech qanday qoida turmasligi kerak (CSS nima). Qatlamlar e'loni — yagona istisno: u qoida emas, faqat nomlar ro'yxati. Blok ko'rinishidagi @layer x { ... } esa istisno emas — undan keyingi importlar tashlanadi.
• Qatlamlar = ITCSS. Tartib CSS metodologiyalari darsidagi teskari uchburchak bilan bir xil. Farqi: endi bu tartib fayl joylashuviga ham, og'irlikka ham bog'liq emas. Kimdir reset.css ga (1,0,0) og'irlikdagi selektor yozsa ham, u komponentlarni yengmaydi.

Brauzer mosligi: Baseline ma'lumotiga ko'ra kaskad qatlamlari — keng tarqalgan Baseline: 2022-yil martidan beri hamma asosiy brauzerda (Chrome 99, Firefox 97, Safari 15.4). @import ... layer() va revert-layer ham shu imkoniyatning qismi.

5.2 Begona CSS'ni "qamash"

Otabekning sana tanlagichiga qaytamiz. Uning fayli — sana-tanlagich.css, biz yozmagan va o'zgartirmaydigan kod. Uni o'z qatlamiga qo'yamiz va tartibda bizning asosiy stillarimizdan oldin joylaymiz:

@layer tokenlar, reset, begona, asos, layout, komponentlar,
  yordamchi;

@import url("sana-tanlagich.css") layer(begona);

Endi vidjetning form input[type="date"] (0,1,2) qoidasi begona qatlamida. Bizning asos dagi input (0,0,1) keyingi qatlamda — u yutadi. Vidjet o'z ishini qiladi (kalendar, tugmalar), lekin maydon ko'rinishi «Bahor»niki. Uning keyingi versiyasi qanchalik og'ir selektor yozmasin — qatlam tartibi o'zgarmaydi.

<style>
  @layer reset, begona, asos;
  /* sana-tanlagich.css ning parchasi */
  @layer begona {
    form input[type="date"] {
      border: 1px solid #999;
      font-size: 14px;
    }
  }
  @layer asos {
    body { font-family: system-ui, sans-serif; }
    input {
      font: inherit;
      padding: 0.5em;
      border: 2px solid #2f6b3a;
      border-radius: 0.5rem;
    }
  }
</style>
<form action="https://example.com/bron">
  <p>
    <label for="sana">Sana</label>
    <input id="sana" name="sana" type="date" value="2026-10-05">
  </p>
</form>

Nimaga qarang: sana maydoni «Bahor»ning yashil 2 piksellik ramkasida, yumaloq burchak bilan, sahifa shriftida. Vidjetning kulrang ramkasi va 14 piksellik shrifti yutqazdi — garchi selektori ancha og'ir bo'lsa ham.

sana-tanlagich.css bu yerda faraziy — «Bahor»ga qo'shilmaydi. Lekin usul real: normalize.css, Bootstrap yoki xarita vidjetini ulaganda aynan shunday qilinadi.

Tekshirib ko'ring: Nega begona qatlami e'londa asos dan oldin turadi, oxirida emas?

5.3 Tailwind ham qatlamlarda

Tailwind (kursda alohida o'rganamiz, hozir bilish shart emas) o'z CSS'ini to'rt qatlamga joylaydi: theme, base, components, utilities. CSS reset darsidagi Preflight — base qatlamida. Shuning uchun Tailwind loyihasiga o'z CSS'ingizni qo'shganda ham shu savol bo'ladi: qoidangiz qaysi qatlamga tushadi? Buni Tailwind CSS 3 darsida amalda ko'ramiz.

5.4 DevTools'da qatlamlar

Chrome DevTools'ning Styles panelida qatlamli qoida ustida @layer komponentlar kabi sarlavha chiqadi. Panelning yuqorisidagi tugmalardan biri qatlamlar ko'rinishini ochadi: qaysi qatlamlar bor va qaysi tartibda.

6. @scope — stilni DOM bo'lagiga chegaralash

6.1 Muammo

Qatlamlar "qaysi qoida kuchli" degan savolga javob beradi. Lekin boshqa savol ham bor: "qoida qayerga tegadi?" .taom-karta img — kartadagi rasm. Ertaga kartaga mehmon sharhlari qo'shilsa va ularning ichida mehmon avatarining rasmi bo'lsa, .taom-karta img ularga ham tegadi.

@scope — qoidalarni DOM daraxtining bir bo'lagiga chegaralaydigan @-qoida:

@scope (.taom-karta) {
  :scope {
    padding: 1rem;
    border: 2px solid var(--rang-asosiy);
  }

  img {
    border-radius: 0.5rem;
  }
}

Qavs ichidagi .taom-karta — ildiz (scope root). Blok ichidagi qoidalar faqat ildiz ichidagi elementlarga tegadi. :scope — ildizning o'zi.

Bu Native CSS nesting darsidagi ichma-ich yozuvga o'xshaydi, lekin ikki farqi bor. Birinchisi — og'irlik: @scope ichidagi img ning og'irligi (0,0,1), ildiz og'irligi qo'shilmaydi. Nesting'da esa .taom-karta img — (0,1,1). Ikkinchisi — pastki chegara va yaqinlik, ularni hozir ko'ramiz.

6.2 "Donut": pastki chegara

to (...) qismi pastki chegara beradi — stil shu elementga yetganda to'xtaydi:

<style>
  body { font-family: system-ui, sans-serif; }
  @scope (.taom-karta) to (.sharh) {
    :scope {
      max-width: 20rem;
      padding: 0.5rem 1rem;
      border: 2px solid #2f6b3a;
      border-radius: 0.5rem;
    }
    p { color: #2f6b3a; font-weight: bold; }
  }
</style>
<article class="taom-karta">
  <h3>Osh</h3>
  <p>Toshkent oshi, 35 000 so'm</p>
  <div class="sharh">
    <p>Malika: "Juda mazali, yana kelaman!"</p>
  </div>
</article>

Nimaga qarang: taom tavsifi yashil va qalin, mehmon sharhi esa oddiy qora matn. Sharh karta ichida, lekin .sharh chegara — @scope undan pastga tushmadi. Shakli teshikli kulchaga o'xshagani uchun buni donut scope deyishadi: ildiz va chegara orasidagi halqa.

.sharh — shu namoyish uchun class, «Bahor» fayllariga ko'chmaydi.

6.3 Yaqinlik

Ikki @scope qoidasi bir xil og'irlikda bir elementga to'g'ri kelsa, yaqinroq ildizdagisi yutadi — DOM'da elementga kamroq qadamda turgan ildiz. Fayldagi tartib bu yerda ahamiyatsiz.

Buni qorong'i va yorug' bo'laklar ichma-ich kelganda ko'rish oson:

<style>
  body { font-family: system-ui, sans-serif; }
  div { padding: 0.5rem 1rem; }
  @scope (.qorongi) {
    :scope { background: #16301b; }
    p { color: #fffaf0; }
  }
  @scope (.yorug) {
    :scope { background: #fffaf0; }
    p { color: #1f2a24; }
  }
</style>
<div class="qorongi">
  <p>Qorong'i footer</p>
  <div class="yorug">
    <p>Ichidagi yorug' aksiya kartasi</p>
  </div>
</div>
<div class="yorug">
  <p>Yorug' sahifa</p>
  <div class="qorongi">
    <p>Ichidagi qorong'i banner</p>
  </div>
</div>

Nimaga qarang: to'rtta matn ham o'z fonida o'qiladi. Ichki bloklar tashqisiga emas, o'ziga eng yaqin ildizga ergashdi. @scope (.yorug) faylda keyinroq yozilgan, lekin pastki "qorong'i banner"da @scope (.qorongi) yutdi — uning ildizi yaqinroq. Chrome'da tekshirdik.

Oddiy .yorug p va .qorongi p bilan yozsak nima bo'lardi? Og'irligi teng, demak keyingisi yutadi — ikkinchi blokdagi qorong'i banner matni qora bo'lib, to'q fonda o'qilmay qolardi. Bu — Qorong'i rejim darsidagi temalar uchun muhim xulq.

Diqqat: Yaqinlik og'irlikdan keyin tekshiriladi. @scope (.taom-karta) { p { ... } } (0,0,1) boshqa joydagi .taom-karta p (0,1,1) qoidasiga yutqazadi — Chrome'da tekshirdik. Yaqinlik faqat og'irliklar teng bo'lganda hal qiladi.

6.4 Ildizsiz @scope

HTML ichidagi <style> tegida @scope ni qavssiz yozish mumkin: @scope { ... }. Shunda ildiz — <style> ning ota elementi. Bu HTML xatlarda yoki boshqa tizimga joylanadigan kichik bo'laklarda qulay. «Bahor»da ishlatilmaydi: CSS nima darsidan eslang, uning CSP'si ichki <style> ni to'sadi.

6.5 Brauzer mosligi

Baseline ma'lumotiga ko'ra @scope — yangi Baseline: hamma asosiy brauzerda faqat 2026-yil martidan beri (Chrome 143, Firefox 146, Safari 26.4). Eski brauzerda butun @scope bloki tashlanadi — ichidagi hech bir qoida ishlamaydi.

Shuning uchun hozircha qoida: @scope bilan faqat "bo'lmasa ham sahifa buzilmaydigan" narsani yozing. Kartaning asosiy ko'rinishi — oddiy class selektorlarida; @scope — qo'shimcha aniqlik. «Bahor» fayllarida hozircha @scope yo'q. Bu imkoniyat keng tarqalgan Baseline bo'lgach (yangi Baseline'dan 30 oy keyin), u CSS Modules kabi vositalarning o'rnini qisman egallashi kutilyapti.

Tekshirib ko'ring: @scope (.taom-karta) to (.sharh) { p { color: green; } }. Karta ichida <div class="sharh"><p> va sharh ichida yana <div class="taom-karta"><p> bor (tavsiya etilgan taom). Oxirgi p yashil bo'ladimi?

7. Ko'p uchraydigan xatolar

7.1 Blok e'londan oldin

@layer komponentlar { ... } faylning boshida, @layer reset, komponentlar; esa pastroqda. Tartib: komponentlar, keyin reset — reset kuchli bo'lib qoldi. Tuzatish: qatlamlar e'loni har doim faylning birinchi qatori.

7.2 Qatlamdan tashqarida qolgan eski qator

Qatlamlarga o'tdingiz, lekin asosiy.css ning oxirida bitta eski h2 { color: black; } qoldi. U hamma qatlamni bosib ketadi va sarlavhalar palitraga bo'ysunmaydi. Tuzatish: DevTools Styles'da qatlamsiz qoidalar qatlam sarlavhasisiz ko'rinadi — qidiring va tegishli faylga ko'chiring.

7.3 Yordamchida !important

.korinmas { position: absolute !important; } "ishonch uchun". Qatlamlarda u reset'dagi !important dan kuchsiz, qatlam tartibining o'zi esa yordamchini baribir kuchli qiladi. Tuzatish: !important ni olib tashlang.

7.4 @layer blokidan keyin @import

@layer tokenlar {
  :root { --rang-asosiy: #2f6b3a; }
}
@import url("reset.css") layer(reset);

Import tashlanadi — reset umuman yuklanmaydi, Network panelida so'rov ham yo'q. Tuzatish: @import dan oldin faqat qatlamlar e'loni (@layer a, b;) tura oladi.

7.5 @scope zaxirasiz

Kartaning butun ko'rinishi @scope ichida. Eski Safari'da karta ramkasiz, paddingsiz. Tuzatish: asosiy ko'rinish oddiy selektorlarda, @scope — faqat aniqlashtirish.

8. Mashqlar

1-mashq (oson): kim yutadi?

@layer reset, asos, komponentlar; e'loni bor. Har holatda p qaysi rangda?

1. asos da main p { color: green; }, komponentlar da p { color: red; }.
2. komponentlar da p { color: red; }, qatlamsiz joyda p { color: blue; }.
3. reset da p { color: black !important; }, komponentlar da p { color: red !important; }.

Ishora: "Kaskadning yangi bosqichi" diagrammasi va !important o'qlari.

2-mashq (o'rta): «Bahor» kirish faylini tekshiring

Stajyor asosiy.css ni shunday yozdi:

@import url("tokenlar.css") layer(tokenlar);
@layer komponentlar {
  .aksiya { color: #b4461a; }
}
@layer tokenlar, reset, asos, layout, komponentlar, yordamchi;
@import url("reset.css") layer(reset);
@import url("komponentlar.css") layer(komponentlar);

Uchta xatoni toping va tuzatilgan faylni yozing (.aksiya qoidasi qayerga ketishi kerak?).

Ishora: "Ko'p uchraydigan xatolar" bo'limidagi «Blok e'londan oldin» va «@layer blokidan keyin @import» holatlari va oldingi darsdagi "kirish faylida qoida yo'q" qoidasi.

3-mashq (qiyin): tema bo'laklari @scope bilan

«Bahor» footer'i qorong'i (class yo'q, shunchaki footer). Uning ichida bitta yorug' blok bor — class="aksiya" li paragraf: "Yakshanba — choy bepul!". Aksiya ichida .narx bor.

1. Footer ichidagi .narx och qizg'ish (oklch(75% 0.13 39.8)), aksiya ichidagi .narx esa oddiy qizg'ish (#b4461a) bo'lsin. Ikkala qoidani @scope bilan, bir xil ichki selektor (.narx) bilan yozing.
2. Nega aynan @scope bilan yozish oson, oddiy selektorlarda esa tartibga bog'liq bo'lardi?

Ishora: "Yaqinlik" bo'limidagi ichma-ich temalar misoli.

<style>
  body { font-family: system-ui, sans-serif; margin: 0; }
  @scope (footer) {
    :scope {
      padding: 0.5rem 1rem;
      background: #16301b;
      color: #fffaf0;
    }
    .narx { color: oklch(75% 0.13 39.8); }
  }
  @scope (.aksiya) {
    :scope {
      padding: 0.5rem;
      border-radius: 0.5rem;
      background: #fffaf0;
      color: #1f2a24;
    }
    .narx { color: #b4461a; font-weight: bold; }
  }
</style>
<footer>
  <p>Ko'k choy — <span class="narx">5 000 so'm</span></p>
  <p class="aksiya">Yakshanba — choy bepul!
    Odatda <span class="narx">5 000 so'm</span></p>
</footer>

4-mashq: Portfolio qadami — fayllarni qatlamlarga joylash

Oldingi darsda portfolio CSS'ini yetti faylga bo'ldingiz. Endi ularni qatlamlarga joylang:

1. sayt/assets/css/asosiy.css ning birinchi qatoriga qatlamlar e'lonini yozing — «Bahor» bilan bir xil nomlar va tartib.
2. Har @import ga mos layer() qo'shing.
3. Sahifalarni 360 va 1280 pikselda, yorug' va qorong'i rejimda, chop etish ko'rinishida (DevTools → Rendering → "Emulate CSS media type: print") oching. Qayerdadir farq bormi?
4. Reset'dagi [hidden] qoidasining !important i endi qanday ishlaydi? Bir gap bilan tushuntiring.

Ishora: qatlamlarda og'irlik faqat bir qatlam ichida solishtiriladi — oldin og'irroq bo'lib yutgan, lekin oldingi faylda turgan qoidalarni qidiring.

/* Portfolio — kirish fayli: qatlamlar tartibi va importlar */
@layer tokenlar, reset, asos, layout, komponentlar, yordamchi;

@import url("tokenlar.css") layer(tokenlar);
@import url("reset.css") layer(reset);
@import url("asos.css") layer(asos);
@import url("layout.css") layer(layout);
@import url("komponentlar.css") layer(komponentlar);
@import url("yordamchi.css") layer(yordamchi);

9. Real ishda

• Katta loyihalar qatlamlarga o'tmoqda. Dizayn tizimlari reset, token va komponentlarni qatlamlarga ajratadi — mahsulot jamoasi o'z CSS'ini og'irlik urushisiz qo'shadi.
• Begona kod — xarita, chat, to'lov vidjeti, eski Bootstrap — layer() bilan qamaladi. Bu migratsiyada juda qo'l keladi: eski CSS "qatlamsiz" qolib ishlayveradi, yangisi qatlamlarga yoziladi.
• Tailwind v4 butunlay qatlamlarga qurilgan — uning ishlashini tushunish uchun @layer ni bilish shart.
• Intervyuda so'raladi: "@layer specificity'dan oldin tekshiriladimi?", "Qatlamsiz stil nega eng kuchli?", "!important qatlamlarda qanday ishlaydi?", "@scope nesting'dan nimasi bilan farq qiladi?"

Xulosa

• @layer a, b, c; — tartib e'loni; keyingi qatlam oldingisini og'irlikka qaramay yengadi; tartibni birinchi eslatish belgilaydi.
• Qatlamsiz stil oddiy deklaratsiyalarda eng kuchli; !important larda tartib teskari — reset'dagi [hidden] hammadan kuchli.
• revert-layer qiymatni oldingi qatlamga qaytaradi.
• «Bahor» kirish fayli: @layer tokenlar, reset, asos, layout, komponentlar, yordamchi; va oltita @import ... layer(); begona CSS — o'z qatlamida, asosiy stillardan oldin.
• @scope (ildiz) to (chegara) — stilni DOM bo'lagiga chegaralaydi; teng og'irlikda yaqinroq ildiz yutadi; yangi Baseline (2026) — hozircha faqat qo'shimcha sifatida.

Keyingi dars: Dizayn tokenlari — tokenlar.css ni tizimga aylantiramiz: primitiv, semantik va komponent tokenlari, shrift va masofa shkalalari.

Manbalar

• MDN: "@layer", "Cascade layers" (Learn), "revert-layer", "@import", "@scope" — developer.mozilla.org
• W3C: "CSS Cascading and Inheritance Level 5" (qatlamlar), "Level 6" (@scope) — w3.org/TR/css-cascade-5, css-cascade-6
• web-features (Baseline): "cascade-layers", "scope" — github.com/web-platform-dx/web-features
• Tailwind CSS: "Preflight" (qatlamlar tartibi) — tailwindcss.com/docs/preflight