CSS metodologiyalari: BEM, ITCSS, CUBE va fayl tuzilishi

Qisqacha: CSS metodologiyasi — class'larni nomlash va qoidalarni tartiblash bo'yicha jamoa kelishuvi. Eng mashhuri BEM: .taom-karta (blok), .taom-karta__nomi (element), .taom-karta--yangi (modifikator) — har selektor bitta class, og'irligi bir xil. ITCSS fayllarni "keng va zaifdan tor va kuchliga" tartiblaydi, CUBE CSS esa layout, yordamchi, blok va istisnoni ajratadi. Katta CSS shu tartibda bir necha faylga bo'linadi.

Bu darsda

• CSS nega katta loyihada chalkashib ketishini uch sababga ajratib tushuntirasiz.
• BEM bo'yicha class nomlaysiz va uning qoidalarini buzadigan xatolarni topasiz.
• OOCSS, SMACSS, ITCSS va CUBE CSS g'oyalarini bir-biridan farqlaysiz.
• «Bahor»ning asosiy.css ini ITCSS tartibida yetti faylga bo'lasiz.
• Global va lokal stil farqini tushuntirasiz va har qoidaga "u qaysi faylga tegishli?" degan savolga javob berasiz.

Oldin bilishingiz kerak: Specificity, Kaskad, CSS nima: @import, Intrinsic layout, CSS reset.

1. Nega bu kerak?

Oldingi darsda «Bahor» reset'ini yig'dik. U asosiy.css ning eng boshida turibdi. Undan keyin esa 05-qism va 06-qismning hamma darslari qo'shgan narsalar: palitra, shriftlar, menyu kartalari, bron formasi, jadval, animatsiyalar, chop etish. Fayl yuzlab qatorga yetdi.

Jasur akaning jiyani Sherzod yozda choyxona saytida amaliyot o'tayapti. Unga vazifa berildi: aksiya sahifasida narx qizil bo'lsin. U faylning oxiriga bitta qator qo'shdi:

.narx {
  color: red;
}

Aksiya sahifasi to'g'ri bo'ldi. Lekin ertasi kuni Rustam aka qo'ng'iroq qildi: menyudagi hamma narx ham qizil, footer'dagi choy narxi ham. .narx butun saytda bitta — Sherzod faqat bitta joyni o'zgartiraman deb o'yladi.

Bu CSS'ning tabiati: hamma class global. Istalgan qoida istalgan sahifadagi istalgan elementga tegishi mumkin. Kichik saytda bu qulay, katta saytda — xavfli. Metodologiyalar shu xavfga javob sifatida paydo bo'ldi.

Uy qurilishini tasavvur qiling. Ikki kishi qursa, "g'isht qayerga, sement qayerga" deb gaplashib olishadi. Yigirma kishi qursa, yozma qoida kerak: har material o'z omborida, har usta o'z qavatida. CSS metodologiyasi — shunday yozma qoida.

2. CSS'ning uch og'rig'i

Katta CSS uch sabab bilan buziladi:

1. Global nomlar. Ikki xil narsaga bir xil nom berildi — Sherzodning .narx i. Bir joyni tuzatsangiz, boshqa joy buziladi.
2. Og'irlik urushi. Birov .menyu .narx yozdi, ikkinchisi uni yengish uchun main .menyu .narx, uchinchisi !important. Har yangi qoida oldingisidan og'irroq bo'lishga majbur (Specificity).
3. Tartibga bog'liqlik. Og'irliklar teng bo'lsa, keyingi qoida yutadi (Kaskad). Qoidani faylning boshqa joyiga ko'chirsangiz, ko'rinish o'zgaradi — va nega o'zgarganini hech kim bilmaydi.

Har metodologiya shu uchtadan bir yoki bir nechtasini davolaydi. BEM — birinchi va ikkinchisini, ITCSS — uchinchisini, CUBE — hammasini bir oz boshqacha yo'l bilan.

3. BEM

3.1 Uch qism

BEM (Block, Element, Modifier — blok, element, modifikator) — Yandex jamoasida paydo bo'lgan va 2010-yillarda butun dunyoga tarqalgan nomlash usuli. Har class uch qismdan biri:

• Blok (block) — o'zi alohida ma'noga ega mustaqil bo'lak: menyu kartasi, bron formasi, sayt sarlavhasi. Nomi oddiy: taom-karta.
• Element — blokning bo'lagi, blokdan tashqarida ma'nosi yo'q: kartaning nomi, narxi, rasmi. Nomi blok + ikki pastki chiziq: taom-karta__nomi.
• Modifikator (modifier) — blok yoki elementning varianti yoki holati: yangi taom, tugagan taom. Nomi + ikki chiziqcha: taom-karta--yangi.

flowchart LR
  B["Blok<br/>taom-karta"] --> E["Element<br/>taom-karta__nomi"]
  B --> M["Modifikator<br/>taom-karta--yangi"]
  E --> EM["Element modifikatori<br/>taom-karta__narx--eski"]

Nimaga qarang: har nom o'zining "manzili"ni aytadi. taom-karta__narx ni ko'rgan odam fayl ochmasdan biladi: bu — menyu kartasi ichidagi narx, boshqa hech qayerdagi emas.

3.2 «Bahor» kartasi BEM bilan

Menyu kartasini BEM uslubida yozsak shunday bo'ladi. Bu faqat namoyish — «Bahor»ning haqiqiy class nomlari o'zgarmaydi, buni pastda ko'ramiz:

<style>
  body { font-family: system-ui, sans-serif; }
  .taom-karta {
    max-width: 18rem;
    padding: 0.75rem 1rem;
    border: 2px solid #c9d6cf;
    border-radius: 0.5rem;
  }
  .taom-karta__nomi {
    margin: 0;
    color: #2f6b3a;
  }
  .taom-karta__narx {
    font-weight: bold;
    color: #b4461a;
  }
  .taom-karta--yangi {
    border-color: #2f6b3a;
  }
  .taom-karta--yangi .taom-karta__nomi::after {
    content: " · yangi";
    font-size: 0.8em;
  }
</style>
<article class="taom-karta">
  <h3 class="taom-karta__nomi">Osh</h3>
  <p><span class="taom-karta__narx">35 000 so'm</span></p>
</article>
<article class="taom-karta taom-karta--yangi">
  <h3 class="taom-karta__nomi">Manti</h3>
  <p><span class="taom-karta__narx">30 000 so'm</span></p>
</article>

Nimaga qarang: ikkinchi karta yashil ramkali va nomi yonida "· yangi" yozuvi bor. HTML'da modifikator doim asosiy class bilan birga: class="taom-karta taom-karta--yangi". Modifikator faqat farqni yozadi — padding, radius asosiy class'dan keladi.

3.3 Tekis og'irlik

BEM'ning asosiy foydasi — og'irlik. Deyarli har selektor bitta class: (0,1,0). Hech kim hech kimni og'irlik bilan yengmaydi, tartib esa oldindan aytib bo'ladi. Uni tekis specificity deyishadi.

Yuqoridagi natijada bitta istisno bor: .taom-karta--yangi .taom-karta__nomi — (0,2,0). Blok modifikatori ichidagi elementni o'zgartirish uchun BEM buni ruxsat beradi. Lekin chuqurroq zanjir — yo'q.

3.4 BEM qoidalari

• Element ichida element yo'q. taom-karta__narx__valyuta — xato. Elementlar blokka bog'lanadi, bir-biriga emas: taom-karta__valyuta. HTML'da ular ichma-ich bo'lishi mumkin, nomda — yo'q.
• Modifikator yolg'iz kelmaydi. class="taom-karta--yangi" — asosiy class yo'q, karta padding'siz qoladi.
• Teg va id bilan bog'lanmaydi. h3.taom-karta__nomi yoki #menyu .taom-karta — og'irlikni buzadi va nomni tegga qamaydi: ertaga h3 h2 ga almashsa, qoida ishlamay qoladi.
• Blok joyini bilmaydi. .taom-karta sahifaning qayerida turganini (menyu, aksiya, bosh sahifa) bilmaydi va unga qarab o'zgarmaydi. Farq kerak bo'lsa — modifikator.

3.5 «Bahor» nima uchun BEM'ga o'tmaydi

«Bahor»ning class nomlari 04-qismdan beri kelishilgan: taom-karta, yangi, narx, taom-nomi, bron-havola. HTML allaqachon yozilgan, 05-qism darslari ularga tayanadi. Faqat nom uchun olti sahifani qayta yozish — foydadan ko'ra xavf ko'proq. Real loyihalarda ham shunday: metodologiya yangi kodga qo'llanadi, eski kod asta-sekin ko'chiriladi.

«Bahor» uslubi boshqa bir oilaga yaqin: blok class'i + qisqa holat class'i (taom-karta yangi). Bu SMACSS va CUBE'dagi g'oya — pastda ko'ramiz. Uning narxi — og'irlik: .taom-karta.yangi (0,2,0), BEM'dagi .taom-karta--yangi esa (0,1,0).

Tekshirib ko'ring: Bron formasini BEM bilan nomlang: forma bloki bron, uning maydon guruhi, xato matni va yuborish tugmasi. Tugmaning "yuborilmoqda" holati ham kerak.

4. OOCSS va SMACSS

BEM'dan oldin ham, keyin ham boshqa g'oyalar bo'lgan. Ularning nomi bugun kamroq eshitiladi, lekin fikrlari hamma zamonaviy yondashuvlarda yashaydi.

OOCSS (Object-Oriented CSS, Nicole Sullivan, 2008–2009) — ikki tamoyil:

• Tuzilma va "teri"ni ajratish. Karta shakli (padding, radius) — bitta class, rangi — boshqa class. Bitta shakl turli ranglarda ishlatiladi.
• Konteyner va mazmunni ajratish. .aksiya .narx emas — .narx qayerda tursa ham bir xil ko'rinsin.

SMACSS (Scalable and Modular Architecture for CSS, Jonathan Snook, 2011) — qoidalarni beshta turga ajratadi. Nomlari inglizcha, lekin ma'nosi oddiy:

Inglizcha loyihalarda holat class'lari odatda is- bilan boshlanadi: is-open ("ochiq"), is-hidden ("yashirin").

«Bahor»dagi yangi, tugadi class'lari — SMACSS'dagi holat g'oyasining o'zbekcha ko'rinishi.

5. ITCSS — teskari uchburchak

5.1 G'oyasi

ITCSS (Inverted Triangle CSS — teskari uchburchak CSS) — Harry Roberts taklif qilgan fayllarni tartiblash usuli. U nomlashni emas, tartibni boshqaradi — CSS'ning uchinchi og'rig'ini davolaydi.

G'oya: qoidalarni uchta o'lchov bo'yicha tartiblang.

• Qamrov (qoida nechta elementga tegadi): keng (hamma elementga) → tor (bitta komponentga).
• Og'irlik: past → yuqori.
• Aniqlik: umumiy → aniq.

flowchart TD
  S["Settings — sozlamalar<br/>o'zgaruvchilar"] --> T["Tools — vositalar<br/>Sass mixin'lari"]
  T --> G["Generic — umumiy<br/>reset"]
  G --> E["Elements — teglar<br/>body, h1, a"]
  E --> O["Objects — layout<br/>skelet, to'rlar"]
  O --> C["Components — komponentlar<br/>taom-karta, bron"]
  C --> U["Utilities — yordamchilar<br/>korinmas"]

Nimaga qarang: yuqoridan pastga har qatlam kamroq elementga, lekin aniqroq ta'sir qiladi. Birinchi ikki qatlam hech narsa chizmaydi — faqat qiymat va vosita beradi. Oxirgisi eng kuchli: yordamchi class "shu element, istisno yo'q" deydi.

Uchburchak — teskari: tepasi keng (hamma sahifa), pasti tor (bitta element). Fayl yuqoridan pastga shu tartibda o'qiladi. Kaskad ham shunga moslashadi: keyinroq keladigan aniq qoidalar oldingi umumiylarni tabiiy ravishda yengadi.

5.2 Qatlamlar «Bahor»da

Tools qatlami «Bahor»da bo'sh. U Sass uchun: Sass — CSS'ni qulayroq yozish vositasi, mixin esa unda bir marta yozilib, ko'p joyda chaqiriladigan qoidalar bo'lagi. Oddiy CSS'da bunday narsa yo'q. Sass'ni Sass/SCSS 1 darsida o'rganamiz, hozir bilish shart emas.

.otish (skip link) qayerga? U — komponent: o'z ko'rinishi va holati bor. .korinmas esa yordamchi: bitta vazifa, istalgan elementga qo'yiladi.

Tekshirib ko'ring: Qaysi faylga tushadi: a) .aksiya matni rangi; b) a:focus-visible halqasi; c) --qatlam-menyu: 20; d) sahifaning ikki ustunli grid skeleti?

6. CUBE CSS

CUBE CSS — Andy Bell 2020-yilda taklif qilgan yondashuv (oldingi darsdagi reset muallifi). Nomi to'rt qismdan: Composition, Utility, Block, Exception.

• Composition (kompozitsiya) — layout: elementlar qanday joylashadi. Bular Intrinsic layout darsidagi Stack, Cluster, RAM kabi naqshlar. Ular ichidagi narsa nima ekanini bilmaydi.
• Utility (yordamchi) — bitta ish qiladigan class: .korinmas, matnni o'rtaga olish.
• Block (blok) — BEM blokiga o'xshash, lekin kichikroq: faqat kompozitsiya va utility bajara olmagan narsa. CSS'ning o'zi — kaskad va meros — ko'p ishni qiladi, blokda faqat qolgani yoziladi.
• Exception (istisno) — blokning holati yoki varianti, odatda data- atributi bilan: [data-holat="tugadi"].

CUBE CSS'ning asosiy fikri: CSS bilan kurashmang, undan foydalaning. BEM kaskadni "o'chirib" qo'yishga urinadi — hamma narsa bitta class. CUBE esa kaskadni ish qurolidek ishlatadi: umumiy qoidalar tepada, blok faqat farqni yozadi.

«Bahor»ning taom-karta tugadi yozuvi CUBE'da class="taom-karta" data-holat="tugadi" bo'lardi. Nomlar 04-qismda kelishilgani uchun biz class'da qoldiramiz — g'oya bir xil: holat — alohida belgi.

6.1 Utility-first

Bu yo'lning oxirgi nuqtasi — utility-first: deyarli hamma stil kichik bir vazifali class'lar bilan to'g'ridan-to'g'ri HTML'da yoziladi — class="p-4 rounded-lg text-green-700". Blok va komponent class'lari deyarli yo'q. Shu g'oyaga qurilgan eng mashhur vosita — Tailwind; uni Tailwind CSS 1 darsida o'rganamiz, hozir bilish shart emas.

Ular bir-birini inkor qilmaydi. Ko'p jamoalar fayllarni ITCSS bo'yicha tartiblaydi va komponentlarni BEM bilan nomlaydi.

Tekshirib ko'ring: <article class="taom-karta" data-holat="tugadi"> — bu yozuvda CUBE'ning qaysi ikki qismi bor?

7. Global va lokal stil

Har CSS qoidasiga bitta savol bering: u kimga tegishli?

• Global — butun saytga: tokenlar, reset, teg qoidalari, tipografiya. Ular bir marta yoziladi va hamma sahifaga ta'sir qiladi. Bu yaxshi — body ning shrifti har sahifada bir xil bo'lishi kerak.
• Lokal — bitta komponentga: kartaning padding'i, bron tugmasining rangi. Ular komponentdan tashqariga "oqib" chiqmasligi kerak.

Sherzodning xatosi — lokal niyatni global nom bilan yozish: "aksiyadagi narx" deb o'yladi, "hamma narx" deb yozdi. To'g'ri yo'l — aniq manzil: .aksiya .narx yoki alohida modifikator.

Komponentga asoslangan fikrlash — sahifani qismlar to'plami deb ko'rish: karta, forma, menyu. Har qism o'z CSS'iga ega va boshqasining ichiga tegmaydi. Kursda bunga uch vosita bor: keyingi darsdagi @scope (Kaskadni boshqarish), CSS Modules va Shadow DOM (Shadow DOM stili). Ularni o'z darslarida o'rganamiz, hozir nomlarini bilish yetadi. Bugun esa eng oddiy vosita — nomlash intizomi va fayl tartibi.

Tekshirib ko'ring: a { text-underline-offset: 0.2em; } va .bron-havola { padding: 0.5rem 1rem; } — qaysi biri global, qaysi biri lokal?

8. «Bahor»ni fayllarga bo'lamiz

8.1 Yangi tuzilma

assets/css/ papkasi endi shunday:

assets/css/
├── asosiy.css        ← kirish: faqat boshqa fayllarni chaqiradi
├── tokenlar.css      ← palitra, qatlamlar, @font-face
├── reset.css         ← oldingi darsdagi reset
├── asos.css          ← html, body, sarlavha, havola, fokus
├── layout.css        ← sahifa skeleti
├── komponentlar.css  ← karta, narx, bron, jadval, aksiya
└── yordamchi.css     ← korinmas, chop etish

Fayllar papkachalarga emas, bitta papkaga yig'ildi. Sabab — url() yo'llari. Web shriftlar darsidan eslang: url("../fonts/bahor.woff2") CSS faylga nisbatan hisoblanadi. tokenlar.css o'sha assets/css/ da tursa, yo'l o'zgarmaydi. assets/css/sozlamalar/tokenlar.css ga qo'ysak, ../../fonts/ ga almashtirish kerak bo'lardi.

8.2 Kirish fayli

Endi savol: olti faylni sahifaga qanday ulaymiz? CSS nima darsida qoida bergan edik: "bir nechta CSS fayl kerak bo'lsa — bir nechta link". Lekin «Bahor»da olti sahifa bor. Olti link × olti sahifa = 36 qator, har yangi fayl qo'shilganda olti HTML'ni tahrirlash kerak.

Shuning uchun «Bahor» boshqa yo'lni tanlaydi. HTML'dagi bitta link o'zgarmaydi — asosiy.css ni chaqiradi. asosiy.css esa endi faqat tartibni saqlaydi:

/* «Bahor» — kirish fayli. Tartib = ITCSS qatlamlari. */
@import url("tokenlar.css");
@import url("reset.css");
@import url("asos.css");
@import url("layout.css");
@import url("komponentlar.css");
@import url("yordamchi.css");

@import ning yo'li ham asosiy.css ga nisbatan — hammasi bir papkada, shuning uchun faqat fayl nomi. 404 sahifasi asosiy.css ni / bilan boshlangan yo'l bilan ulaydi (CSS nima) — bu ham ishlaydi. Importlar asosiy.css qayerdan yuklanganiga qarab hisoblanadi.

8.3 @import narxi — o'lchadik

CSS nima darsidagi ogohlantirish o'z kuchida: @import qilingan fayllarni brauzer faqat asosiy.css ni yuklab, o'qib bo'lgach topadi. Qancha kutamiz? Tekshirish uchun kichik lokal server yasadik — u har faylni ataylab 300 millisekund ushlab turadi, sekin mobil internetdagidek. Chrome 154 so'rovlari:

Nimaga qarang: olti fayl navbat bilan emas, bir vaqtda so'raldi. Bitta fayl ichidagi importlar parallel yuklanadi. Yo'qotish — bitta qo'shimcha kutish (bu yerda 300 ms), olti emas. CSS nima darsidagi rasm ichma-ich import haqida edi: import ichida yana import bo'lsa, kutish har pog'onada qo'shiladi. Shuning uchun qoida: import faqat bitta darajada — kirish faylida.

flowchart LR
  H["index.html"] --> A["asosiy.css"]
  A --> T["tokenlar.css"]
  A --> R["reset.css"]
  A --> E["asos.css"]
  A --> L["layout.css"]
  A --> K["komponentlar.css"]
  A --> Y["yordamchi.css"]

Nimaga qarang: bitta pog'ona — asosiy.css dan keyin hamma fayl yonma-yon.

Bu 300 ms ham real loyihada qolmaydi. PostCSS va Lightning CSS darsida o'rganadigan yig'uvchi vositalar importlarni o'qib, hammasini bitta faylga qo'shib chiqaradi. Siz qulay tuzilmada yozasiz, brauzer bitta fayl oladi. Bu vositalar npm orqali o'rnatiladi — kursda keyinroq o'rganamiz, hozir bilish shart emas.

Diqqat: @import faqat fayl boshida ishlaydi. Undan oldin biror qoida tursa, brauzer importni jimgina tashlaydi (CSS nima). asosiy.css ga «bir qatorgina» qoida qo'shmang — u faqat importlar uchun.

8.4 Fayllar ichi

Har fayl bitta izoh bilan boshlanadi: nima bor va nima yo'q. komponentlar.css ning boshi (qoidalar qisqartirilgan):

/* ===== Komponentlar =====
   «Bahor»ning aniq bo'laklari. Teglarga (h1, a) qoida
   yozilmaydi — ular asos.css da. Rang qiymati yozilmaydi —
   faqat var(--rang-*). */

/* --- Menyu kartasi --- */
.taom-karta { ... }
.taom-karta.yangi { ... }
.taom-karta.tugadi { ... }

/* --- Narx --- */
.narx { ... }

/* --- Bron tugmasi-havolasi --- */
.bron-havola { ... }

Bitta qoida uchun ikki joy tanlash qiyin bo'lsa — kichikroq, aniqrog'ini tanlang. nav a qoidasi asos.css dagi a dan aniqroq, lekin hali "hamma menyu havolalari" — u menyu komponentiga, komponentlar.css ga tushadi.

@media bloklari ham qoidalar bilan birga ko'chadi. Masalan, .taom-karta ning 40rem dagi o'zgarishi komponentlar.css da, kartaning o'z qoidasi yonida. @media (prefers-color-scheme: dark) dagi rasm va soya qoidalari ham (Foydalanuvchi afzalliklari) — o'z komponenti yonida. Faqat chop etish bloki yaxlit yordamchi.css oxirida qoladi: u butun sahifani qog'ozga moslaydi va hamma narsadan keyin kelishi kerak.

9. Ko'p uchraydigan xatolar

9.1 BEM nomi, lekin zanjirli selektor

.menyu .taom-karta .taom-karta__nomi — nom BEM, selektor esa (0,3,0). BEM'ning butun foydasi yo'qoldi. Tuzatish: .taom-karta__nomi yetadi — nomning o'zi manzilni aytadi.

9.2 Nabira element

taom-karta__narx__valyuta. Tuzatish: taom-karta__valyuta. Blok ichidagi hamma element blokning bevosita "farzandi" deb nomlanadi.

9.3 Fayl tartibi buzilgan

asosiy.css da reset.css komponentlar.css dan keyin chaqirildi. Og'irliklar teng joylarda reset komponentlarni bosib ketadi — masalan, :where() siz yozilgan eski reset qatorlari. Tuzatish: importlar ITCSS tartibida. Keyingi darsdagi @layer bu xavfni butunlay yo'qotadi.

9.4 url() yo'li buzildi

tokenlar.css ni assets/css/sozlamalar/ ga ko'chirdingiz — shrift yuklanmay qoldi, sarlavhalar zaxira shriftda. Network panelida bahor.woff2 — 404. Tuzatish: yo'l CSS faylga nisbatan: ../../fonts/bahor.woff2. Yoki fayllarni bitta papkada saqlang.

9.5 "Utils" axlatxonasi

Qayerga qo'yishni bilmagan har qoida yordamchi.css ga tashlanadi. Bir oydan keyin u eng katta fayl. Tuzatish: yordamchi faylda faqat bitta vazifali, istalgan elementga qo'yiladigan class'lar.

10. Mashqlar

1-mashq (oson): BEM'mi yoki yo'qmi?

Qaysi nomlar BEM qoidalariga mos, qaysi biri buzilgan? Buzilganini tuzating.

1. .bron__maydon
2. .bron__maydon__xato
3. .bron--kutish
4. .bronTugma
5. .menyu .bron__tugma

Ishora: "BEM qoidalari" bo'limidagi to'rt qoida; kebab-case — CSS nima darsida.

2-mashq (o'rta): qoidalarni fayllarga tarqating

Quyidagi qoidalarni «Bahor»ning yetti faylidan qaysi biriga qo'yasiz? Har biriga bir gaplik sabab yozing.

.korinmas { position: absolute; width: 1px; ... }
:root { --rang-urgu: oklch(53.7% 0.153 39.8); }
h1, h2 { font-family: "Bahor", "Bahor zaxira", serif; }
body { display: grid; grid-template-areas: ...; }
.taom-karta.tugadi { opacity: 0.6; }
@media print { nav { display: none; } }
*, *::before, *::after { box-sizing: border-box; }

Ishora: ITCSS jadvalidagi "Nima bor" ustuni.

3-mashq (qiyin): Sherzodning narxi

Sherzodning vazifasini qaytadan, uch xil usulda hal qiling: aksiya sahifasidagi narx qizg'ish (--rang-urgu) bo'lsin, menyu va footer'dagi narxlarga tegmasin. Aksiya matni class="aksiya" li paragrafda.

1. «Bahor» class'lari bilan.
2. BEM bilan (aksiya bloki).
3. CUBE uslubida — istisno bilan.

Har biri uchun: selektor og'irligi va HTML'da nima o'zgaradi.

Ishora: «Bahor» nomlari — LOYIHA-IPI ro'yxatidan, yangi nom o'ylab topmang; BEM va CUBE variantlari — faqat taqqoslash uchun.

4-mashq: Portfolio qadami — asosiy.css ni fayllarga bo'lish

Portfolio'ning asosiy.css i yetti izohli bo'limga ega (Yakuniy loyiha). Uni «Bahor» kabi fayllarga ajrating:

1. sayt/assets/css/ da oltita fayl yarating: tokenlar.css, reset.css, asos.css, layout.css, komponentlar.css, yordamchi.css.
2. Bo'limlarni tarqating (jadval yechimda). Qorong'i rejim bloki ikkiga bo'linadi: ranglar va soya.
3. asosiy.css da faqat oltita @import qolsin. HTML sahifalarga tegmang — hamma sahifa, 404.html ham, o'sha bitta link bilan qoladi.
4. Har sahifani 360 va 1280 pikselda oching va oldingi holat bilan solishtiring — hech narsa o'zgarmasin. DevTools → Network'da yettita CSS fayl — hammasi 200.
5. npm run format va npm run check.

Ishora: shrift yo'li url("../fonts/sarlavha.woff2") — tokenlar.css o'sha papkada bo'lgani uchun o'zgarmaydi.

/* Portfolio — kirish fayli. Tartib = ITCSS qatlamlari. */
@import url("tokenlar.css");
@import url("reset.css");
@import url("asos.css");
@import url("layout.css");
@import url("komponentlar.css");
@import url("yordamchi.css");

/* tokenlar.css oxirida */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --rang-matn: oklch(93% 0.012 160);
    --rang-fon: oklch(21% 0.02 160);
    --rang-asosiy: oklch(80% 0.11 158.9);
    --rang-ikkinchi: oklch(76% 0.016 162);
    --rang-urgu: oklch(75% 0.13 39.8);
  }
}

/* komponentlar.css da, kartalar qoidasi yonida */
@media screen and (prefers-color-scheme: dark) {
  .loyihalar > article {
    box-shadow: none; /* qorong'i fonda soya ko'rinmaydi */
  }
}

11. Real ishda

• Katta kompaniyalar o'z uslub qo'llanmasini yozadi. Unda metodologiya (ko'pincha BEM yoki uning varianti), fayl tuzilmasi va nomlash qoidalari bor. Yangi dasturchi birinchi haftada shuni o'qiydi.
• Kod ko'rigida (code review) birinchi so'raladigan narsalar: "bu class qaysi blokka tegishli?", "bu qoida qaysi faylga tushishi kerak?", "nega selektor uch pog'onali?"
• React, Vue kabi freymvorklarda har komponent o'z CSS faylida yashaydi — komponentga asoslangan fikrlashning tabiiy davomi. Bu freymvorklarni kursda keyinroq o'rganamiz, hozir bilish shart emas.
• Intervyuda so'raladi: "BEM nima va u qanday muammoni hal qiladi?", "CSS'ni katta loyihada qanday tartiblaysiz?", "Specificity urushidan qanday qochasiz?"

Xulosa

• Katta CSS uch sababdan buziladi: global nomlar, og'irlik urushi va tartibga bog'liqlik.
• BEM: blok__element--modifikator, har selektor bitta class — tekis og'irlik.
• OOCSS tuzilma va terini, SMACSS qoida turlarini ajratadi; holat class'lari — shu g'oyadan.
• ITCSS fayllarni keng va zaifdan tor va kuchliga tartiblaydi; CUBE CSS esa kaskadni ish qurolidek ishlatadi.
• «Bahor» CSS'i endi yetti faylda: asosiy.css bitta darajali @import bilan qolgan oltitasini ITCSS tartibida chaqiradi.

Keyingi dars: Kaskadni boshqarish: @layer va @scope — fayllar tartibini kaskad qatlamlariga aylantiramiz: reset qayerda chaqirilmasin, komponentlardan kuchsiz bo'ladi.

Manbalar

• BEM rasmiy sayti: "Quick start", "Naming" — en.bem.info
• Harry Roberts: "ITCSS" (taqdimot va maqolalar) — csswizardry.com
• Andy Bell: "CUBE CSS" — cube.fyi
• Jonathan Snook: "SMACSS" — smacss.com
• Nicole Sullivan: "Object Oriented CSS" — github.com/stubbornella/oocss/wiki
• MDN: "@import" — developer.mozilla.org