CSS yangi Class Prefix Selector: prefiksli klasslarni bir qatorda tanlash imkoniyati

CSS dasturchilari yillab .btn-primary, .btn-secondary, .btn-danger kabi bir xil prefiksga ega klasslarni bitta qoidaga solish uchun uchrashgan. Hozirgi yechimlar — alohida .btn bazaviy klass qo‘shish, har bir klassni alohida ro‘yxatga olish yoki [class^="btn-"] kabi xato kuchli atribut selectorlaridan foydalanish — har biri o‘z kamchiliklariga ega. Avgust 2026-yilda Berlin-da bo‘lib o‘tgan CSS Working Group (CSSWG) yuzma-yuz uchrashuvida bu muammoni hal qilish uchun maxsus Class Prefix Selector (klass prefiks selector) qabul qilindi. U .btn-* sintaksisi bilan har qanday btn- bilan boshlanuvchi klassni avtomatik qamrab oladi.

Nima uchun bu muhim?

Utility-first CSS metodologiyalari (Tailwind, UnoCSS) va kattaroq dizayn tizimlari keng tarqalganida, bir xil komponent variantlari uchun yuzlab prefiksli klasslar paydo bo‘ladi. Har bir variant uchun alohida bazaviy klass yozish yoki HTML ga qo‘shimcha class="btn btn-primary" qo‘shish — bu kod hajmini oshiradi va saqlashni qiyinlashtiradi. Atribut selectorlari ([class*=" btn-"]) esa bo‘shliq va tartibga bog‘liq xatolarga yo‘l qo‘yadi. Yangi selector bu ikkala muammoni ham hal qiladi: HTML o‘zgarmaydi, CSS esa toza va o‘qilishi oson qoladi.

Sintaksis va ishlash prinsipi

Yangi selector oddiy va intuitiv:

.btn-* {
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

-* qismi selectorni "prefiks rejimiga" o‘tkazadi. U btn- bilan boshlanuvchi va prefiksdan keyin kamida bitta belgi bor barcha klasslarga mos keladi. Yani:

/* Adding a base class */
.btn {
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

/* Or listing everything... yuck! */
.btn-primary,
.btn-secondary,
.btn-danger {
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

• class="btn-primary" — mos keladi
• class="btn-lg" — mos keladi
• class="btn-" — mos kelmaydi (bo‘sh qoldiq)
• class="btn--primary" — mos kelmaydi (prefiksdan keyin darhol ikkinchi chiziq)

Bu cheklov muhokama natijasida qabul qilindi: bo‘sh qoldiqni qamrab olmaslik xato mos kelishlardan saqlab tutadi.

Nima uchun faqat chiziq (hyphen) va nima uchun * o‘rtada emas?

Joriy specifikatsiya faqat chiziqli prefikslarni qo‘llab-quvvatlaydi (btn-*, card-*). Pastki chiziq (_) yoki boshqa ajratuvchilar kelajda qo‘shilishi mumkin, lekin .foo* kabi "prostsiz" prefikslar rad etildi. Ikkita asosiy sabab:

/* Works, but can be error-prone with whitespace */
[class^="btn-"],
[class*=" btn-"] {
  padding: 0.5rem 1rem;
}

• Noto‘g‘ri mos kelish xavfi: .foo* .footer, .foobar kabi xech qachon bog‘liq bo‘lmagan klasslarni ham qamrab olardi.
• Brauzer optimizatsiyasi: Brauzerlar klass selectorlari uchun ichki "sig‘imlar" (buckets) yaratadi. Prostsiz wildcard bu optimizatsiyani buzadi va selector mos kelishini sekinlashtiradi.

Shu sababli .card-*-primary kabi o‘rtada wildcard ishlatish ham taqiqlangan.

Brauzer qo‘llab-quvvatlashi: hali hech qayerda yo‘q

Qaror faqat ikki hafta oldin qabul qilingan. Hozirgi holatda:

.btn-* {
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

• Chromium (Blink): CrBug #543356377 — hali amalga oshirilmagan
• Firefox (Gecko): hali bug ro‘yxatda yo‘q
• Safari (WebKit): hali bug ro‘yxatda yo‘q

Specifikatsiya hali o‘zgarishlarga uchraydi, shuning uchun ishlab chiquvchilar bu funksiyani real loyihalarda kutishlari erta. Bir necha yil o‘tishi mumkin.

Feature detection: @supports bilan tekshirish

Kelajakda qo‘llab-quvvatlash paydo bo‘lganda, uni @supports orqali aniqlash oson:

@supports selector(.foo-*) {
  /* Browser has support */
}

@supports selector(.foo-*) {
  /* Brauzer Class Prefix Selector ni qo‘llab-quvvatlaydi */
}

Bramus (CodePen misoli) bu usulni ko‘rsatgan: brauzer qo‘llab-quvvatlaganda sahifa yashil rangga o‘tadi.

Dizayn tizimlari va utility CSS uchun nima o‘zgaradi?

Agar va bu funksiya brauzerlarga kelsa, bu utility-first va design token arxitekturasini soddalashtiradigan eng katta o‘zgarishlardan biri bo‘ladi. Bugun Tailwind kabi kutubxonalar har bir utility klass uchun alohida CSS qaydasi generatsiya qiladi (masalan, .p-1, .p-2... .p-64). Prefix selector bilan ular .p-* bitta qaydasi bilan barcha padding qiymatlarini qamrab olishi mumkin — bu CSS hajmini sezilarli qoldirishi va stylesheet parsing tezligini oshirishi mumkin.

Lekin bu erda ham nuanslar bor: Tailwind hozirgi paytda p-4 kabi chiziqsiz prefikslar ishlatadi. Ular p-* dan foydalana olishlari uchun ya'ni p-4 o‘rniga p-4 (chiziq bilan) formatiga o‘tishlari kerak bo‘ladi — bu breaking change bo‘ladi. Shuning uchun amaliyotga kirish yo‘li hali aniq emas.

Ochiq savollar va kutilayotgan o‘zgarishlar

• Spetsifikatsiya (specificity): .btn-* spesifikligi qanday hisoblana? Oddiy klass selectorlari kabi (0,1,0) mi? Bu hali rasmiy belgilanmagan.
• Pastki chiziq (_) qo‘llab-quvvatlashi: BEM metodologiyasidan foydalangan jamoalar block__element--modifier formatini ishlatadi. Ular uchun block__* yoki block__element--* kerak bo‘ladi.
• Shadow DOM va CSS Modules: Scoped CSS kontekstlarida prefiks selector qanday davra? Joriy matn bu haqida chuqur tafsilot bermaydi.

Xulosa: kuzatib borish qiymatli, lekin kutish shart

Class Prefix Selector — bu CSS selectorlar tizimidagi mantiqiy bo‘shliqni to‘ldiruvchi, oddiy va kuchli yechim. U HTML ni tozalab turish, CSS ni qisqartirish va xatolar oldini olish imkonini beradi. Ammo bu faqat specifikatsiya darajasida mavjud. Brauzerlarga kirishi, testdan o‘tishi va stabil lashishi uchun yillar ketishi mumkin. Hozirgi paytda eng aqlli tadbir — CSSWG repositoriyasi va brauzer bug trackerlarini kuzatib borish, o‘z dizayn tizimingizda qaysi prefikslar ishlatilayotganini tahlil qilish va kelajakda qanday migrasiya qilinishi haqida reja tuzish.

Asl manba: bram.us