Əsas CSS prinsiplərini öyrənərkən, davamlılığı təmin etmək üçün modul, təkrar istifadə edilə bilən və təsviri üslubları yazmaq öyrədilir. Lakin tərtibatçılar real dünya tətbiqləri ilə məşğul olduqda, üslublar arzuolunmaz sahələrə sızmadan UI xüsusiyyətlərini əlavə etmək çox vaxt qeyri-mümkün görünür. Bu məsələ tez-tez özünü yerinə yetirən bir döngəyə qartopu edir; nəzəri olaraq bir elementə və ya sinifə aid olan üslublar aid olmadığı yerlərdə görünməyə başlayır. Bu, tərtibatçını sızdırılmış üslubları ləğv etmək üçün daha da spesifik seçicilər yaratmağa məcbur edir, sonra təsadüfən qlobal üslubları ləğv edir və s. BEM kimi sərt sinif adları konvensiyaları bu məsələnin nəzəri həllidir. BEM (Blok, Element, Modifikator) metodologiyası CSS faylları daxilində təkrar istifadə oluna bilməsini və strukturunu təmin etmək üçün CSS siniflərinin adlandırılmasının sistematik üsuludur. Bu kimi konvensiyaların adlandırılması elementləri və onların vəziyyətini təsvir etmək üçün domen dilindən istifadə etməklə koqnitiv yükü azalda bilər və düzgün tətbiq olunarsa, böyük tətbiqlər üçün üslubların saxlanmasını asanlaşdıra bilər. Gerçək dünyada isə bu, həmişə belə işləmir. Prioritetlər dəyişə bilər və dəyişikliklə birlikdə icra uyğunsuzluğa çevrilir. HTML strukturunda kiçik dəyişikliklər bir çox CSS sinif adının düzəlişlərini tələb edə bilər. Yüksək interaktiv qabaqcıl tətbiqlərlə, BEM nümunəsinə uyğun olan sinif adları uzun və çətin ola bilər (məsələn, proqram-istifadəçinin ümumi baxışı__status-autentifikasiya olunur) və adlandırma qaydalarına tam əməl edilməməsi sistemin strukturunu pozur və bununla da onun faydalarını inkar edir. Bu çətinlikləri nəzərə alaraq, tərtibatçıların çərçivələrə müraciət etmələri təəccüblü deyil, Tailwind ən populyar CSS çərçivəsidir. Üslublar arasında qalib gəlməz bir spesifiklik müharibəsi kimi görünən bir şeylə mübarizə aparmaq əvəzinə, CSS Cascade-dən imtina etmək və tam izolyasiyaya zəmanət verən vasitələrdən istifadə etmək daha asandır. Tərtibatçılar kommunal xidmətlərə daha çox güvənirlər Bəzi tərtibatçıların kaskad üslublardan qaçmaqda maraqlı olduğunu necə bilirik? Bu, xüsusi olaraq bu məqsəd üçün nəzərdə tutulmuş CSS-in-JS çərçivələri kimi “müasir” qabaqcıl alətlərin yüksəlişidir. Müəyyən komponentlərlə sıx şəkildə əhatə olunmuş təcrid olunmuş üslublarla işləmək təmiz hava nəfəsi kimi görünə bilər. Bu, hələ də ən çox nifrət edilən və vaxt aparan qabaqcıl vəzifələrdən biri olan əşyaların adlarını çəkmək ehtiyacını aradan qaldırır və tərtibatçılara CSS irsinin üstünlüklərini tam dərk etmədən və ya istifadə etmədən məhsuldar olmağa imkan verir. Lakin CSS Cascade-dən imtina öz problemləri ilə gəlir. Məsələn, JavaScript-də üslubların tərtib edilməsi ağır quruluş konfiqurasiyaları tələb edir və çox vaxt üslubların komponent işarələməsi və ya HTML ilə yöndəmsiz şəkildə qarışmasına səbəb olur. Diqqətlə düşünülmüş adlandırma konvensiyaları əvəzinə, biz qurma alətlərinə bizim üçün seçiciləri və identifikatorları avtomatik yaratmağa icazə veririk (məsələn, .jsx-3130221066), tərtibatçılardan özlüyündə başqa psevdodillə ayaqlaşmalarını tələb edirik. (Sanki komponentinizin bütün istifadə Effektlərinin nə etdiyini başa düşmək üçün idrak yükü artıq kifayət deyildi!) Alətlərə siniflərin adlandırılması işini daha da abstraksiya etmək o deməkdir ki, əsas sazlama tez-tez Developer Tools kimi canlı sazlamağı dəstəkləyən yerli brauzer xüsusiyyətlərindən istifadə etmək əvəzinə, inkişaf üçün tərtib edilmiş xüsusi proqram versiyaları ilə məhdudlaşır. Demək olar ki, biz internetin artıq təmin etdiklərini mücərrədləşdirmək üçün istifadə etdiyimiz alətləri sazlamaq üçün alətlər hazırlamalıyıq – hamısı standart CSS yazmaq “acısından” qaçmaq naminə. Xoşbəxtlikdən, müasir CSS xüsusiyyətləri nəinki standart CSS yazısını daha çevik edir, həm də bizim kimi tərtibatçılara kaskadı idarə etmək və onu bizim üçün işləmək üçün daha çox güc verir. CSS Cascade Layers əla nümunədir, lakin təəccüblü diqqəti cəlb edən başqa bir xüsusiyyət də var – baxmayaraq ki, bu yaxınlarda Baseline uyğunlaşdığına görə dəyişir. CSS @scope At-Rule Mən CSS @scope at-rule-ni əhatə etdiyimiz üslub sızması ilə bağlı narahatlıq üçün potensial müalicə hesab edirəm, bu, bizi abstraksiyalar və əlavə quraşdırma alətləri üçün yerli veb üstünlüklərini pozmağa məcbur etmir. “@scope CSS qaydası sizə xüsusi DOM alt ağaclarında elementləri seçməyə imkan verir, elementləri dəqiqliklə hədəfə alır və onları ləğv etmək çətin olan həddən artıq xüsusi seçicilər yazmadan və seçicilərinizi DOM strukturuna çox möhkəm bağlamadan.”— MDN.
Başqa sözlə, biz mirasdan, kaskaddan və hətta narahatlıqların əsas ayrılmasından imtina etmədən xüsusi hallarda təcrid olunmuş üslublarla işləyə bilərik.bu, qabaqcıl inkişafın uzun müddət davam edən rəhbər prinsipi olmuşdur. Üstəlik, əla brauzer əhatə dairəsinə malikdir. Əslində, Firefox 146 dekabr ayında @scope üçün dəstək əlavə etdi və ilk dəfə onu Baseline uyğunlaşdırdı. Budur, BEM nümunəsindən istifadə edən düymə ilə @scope qaydası arasında sadə müqayisə:
@scope qaydası daha az mürəkkəbliklə dəqiqliyə imkan verir. Tərtibatçıya artıq sinif adlarından istifadə edərək sərhədlər yaratmağa ehtiyac yoxdur, bu da öz növbəsində onlara yerli HTML elementləri əsasında seçicilər yazmağa imkan verir və bununla da göstərişli CSS sinif ad nümunələrinə ehtiyacı aradan qaldırır. Sadəcə olaraq sinif adlarının idarə edilməsi ehtiyacını aradan qaldırmaqla @scope böyük layihələrdə CSS ilə bağlı qorxunu azalda bilər.
Əsas İstifadə
Başlamaq üçün, @scope qaydasını CSS-ə əlavə edin və üslubların əhatə olunacağı kök seçicisini daxil edin:
@scope (
Beləliklə, məsələn, üslubları bir
@scope (nav) { a { /* naviqasiya daxilində keçid üslubları */ }
a:active { /* Aktiv keçid üslubları */ }
a:active::əvvəl { /* Əlavə üslub üçün psevdoelementli aktiv keçid */ }
@media (maksimum genişlik: 768px) { a { /* Cavab tənzimləmələri */ } } }
Bu, özlüyündə təməlqoyma xüsusiyyəti deyil. Bununla belə, əhatə dairəsinin başlanğıc və son nöqtələrini effektiv şəkildə müəyyən edən aşağı sərhəd yaratmaq üçün əhatə dairəsinə ikinci arqument əlavə edilə bilər.
/* ul daxilindəki hər hansı elementdə üslublar tətbiq edilməyəcək */ @scope (nav) - (ul) { a { şrift ölçüsü: 14px; } }
Bu təcrübə pişi əhatə dairəsi adlanır və istifadə edilə bilən bir neçə yanaşma var, o cümlədən DOM strukturu ilə sıx birləşdirilmiş bir sıra oxşar, yüksək spesifik seçicilər, :psevdoselektor deyil və ya fərqli CSS-i idarə etmək üçün
/*
Nəticə Tailwind kimi ilk köməkçi CSS çərçivələri prototipləmə və daha kiçik layihələr üçün yaxşı işləyir. Onların faydaları bir neçə tərtibatçıdan çox olan böyük layihələrdə istifadə edildikdə tez bir zamanda azalır. Front-end inkişafı son bir neçə ildə getdikcə daha çox mürəkkəbləşdi və CSS də istisna deyil. @Scope qaydası hər şeyi müalicə etməsə də, mürəkkəb alətlərə ehtiyacı azalda bilər. Strateji sinif adlandırma yerinə və ya onunla yanaşı istifadə edildikdə, @scope saxlanıla bilən CSS yazmağı asan və əyləncəli edə bilər. Əlavə Oxu
CSS @scope (MDN) “CSS @scope”, Juan Diego Rodriguez (CSS-Tricks) Firefox 146 Buraxılış Qeydləri (Firefox) Brauzer Dəstəyi (CanIUse) Populyar CSS Çərçivələri (CSS 2024 Vəziyyəti) “CSS-də “C”: Cascade”, Tomas Yip (CSS-Tricks) BEM Girişi (BEM əldə edin)
