CSS'da inqilob: Mahalliy Paket Boshqaruvi uchun @package Qoidasiga Chuqur Kirish

O'n yillar davomida dasturchilar Kaskadli Uslublar Jadvallarining (CSS) eng muhim va murakkab xususiyatlaridan biri - uning global tabiati bilan kurashib kelishdi. Garchi kuchli bo'lsa-da, CSS'ning global doirasi son-sanoqsiz o'ziga xoslik urushlari, nomlash qoidalari bo'yicha munozaralar va arxitektura bosh og'riqlarining manbai bo'lib kelgan. Biz uni jilovlash uchun CSS ustiga BEM metodologiyalaridan tortib murakkab JavaScript-ga asoslangan yechimlargacha bo'lgan murakkab tizimlarni qurdik. Ammo agar yechim kutubxona yoki konventsiya emas, balki CSS tilining o'ziga xos qismi bo'lsa-chi? CSS Paket Qoidasi kontseptsiyasiga kiring, bu bizning uslublar jadvallarimizga to'g'ridan-to'g'ri mustahkam, brauzerga xos paket boshqaruvini olib kelishga qaratilgan istiqbolli taklifdir.

Ushbu keng qamrovli qo'llanma ushbu transformativ taklifni o'rganadi. Biz u hal qilishni maqsad qilgan asosiy muammolarni tahlil qilamiz, uning taklif etilayotgan sintaksisi va mexanizmlarini tushuntiramiz, amaliy tatbiq misollarini ko'rib chiqamiz va bu veb-ishlab chiqish kelajagi uchun nimani anglatishini ko'rib chiqamiz. Dizayn tizimining kengaytirilishi bilan kurashayotgan arxitektor bo'lasizmi yoki sinf nomlariga prefiks qo'shishdan charchagan dasturchi bo'lasizmi, CSS'dagi ushbu evolyutsiyani tushunish juda muhimdir.

Asosiy Muammo: Nima uchun CSS'ga Mahalliy Paket Boshqaruvi Kerak?

Yechimni qadrlashdan oldin, biz muammoni to'liq tushunishimiz kerak. Keng miqyosda CSS'ni boshqarish qiyinchiliklari yangi emas, lekin ular komponentlarga asoslangan arxitekturalar va yirik, hamkorlikdagi loyihalar davrida yanada keskinlashdi. Muammolar asosan tilning bir nechta fundamental xususiyatlaridan kelib chiqadi.

Global Nomlar Fazosi Muammosi

CSS'da siz yozgan har bir selektor yagona, umumiy, global doirada yashaydi. Header komponentining uslublar jadvalida aniqlangan .button sinfi, footer komponentining uslublar jadvalida havola qilingan .button sinfi bilan bir xil. Bu darhol to'qnashuv xavfini yuqori darajada yaratadi.

Oddiy, keng tarqalgan stsenariyni ko'rib chiqaylik. Jamoangiz chiroyli karta komponentini ishlab chiqadi:

.card { background: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .title { font-size: 1.5em; color: #333; }

Keyinchalik, boshqa bir jamoa uchinchi tomon blog vidjetini integratsiya qiladi, u ham .card va .title kabi umumiy sinf nomlaridan foydalanadi, lekin butunlay boshqacha uslublar bilan. To'satdan, sizning karta komponentingiz buziladi yoki blog vidjeti noto'g'ri ko'rinadi. Oxirgi yuklangan uslublar jadvali g'olib bo'ladi va siz endi o'ziga xoslik yoki manba tartibi muammosini tuzatmoqdasiz. Bu global tabiat dasturchilarni himoyaviy kodlash usullariga majbur qiladi.

Bog'liqliklarni Boshqarish Jahannami

Zamonaviy veb-ilovalar kamdan-kam hollarda noldan yaratiladi. Biz uchinchi tomon kutubxonalari, UI to'plamlari va freymvorklarning boy ekotizimiga tayanamiz. Ushbu bog'liqliklar uchun uslublarni boshqarish ko'pincha nozik jarayondir. Siz katta, monolit CSS faylini import qilib, kerakli narsalarni bekor qilasizmi, biror narsani buzmaslikka umid qilasizmi? Kutubxona mualliflarining kodingiz bilan ziddiyatlarni oldini olish uchun barcha sinflarini mukammal nomlaganiga ishonasizmi? Rasmiy bog'liqlik modelining yo'qligi shuni anglatadiki, biz ko'pincha hamma narsani bitta, ulkan CSS fayliga to'plashga murojaat qilamiz, bu esa uslublarning qaerdan kelib chiqqanligi haqidagi aniqlikni yo'qotadi va texnik xizmat ko'rsatishda dahshatli muammo yaratadi.

Mavjud Yechimlarning Kamchiliklari

Dasturchilar hamjamiyati ushbu cheklovlarni chetlab o'tish uchun yechimlar yaratishda nihoyatda innovatsion bo'ldi. Biroq, har birining o'ziga xos kamchiliklari bor:

• Metodologiyalar (BEM kabi): Blok, Element, Modifikator metodologiyasi nomlar fazosini simulyatsiya qilish uchun qat'iy nomlash qoidasini yaratadi (masalan, .card__title--primary). Afzalligi: Bu shunchaki CSS va hech qanday vositalarni talab qilmaydi. Kamchiligi: Bu juda uzun va batafsil sinf nomlariga olib kelishi mumkin, to'liq dasturchi intizomiga tayanadi va haqiqiy inkapsulyatsiyani taklif qilmaydi. Nomlashdagi xato hali ham uslublarning sizib chiqishiga olib kelishi mumkin.
• Build-Time Vositalari (CSS Modullari kabi): Ushbu vositalar sizning CSS'ingizni build vaqtida qayta ishlaydi va avtomatik ravishda noyob sinf nomlarini yaratadi (masalan, .card_title_a8f3e). Afzalligi: U haqiqiy, fayl darajasidagi doira izolyatsiyasini ta'minlaydi. Kamchiligi: U ma'lum bir build muhitini (Webpack yoki Vite kabi) talab qiladi, siz yozgan CSS va ko'rgan HTML o'rtasidagi to'g'ridan-to'g'ri aloqani uzadi va brauzerning mahalliy xususiyati emas.
• CSS-in-JS: Styled Components yoki Emotion kabi kutubxonalar sizga CSS'ni to'g'ridan-to'g'ri JavaScript komponent fayllaringiz ichida yozishga imkon beradi. Afzalligi: U kuchli, komponent darajasidagi inkapsulyatsiya va dinamik uslublashni taklif qiladi. Kamchiligi: U ish vaqtidagi qo'shimcha yuklanishni keltirib chiqarishi, JavaScript to'plami hajmini oshirishi va an'anaviy vazifalarni ajratishni noaniq qilishi mumkin, bu ko'plab jamoalar uchun bahsli nuqtadir.
• Shadow DOM: Veb-komponentlar to'plamining bir qismi bo'lgan mahalliy brauzer texnologiyasi bo'lib, to'liq DOM va uslub inkapsulyatsiyasini ta'minlaydi. Afzalligi: Bu mavjud bo'lgan izolyatsiyaning eng kuchli shaklidir. Kamchiligi: U bilan ishlash murakkab bo'lishi mumkin va komponentlarni tashqaridan uslublash (temalashtirish) CSS Custom Properties yoki ::part yordamida maqsadli yondashuvni talab qiladi. Bu global kontekstda CSS bog'liqliklarini boshqarish uchun yechim emas.

Ushbu yondashuvlarning barchasi asosli va foydali bo'lsa-da, ular vaqtinchalik yechimlardir. CSS Paket Qoidasi taklifi doira, bog'liqliklar va ommaviy API tushunchalarini to'g'ridan-to'g'ri tilga kiritish orqali muammoning ildizini hal qilishga qaratilgan.

CSS @package Qoidasi bilan Tanishtiruv: Mahalliy Yechim

So'nggi W3C takliflarida o'rganilgan CSS Paketi kontseptsiyasi bitta @package at-rule haqida emas, balki paketlash tizimini yaratish uchun birgalikda ishlaydigan yangi va takomillashtirilgan xususiyatlar to'plami haqida. Asosiy g'oya - uslublar jadvaliga aniq chegara belgilashga imkon berish, uning ichki uslublarini sukut bo'yicha shaxsiy qilib, boshqa uslublar jadvallari tomonidan iste'mol qilish uchun ommaviy API'ni aniq ko'rsatishdir.

Asosiy Tushunchalar va Sintaksis

Ushbu tizimning asosi ikkita asosiy at-rule'ga tayanadi: @export va modernizatsiya qilingan @import. Uslublar jadvali ushbu qoidalardan foydalanish orqali "paket"ga aylanadi.

1. Standart bo'yicha maxfiylik: Fikrlashdagi asosiy o'zgarish shundaki, paket (tarqatish uchun mo'ljallangan CSS fayli) ichidagi barcha uslublar sukut bo'yicha mahalliy yoki shaxsiy hisoblanadi. Ular inkapsulyatsiya qilingan va aniq eksport qilinmaguncha global doiraga yoki boshqa paketlarga ta'sir qilmaydi.

2. @export bilan Ommaviy API: Temalashtirish va o'zaro ishlash imkoniyatini berish uchun paket @export at-rule yordamida ommaviy API yaratishi mumkin. Bu paketning "Mana mening tashqi dunyo ko'rishi va o'zaro aloqada bo'lishi mumkin bo'lgan qismlarim" deyish usulidir. Hozirda taklif selektor bo'lmagan aktivlarni eksport qilishga qaratilgan.

• CSS Maxsus Xususiyatlari: Temalashtirishning asosiy mexanizmi.
• Keyframe Animatsiyalari: Umumiy animatsiyalarni ulashish uchun.
• CSS Qatlamlari: Kaskad tartibini boshqarish uchun.
• Boshqa potentsial eksportlar: Kelajakdagi takliflar hisoblagichlar, grid nomlari va boshqalarni eksport qilishni o'z ichiga olishi mumkin.

Sintaksis oddiy:

/* my-theme.css ichida */ @export --brand-primary: #0a74d9; @export --border-radius-default: 5px; @export standard-fade-in { from { opacity: 0; } to { opacity: 1; } }

3. @import bilan Nazoratli Foydalanish: Tanish @import qoidasi super kuchga ega bo'ladi. U paketni import qilish va uning eksport qilingan API'siga kirish mexanizmiga aylanadi. Taklif an'anaviy @import sabab bo'lishi mumkin bo'lgan global nomlar fazosining ifloslanishini oldini olish uchun buni tuzilgan tarzda boshqarish uchun yangi sintaksisni o'z ichiga oladi.

/* app.css ichida */ @import url("my-theme.css"); /* Paketni va uning ommaviy API'sini import qiladi */

Import qilingandan so'ng, ilova eksport qilingan maxsus xususiyatlardan foydalanib o'z komponentlarini uslublashi mumkin, bu esa tema paketida belgilangan dizayn tizimiga muvofiqlik va izchillikni ta'minlaydi.

Amaliy Implementatsiya: Komponent Paketini Yaratish

Nazariya ajoyib, lekin keling, bu amalda qanday ishlashini ko'rib chiqaylik. Biz o'zining shaxsiy uslublari va moslashtirish uchun ommaviy API'sidan iborat bo'lgan o'z-o'zini ta'minlaydigan, temalashtiriladigan "Alert" komponenti paketini yaratamiz.

1-qadam: Paketni Aniqlash (`alert-component.css`)

Birinchidan, biz komponentimiz uchun CSS faylini yaratamiz. Ushbu fayl bizning "paketimiz"dir. Biz alertning asosiy tuzilishi va ko'rinishini belgilaymiz. E'tibor bering, biz hech qanday maxsus o'rovchi qoidadan foydalanmayapmiz; faylning o'zi paket chegarasidir.

/* alert-component.css */ /* --- Ommaviy API --- */ /* Bular bizning komponentimizning moslashtiriladigan qismlari. */ @export --alert-bg-color: #e6f7ff; @export --alert-border-color: #91d5ff; @export --alert-text-color: #0056b3; @export --alert-border-radius: 4px; /* --- Shaxsiy Uslublar --- */ /* Ushbu uslublar ushbu paket ichida inkapsulyatsiya qilingan. Ular o'z qiymatlari uchun eksport qilingan maxsus xususiyatlardan foydalanadilar. `.alert` sinfi bu oxir-oqibat `@scope` bilan birlashtirilganda doiraga olinadi. */ .alert { padding: 1em 1.5em; border: 1px solid var(--alert-border-color); background-color: var(--alert-bg-color); color: var(--alert-text-color); border-radius: var(--alert-border-radius); display: flex; align-items: center; gap: 0.75em; } .alert-icon { /* Alert ichidagi ikona uchun ko'proq shaxsiy uslublar */ flex-shrink: 0; } .alert-message { /* Xabar matni uchun shaxsiy uslublar */ flex-grow: 1; }

Asosiy xulosa: Bizda aniq ajratish mavjud. Yuqoridagi @export qoidalari tashqi dunyo bilan shartnomani belgilaydi. Quyidagi sinfga asoslangan qoidalar ichki amalga oshirish tafsilotlaridir. Boshqa uslublar jadvallari .alert-icon'ni to'g'ridan-to'g'ri nishonga ololmaydi va olmasligi kerak.

2-qadam: Paketni Ilovada Ishlatish (`app.css`)

Endi, yangi alert komponentimizni asosiy ilovamizda ishlatamiz. Biz paketni import qilishdan boshlaymiz. HTML oddiy va semantik bo'lib qoladi.

HTML (`index.html`):

<div class="alert"> <span class="alert-icon">ℹ️</span> <p class="alert-message">Bu bizning komponent paketimizdan foydalanadigan ma'lumot beruvchi xabar.</p> </div>

CSS (`app.css`):

/* app.css */ /* 1. Paketni import qilish. Brauzer ushbu faylni oladi, uning uslublarini qayta ishlaydi va eksportlarini mavjud qiladi. */ @import url("alert-component.css"); /* 2. Ilova maketining global uslublari */ body { font-family: sans-serif; padding: 2em; background-color: #f4f7f6; }

Ushbu nuqtada, alert komponenti sahifada o'zining standart ko'k temali uslubi bilan paydo bo'ladi. alert-component.css faylidagi uslublar qo'llaniladi, chunki komponentning belgilanishi .alert sinfidan foydalanadi va uslublar jadvali import qilingan.

3-qadam: Komponentni Moslashtirish va Temalashtirish

Haqiqiy kuch komponentni tartibsiz bekor qilishlarsiz osonlikcha temalashtirish qobiliyatidan kelib chiqadi. Keling, ommaviy API'ni (maxsus xususiyatlarni) ilovamizning uslublar jadvalida bekor qilish orqali "muvaffaqiyat" va "xavf" variantlarini yarataylik.

HTML (`index.html`):

<div class="alert"> <p class="alert-message">Bu standart ma'lumot beruvchi alert.</p> </div> <div class="alert alert-success"> <p class="alert-message">Sizning operatsiyangiz muvaffaqiyatli yakunlandi!</p> </div> <div class="alert alert-danger"> <p class="alert-message">Xatolik yuz berdi. Iltimos, qayta urinib ko'ring.</p> </div>

CSS (`app.css`):

@import url("alert-component.css"); body { font-family: sans-serif; padding: 2em; background-color: #f4f7f6; } /* --- Alert Komponentini Temalashtirish --- */ /* Biz .alert-icon kabi ichki sinflarni nishonga olmayapmiz. Biz faqat rasmiy, ommaviy API'dan foydalanyapmiz. */ .alert-success { --alert-bg-color: #f6ffed; --alert-border-color: #b7eb8f; --alert-text-color: #389e0d; } .alert-danger { --alert-bg-color: #fff1f0; --alert-border-color: #ffa39e; --alert-text-color: #cf1322; }

Bu komponent uslublarini boshqarishning toza, mustahkam va qo'llab-quvvatlanadigan usulidir. Ilova kodi alert komponentining ichki tuzilishi haqida hech narsa bilishi shart emas. U faqat barqaror, hujjatlashtirilgan maxsus xususiyatlar bilan o'zaro aloqada bo'ladi. Agar komponent muallifi ichki sinf nomlarini .alert-message'dan .alert__text'ga o'zgartirishga qaror qilsa, ilovaning uslubi buzilmaydi, chunki ommaviy shartnoma (maxsus xususiyatlar) o'zgarmagan.

Ilg'or Tushunchalar va Sinergiyalar

CSS Paketi kontseptsiyasi boshqa zamonaviy CSS xususiyatlari bilan uzluksiz integratsiyalash uchun mo'ljallangan bo'lib, vebda uslublash uchun kuchli, yaxlit tizim yaratadi.

Paketlar Orasidagi Bog'liqliklarni Boshqarish

Paketlar faqat oxirgi foydalanuvchi ilovalari uchun emas. Ular murakkab tizimlarni yaratish uchun bir-birini import qilishi mumkin. Faqat dizayn tokenlarini (ranglar, shriftlar, oraliqlar) eksport qiladigan asosiy "tema" paketini tasavvur qiling.

/* theme.css */ @export --color-brand-primary: #6f42c1; @export --font-size-base: 16px; @export --spacing-unit: 8px;

Tugma komponenti paketi keyin ushbu tema paketini import qilib, uning qiymatlaridan foydalanishi mumkin, shu bilan birga o'zining yanada aniqroq maxsus xususiyatlarini ham eksport qilishi mumkin.

/* button-component.css */ @import url("theme.css"); /* Dizayn tokenlarini import qilish */ /* Tugma uchun ommaviy API */ @export --btn-padding: var(--spacing-unit); @export --btn-bg-color: var(--color-brand-primary); /* Tugma uchun shaxsiy uslublar */ .button { background-color: var(--btn-bg-color); padding: var(--btn-padding); /* ... boshqa tugma uslublari */ }

Bu aniq bog'liqlik grafigini yaratadi, bu esa uslublarning qaerdan kelib chiqqanligini kuzatishni osonlashtiradi va butun dizayn tizimi bo'ylab izchillikni ta'minlaydi.

CSS Scope (@scope) bilan Integratsiya

CSS Paketi taklifi yana bir qiziqarli xususiyat - @scope at-rule bilan chambarchas bog'liq. @scope sizga uslublarni faqat DOM daraxtining ma'lum bir qismida qo'llash imkonini beradi. Ular birlashtirilganda, haqiqiy inkapsulyatsiyani taklif qiladi. Paket o'z uslublarini scope bloki ichida belgilashi mumkin.

/* alert-component.css ichida */ @scope (.alert) { :scope { /* .alert elementining o'zi uchun uslublar */ padding: 1em; } .alert-icon { /* Bu selektor faqat .alert elementi ICHIDAGI .alert-icon'ga mos keladi */ color: blue; } } /* Bu ta'sir qilmaydi, chunki u doiradan tashqarida */ .alert-icon { ... }

Ushbu kombinatsiya paket uslublarining nafaqat nazorat qilinadigan API'ga ega bo'lishini, balki ularning sizib chiqib, sahifaning boshqa qismlariga ta'sir qilishining jismonan oldini olishini ta'minlaydi, bu esa global nomlar fazosi muammosini tubdan hal qiladi.

Veb Komponentlar bilan Sinergiya

Shadow DOM yakuniy inkapsulyatsiyani ta'minlasa-da, ko'plab komponent kutubxonalari uslublash murakkabliklari tufayli undan foydalanmaydi. CSS Paketi tizimi ushbu "yengil DOM" komponentlari uchun kuchli alternativani taqdim etadi. U to'liq Shadow DOM'ga o'tishni talab qilmasdan inkapsulyatsiya afzalliklarini (@scope orqali) va temalashtirish arxitekturasini (@export orqali) taklif etadi. Veb Komponentlardan foydalanadiganlar uchun paketlar maxsus xususiyatlar orqali komponentning Shadow DOM'iga uzatiladigan umumiy dizayn tokenlarini boshqarishi mumkin, bu esa mukammal hamkorlikni yaratadi.

@package'ni Mavjud Yechimlar bilan Taqqoslash

Ushbu yangi mahalliy yondashuv bugungi kunda biz foydalanadigan narsalarga qanday qarshi turadi?

• vs. CSS Modullari: Maqsad juda o'xshash—doirasi cheklangan uslublar. Biroq, CSS Paketi tizimi build vositasi konventsiyasi emas, balki brauzerning mahalliy standartidir. Bu mahalliy doiradagi sinf nomlarini olish uchun maxsus yuklovchilar yoki transformatsiyalar kerak emasligini anglatadi. Ommaviy API ham CSS Modullaridagi :global qochish yo'liga nisbatan @export bilan ancha aniqroq.
• vs. BEM: BEM - bu doirani simulyatsiya qiluvchi nomlash konventsiyasi; CSS Paketi tizimi brauzer tomonidan majburiy qilingan haqiqiy doirani ta'minlaydi. Bu biror narsaga tegmaslikni so'rash bilan qulflangan eshik o'rtasidagi farqdir. U yanada mustahkam va inson xatosiga kamroq moyil.
• vs. Tailwind CSS / Utility-First: Tailwind kabi utility-first freymvorklari butunlay boshqa paradigma bo'lib, interfeyslarni HTML'dagi past darajali yordamchi sinflardan tuzishga qaratilgan. CSS Paketi tizimi yuqori darajali, semantik komponentlarni yaratishga mo'ljallangan. Ikkalasi hatto birga mavjud bo'lishi mumkin; kimdir Tailwind'ning @apply direktivasidan ichki foydalangan holda komponent paketini yaratishi mumkin, shu bilan birga temalashtirish uchun toza, yuqori darajali API'ni eksport qilishi mumkin.

CSS Arxitekturasining Kelajagi: Bu Dasturchilar uchun Nimani Anglatadi

Mahalliy CSS Paketi tizimining joriy etilishi bizning CSS haqida qanday o'ylashimiz va yozishimizda monumental o'zgarishni anglatadi. Bu yillar davomida hamjamiyat tomonidan qilingan sa'y-harakatlar va innovatsiyalarning yakuni bo'lib, nihoyat platformaning o'ziga singdirilmoqda.

Komponentga Asoslangan Uslublash Tomon Siljish

Ushbu tizim komponentga asoslangan modelni CSS dunyosida birinchi darajali fuqaro sifatida mustahkamlaydi. U dasturchilarni har biri o'zining shaxsiy uslublari va yaxshi belgilangan ommaviy interfeysiga ega bo'lgan kichik, qayta foydalanish mumkin bo'lgan va haqiqatan ham o'z-o'zini ta'minlaydigan UI qismlarini yaratishga undaydi. Bu yanada kengaytiriladigan, qo'llab-quvvatlanadigan va bardoshli dizayn tizimlariga olib keladi.

Murakkab Build Vositalariga Bog'liqlikni Kamaytirish

Build vositalari minifikatsiya va eski brauzerlarni qo'llab-quvvatlash kabi vazifalar uchun har doim muhim bo'lib qolsa-da, mahalliy paket tizimi bizning build quvurlarimizning CSS qismini sezilarli darajada soddalashtirishi mumkin. Sinf nomlarini xeshlash va doirani belgilash uchun maxsus yuklovchilar va plaginlarga bo'lgan ehtiyoj yo'qolishi mumkin, bu esa tezroq buildlar va soddaroq konfiguratsiyalarga olib keladi.

Joriy Holat va Qanday Xabardor Bo'lish

Shuni yodda tutish muhimki, CSS Paketi tizimi, shu jumladan @export va unga bog'liq xususiyatlar, hozirda taklif holatida. U hali hech qanday barqaror brauzerda mavjud emas. Tushunchalar W3C'ning CSS Ishchi Guruhi tomonidan faol muhokama qilinmoqda va takomillashtirilmoqda. Bu shuni anglatadiki, bu yerda tasvirlangan sintaksis va xatti-harakatlar yakuniy amalga oshirishdan oldin o'zgarishi mumkin.

Jarayonni kuzatib borish uchun:

• Rasmiy Tushuntirishlarni O'qing: CSSWG GitHub'da takliflarni joylashtiradi. "CSS Scope" va unga bog'liq bog'lash/import qilish xususiyatlari haqidagi tushuntirishlarni qidiring.
• Brauzer Ishlab Chiqaruvchilarini Kuzating: Chrome Platform Status, Firefox'ning standartlar pozitsiyalari va WebKit'ning xususiyatlar holati sahifalari kabi platformalarni kuzatib boring.
• Dastlabki Implementatsiyalar bilan Tajriba O'tkazing: Ushbu xususiyatlar Chrome Canary yoki Firefox Nightly kabi brauzerlarda eksperimental bayroqlar ostida paydo bo'lgach, ularni sinab ko'ring va fikr-mulohazalaringizni bildiring.

Xulosa: CSS uchun Yangi Bob

Tavsiya etilgan CSS Paketi tizimi shunchaki yangi at-rule'lar to'plami emas; bu zamonaviy, komponentlarga asoslangan veb uchun CSS'ni fundamental qayta tasavvur qilishdir. U yillar davomida hamjamiyat tomonidan yaratilgan yechimlardan olingan qiyin saboqlarni oladi va ularni to'g'ridan-to'g'ri brauzerga integratsiya qiladi, bu esa CSS'ning tabiiy ravishda doiraga olingan, bog'liqliklar aniq boshqariladigan va temalashtirish toza, standartlashtirilgan jarayon bo'lgan kelajakni taklif etadi.

Inkapsulyatsiya uchun mahalliy vositalarni taqdim etish va aniq ommaviy API'larni yaratish orqali, bu evolyutsiya bizning uslublar jadvallarimizni yanada mustahkamroq, dizayn tizimlarimizni yanada kengaytiriladigan va dasturchilar sifatida hayotimizni sezilarli darajada osonlashtirishni va'da qiladi. Taklifdan universal brauzer qo'llab-quvvatlashigacha bo'lgan yo'l uzoq, ammo manzil - bu ertangi kun vebining qiyinchiliklari uchun haqiqatan ham yaratilgan kuchliroq, bashorat qilinadigan va nafisroq CSS'dir.