Asosiy CSS tamoyillarini o'rganayotganda, barqarorlikni ta'minlash uchun modulli, qayta ishlatiladigan va tavsiflovchi uslublarni yozish o'rgatiladi. Ammo ishlab chiquvchilar haqiqiy ilovalar bilan shug'ullanishganda, ko'pincha mo'ljallanmagan joylarga uslublarsiz UI xususiyatlarini qo'shish imkonsiz bo'lib qoladi. Bu masala ko'pincha o'z-o'zidan amalga oshiriladigan pastadirga aylanadi; nazariy jihatdan bitta element yoki sinfga tegishli uslublar ular tegishli bo'lmagan joyda namoyon bo'la boshlaydi. Bu ishlab chiquvchini sizib chiqqan uslublarni bekor qilish uchun yanada aniqroq selektorlarni yaratishga majbur qiladi, keyinchalik ular tasodifan global uslublarni bekor qiladi va hokazo. BEM kabi qattiq sinf nomi konventsiyalari bu masalaning nazariy yechimlaridan biridir. BEM (Blok, Element, Modifikator) metodologiyasi CSS fayllari ichida qayta foydalanish va strukturani ta'minlash uchun CSS sinflarini nomlashning tizimli usulidir. Bu kabi nomlash konventsiyalari elementlar va ularning holatini tavsiflash uchun domen tilidan foydalanish orqali kognitiv yukni kamaytirishi mumkin va agar to'g'ri amalga oshirilsa, katta ilovalar uchun uslublarni saqlashni osonlashtirishi mumkin. Haqiqiy dunyoda esa har doim ham shunday bo'lavermaydi. Ustuvorliklar o'zgarishi mumkin va o'zgarish bilan amalga oshirish mos kelmaydigan bo'ladi. HTML tuzilmasidagi kichik o'zgarishlar CSS klassi nomini ko'plab qayta ko'rib chiqishni talab qilishi mumkin. Yuqori interaktiv front-end ilovalari bilan BEM namunasiga amal qilgan sinf nomlari uzoq va noqulay bo'lib qolishi mumkin (masalan, ilova-user-overview__status --autentifikatsiya) va nomlash qoidalariga to'liq rioya qilmaslik tizim tuzilishini buzadi va shu bilan uning afzalliklarini inkor etadi. Ushbu qiyinchiliklarni hisobga olgan holda, ishlab chiquvchilar ramkalarga murojaat qilishlari ajablanarli emas, Tailwind eng mashhur CSS ramkasi hisoblanadi. Uslublar o'rtasida yengib bo'lmaydigan o'ziga xoslik urushi kabi ko'ringan narsaga qarshi kurashishdan ko'ra, CSS Cascade-dan voz kechish va to'liq izolyatsiyani kafolatlaydigan vositalardan foydalanish osonroq. Ishlab chiquvchilar kommunal xizmatlarga ko'proq ishonishadi Ba'zi ishlab chiquvchilar kaskadli uslublardan qochishni xohlashlarini qayerdan bilamiz? Bu "zamonaviy" front-end vositalarining yuksalishi, masalan, CSS-in-JS ramkalari - bu maqsad uchun maxsus ishlab chiqilgan. Muayyan tarkibiy qismlarga mahkam bog'langan izolyatsiya qilingan uslublar bilan ishlash toza havo nafasi kabi ko'rinishi mumkin. Bu narsalarni nomlash zaruratini yo'q qiladi - hali ham eng nafratlanadigan va ko'p vaqt talab qiladigan oldingi vazifalardan biri - va ishlab chiquvchilarga CSS merosining afzalliklarini to'liq tushunmasdan yoki undan foydalanmasdan samarali ishlashga imkon beradi. Ammo CSS Cascade-dan voz kechish o'z muammolari bilan birga keladi. Misol uchun, JavaScript-da uslublarni yaratish og'ir konfiguratsiyalarni talab qiladi va ko'pincha uslublar komponent belgilari yoki HTML bilan noqulay aralashib ketishiga olib keladi. Ehtiyotkorlik bilan ko'rib chiqilgan nomlash qoidalari o'rniga biz selektor va identifikatorlarni avtomatik yaratish vositalarini yaratishga ruxsat beramiz (masalan, .jsx-3130221066), ishlab chiquvchilardan boshqa psevdo-til bilan hamqadam bo'lishlarini talab qilamiz. (Kognitiv yuk sizning barcha komponentlaringizning foydalanish effektlari nima qilishini tushunish uchun etarli bo'lmaganga o'xshaydi!) Sinflarni nomlash ishini asboblarga qo'shimcha ravishda abstrakt qilish shuni anglatadiki, asosiy disk raskadrovka ko'pincha Dasturchilar asboblari kabi jonli disk raskadrovkani qo'llab-quvvatlaydigan mahalliy brauzer xususiyatlaridan foydalanish o'rniga, ishlab chiqish uchun tuzilgan maxsus dastur versiyalari bilan cheklanadi. Deyarli biz Internetda taqdim etayotgan narsalarni abstrakt qilish uchun foydalanadigan vositalarni disk raskadrovka qilish uchun vositalarni ishlab chiqishimiz kerak - barchasi standart CSS yozish "og'rig'idan" qochish uchun. Yaxshiyamki, zamonaviy CSS xususiyatlari nafaqat standart CSS yozishni yanada moslashuvchan qiladi, balki biz kabi ishlab chiquvchilarga kaskadni boshqarish va uni biz uchun ishlashi uchun ko'proq kuch beradi. CSS Cascade Layers - bu ajoyib misol, ammo hayratlanarli darajada e'tiborni tortadigan yana bir xususiyat bor - garchi u yaqinda Baseline mos bo'lganidan keyin o'zgarib bormoqda. CSS @scope At-Rule Men CSS @scope at-rule-ni biz qamrab olgan uslubdan kelib chiqadigan tashvishlar uchun potentsial davo deb hisoblayman, bu bizni abstraktsiyalar va qo'shimcha qurilish vositalari uchun mahalliy veb afzalliklarini buzishga majbur qilmaydi. "@scope CSS qoidasi sizga ma'lum DOM pastki daraxtlaridagi elementlarni tanlashga imkon beradi, elementlarni aniq nishonga oladi, ularni bekor qilish qiyin bo'lgan o'ta maxsus selektorlarni yozmasdan va selektorlaringizni DOM tuzilishiga juda qattiq bog'lamasdan." - MDN.
Boshqacha qilib aytadigan bo'lsak, biz meros, kaskad yoki hatto tashvishlarning asosiy bo'linishidan voz kechmasdan alohida holatlarda alohida uslublar bilan ishlashimiz mumkin.Bu front-end ishlab chiqishning uzoq vaqtdan beri davom etayotgan asosiy tamoyili bo'lib kelgan. Bundan tashqari, u mukammal brauzer qamroviga ega. Haqiqatan ham, Firefox 146 dekabr oyida @scope-ni qo'llab-quvvatladi va bu uni birinchi marta Baseline-ga moslashtirdi. Bu erda BEM naqshidan foydalanadigan tugma va @scope qoidasi o'rtasidagi oddiy taqqoslash:
@Scope qoidasi kamroq murakkablik bilan aniqlikka imkon beradi. Ishlab chiquvchi endi sinf nomlaridan foydalangan holda chegaralar yaratishi shart emas, bu esa, o‘z navbatida, mahalliy HTML elementlari asosida selektorlarni yozish imkonini beradi va shu bilan CSS sinf nomining ko‘rsatmalariga bo‘lgan ehtiyojni yo‘qotadi. Sinf nomini boshqarishga bo'lgan ehtiyojni oddiygina olib tashlash orqali @scope yirik loyihalarda CSS bilan bog'liq qo'rquvni engillashtirishi mumkin.
Asosiy foydalanish
Boshlash uchun CSS-ga @scope qoidasini qo'shing va uslublar qamrab olinadigan ildiz selektorni kiriting:
@scope (
Masalan, agar biz
@scope (nav) { a { /* Navigatsiya doirasidagi havola uslublari */ }
a:active { /* Faol havola uslublari */ }
a:active::oldin { /* Qo‘shimcha uslub uchun psevdoelementli faol havola */ }
@media (maksimal kenglik: 768px) { a { /* sezgir sozlashlar */ } } }
Bu o'z-o'zidan yangi xususiyat emas. Shu bilan birga, doiraning boshlang'ich va tugash nuqtalarini samarali belgilaydigan pastki chegarani yaratish uchun ikkinchi dalil qo'shilishi mumkin.
/* ul ichidagi har qanday elementda uslublar qo'llanilmaydi */ @scope (nav) dan (ul) { a { shrift o'lchami: 14px; } }
Bu amaliyot donut scope deb ataladi va foydalanish mumkin bo'lgan bir nechta yondashuvlar mavjud, jumladan, DOM strukturasi bilan mahkam bog'langan bir qator o'xshash, juda o'ziga xos selektorlar, :pseudo-selektor emas yoki turli CSS-ni boshqarish uchun
/*
Xulosa Tailwind kabi birinchi yordamchi CSS ramkalar prototiplash va kichikroq loyihalar uchun yaxshi ishlaydi. Biroq, bir nechta ishlab chiquvchilar ishtirokidagi yirik loyihalarda foydalanilganda, ularning foydalari tezda kamayadi. So'nggi bir necha yil ichida front-end ishlab chiqish tobora murakkablashdi va CSS ham bundan mustasno emas. @Scope qoidasi hamma narsani davolamasa-da, u murakkab vositalarga bo'lgan ehtiyojni kamaytirishi mumkin. Sinf strategik nomlash oʻrnida yoki uning yonida ishlatilsa, @scope qoʻllab-quvvatlanadigan CSS yozishni oson va qiziqarli qiladi. Qo'shimcha o'qish
CSS @scope (MDN) “CSS @scope”, Xuan Diego Rodriges (CSS-Tricks) Firefox 146 reliz yozuvlari (Firefox) Brauzerni qo'llab-quvvatlash (CanIUse) Ommabop CSS ramkalar (CSS 2024 holati) "CSS-dagi "C": Kaskad", Tomas Yip (CSS-Tricks) BEM bilan tanishish (BEM oling)
