CSS @scope qaydası xüsusi DOM alt ağacındakı elementləri seçir və mürəkkəb seçici spesifikliyinə güvənmədən üslubları izolyasiya etməyə kömək edir. Bu xüsusiyyət üslubları enkapsulyasiya etmək üçün yerli yol təqdim edir, xüsusi komponent üçün yazılmış qaydaların veb-saytınızın digər hissələrinə təsadüfən təsir etməməsini təmin edir. CSS qaydaları üçün aydın sərhəd müəyyən etməklə tərtibatçılar layihə böyüdükcə proqnozlaşdırıla bilən qalan daha təmiz kod yaza bilərlər. Bu yanaşma üslub dəyişikliklərinin təsirini nəzərdə tutulan sahələrə lokalizasiya etməklə böyük üslub cədvəllərinin saxlanmasını sadələşdirir.
Layihələrinizdə niyə @scope qaydasından istifadə etməlisiniz?
Böyük tətbiqlərdə CSS-in idarə edilməsi çox vaxt tərtibatçıların mövcud üslubları ləğv etmək üçün getdikcə daha mürəkkəb seçicilər əlavə etdiyi spesifiklik müharibələri ilə nəticələnir. @scope qaydası əhatə dairəsi sərhədi yaratmaqla bunu effektiv şəkildə həll edir. Əhatə dairəsini təyin etdiyiniz zaman brauzer üslubları yalnız həmin xüsusi kökün daxilindəki elementlərə tətbiq edir. Bu, CSS şişməsinin qarşısını alır və BEM (Blok Element Modifikatoru) kimi adlandırma konvensiyalarına ehtiyacı azaldır, baxmayaraq ki, bir çox komandalar hələ də aydınlıq üçün onlardan istifadə edirlər. Qlobal səviyyədə əhatə olunmuş siniflərə güvənmək əvəzinə, komponentlərinizi təcrid olunmuş məntiq və təqdimat vahidləri kimi təyin edə bilərsiniz.
Tipik bir hesabda bir çox UI komponentinin idarə edilməsi çox vaxt təsadüfi üslub sızmasına səbəb olur. Məsələn, qlobal düymə üslubu kart komponenti içərisindəki düymənin xüsusi dizaynını ləğv edə bilər. @scope ilə düymə üslublarının yalnız .card konteynerində tətbiq olunduğunu açıq şəkildə müəyyən edə bilərsiniz. Bu, qlobal üslubların komponentə xas dizayna mane olmamasını təmin edir və səhifələrinizdə daha etibarlı vizual nəticə əldə etməyə imkan verir. Siz həmçinin fərqli üslub məntiqinə malik olmalı olan iç-içə komponentlərə üslubların sızmasının qarşısını almaq üçün əhatə dairəsi üçün limit təyin edə bilərsiniz.
@scope sintaksisi necə işləyir?
@scope üçün sintaksis sadədir və komponentinizin kökünü müəyyən edən aydın struktura əməl edir. Siz üslublarınız üçün konteyner rolunu oynayan başlanğıc nöqtəsi təyin edirsiniz. Bu blokun içərisində yazılmış istənilən seçici yalnız göstərilən kök daxilində uyğun gələn elementləri hədəf alacaq. Bu yerli CSS imkanı ağır JavaScript əsaslı üslub enkapsulyasiya kitabxanalarına ehtiyacı aradan qaldırır. Brauzer performans göstəriciləri üçün yüksək səmərəli olan əhatə dairəsinin həllini idarə edir.
- Kök seçicisini @scope (.my-component) { … } istifadə edərək müəyyən edin.
- Bütün komponentə xas CSS qaydalarını qıvrım mötərizələrə daxil edin.
- İç-içə komponentlər üçün xaric edilmə sərhədini təyin etmək üçün əlavə olaraq ‘to’ açar sözündən istifadə edin.
- Üslubların gözlənildiyi kimi saxlanmasını təmin etmək üçün tərtibatınızı sınayın.
Alien Road @scope qaydasını necə tətbiq edir
Alien Road-də biz müxtəlif müştəri layihələrində dizayn ardıcıllığını qorumaq üçün @scope qaydasını qurma prosesimizə inteqrasiya edirik. Müştəri üçün xüsusi eniş səhifəsi dizayn etdiyimiz zaman naviqasiya menyuları, kart şəbəkələri və altlıq bölmələri kimi təkrar olunan UI nümunələrini müəyyənləşdiririk. Daha sonra üslub sızmasının qarşısını almaq üçün bu komponentləri @scope bloklarına bükürük. Bu üsul komandamızın bir tərtibatçının dəyişikliklərinin digərinin komponentlərini pozacağından narahat olmadan eyni üslub cədvəlində əməkdaşlıq etməsinə imkan verir. Standart iş axınımız formanın daxiletmələri və ya tipoqrafiya ləğvləri kimi qlobal seçicilərin adətən ziddiyyət təşkil etdiyi yüksək riskli sahələrin müəyyən edilməsini əhatə edir.
Quraşdırma mərhələsində biz CSS dəyişənlərimiz və əhatə dairəsi daxilindəki üslublarımız üçün aydın iyerarxiya təyin edirik. Məsələn, əgər biz mürəkkəb idarə paneli qururuqsa, biz @scope qaydasını vidjet səviyyəsində tətbiq edirik. Bu, qlobal başlıqdakı rəng dəyişikliyinin xüsusi məlumat vidjetinin içindəki rəngləri təsadüfən dəyişdirməməsini təmin edir. Biz bu sərhədləri daxili üslub bələdçilərimizdə sənədləşdiririk ki, bu da dizaynerlərimizə və tərtibatçılarımıza CSS memarlığının necə qurulduğunu ümumi şəkildə başa düşməyə imkan verir. Bu strategiya işimizin müştəri üçün uzunmüddətli perspektivdə saxlanıla bilən və səmərəli olmasını təmin edir.
CSS izolyasiya üsullarının müqayisəsi
| Üsul | Mürəkkəblik | Brauzer Yerli |
|---|---|---|
| BEM Adlandırma | Yüksək | Xeyr |
| CSS Modulları | Orta | Xeyr |
| CSS @scope | Aşağı | Bəli |
Əhatə dairəsi olan CSS tətbiq edilərkən ümumi tələlər
@scope qaydası güclü olsa da, tərtibatçılar sərhədlərini düzgün müəyyən etmədikdə tez-tez çətinliklərlə qarşılaşırlar. Ümumi səhv fərqli üslub tələb edən iç-içə komponentləri nəzərə almamaqdır. Geniş əhatə dairəsi təyin etsəniz, siz öz daxili məntiqinə əsaslanan uşaq komponentinin üslubunu səhvən ləğv edə bilərsiniz. CSS-i oxumağı çətinləşdirə biləcək həddindən artıq yuvalanmanın qarşısını almaq üçün kök seçicinizi diqqətlə seçməlisiniz. Tətbiqinizin yarısını əhatə edən geniş əhatə dairələri əvəzinə xüsusi, dar əhatə dairələrindən istifadə etmək daha yaxşıdır.
Digər məsələ @scope ilə mövcud qlobal üslublar arasındakı qarşılıqlı əlaqədir. Əgər sizin CSS-də yüksək dərəcədə spesifik seçicilər varsa, onlar hələ də onların spesifikliyindən asılı olaraq əhatə dairəniz olan qaydalardan üstün ola bilər. Bunu azaltmaq üçün @scope bloku daxilindəki seçicilərinizi mümkün qədər sadə saxlayın. Əhatə dairəsində ID-lərdən və ya mürəkkəb nəsildən gələn seçicilərdən istifadə etməyin. Seçicilərinizi düz saxlamaqla, siz əhatə dairəsi sərhədinə komponentlər arasındakı əlaqəni idarə etməyə imkan verirsiniz ki, bu da bu xüsusiyyətin nəzərdə tutulan istifadəsidir.
@scope istifadə etməkdən nə vaxt çəkinməlisiniz?
Çox köhnə brauzer versiyaları ilə həddindən artıq uyğunluq tələb edən layihələrdə @scope-dan qaçınmalısınız. Yeni CSS xüsusiyyəti olduğundan, o, polifillər və ya tikinti zamanı transformasiyalar olmadan miras brauzerlər tərəfindən dəstəklənməyə bilər. Saytınız köhnə mobil cihazlardan xeyli miqdarda trafik alırsa, bu sintaksisi yalnız mənimsəməzdən əvvəl brauzer dəstəyi ölçülərini yoxlamalısınız. Belə ssenarilərdə ənənəvi BEM adlandırma bütün istifadəçi mühitlərində dizayn bütövlüyünü təmin etmək üçün hələ də daha təhlükəsiz seçim ola bilər.
Cari iş axınınızda @scope-u mənimsəmək üçün addımlar
- Tez-tez ziddiyyət təşkil edən komponentləri müəyyən etmək üçün cari CSS-ni yoxlayın.
- @scope sintaksisini sınamaq üçün az riskli komponent seçin.
- Həmin komponent üçün CSS-ni yeni əhatə dairəsi qaydasından istifadə etmək üçün yenidən nəzərdən keçirin.
- Tərkibi təsdiqləmək üçün müxtəlif görünüş pəncərələrində tərtibatı yoxlayın.
- Komandanız üçün əhatə dairəsi strategiyasını sənədləşdirin.
Tez-tez Verilən Suallar
@scope CSS ön prosessorlarına ehtiyacı əvəz edirmi?
Xeyr, @scope qaydası Sass və ya Less kimi ön prosessorları əvəz etmir. O, yerli enkapsulyasiya təmin etsə də, ön prosessorlar hələ də mürəkkəb üslub məntiqini idarə etməyə kömək edən miksinlər, dəyişənlər və yuvalama kimi faydalı alətlər təklif edir. Həm yerli brauzer xüsusiyyətlərinin, həm də tikinti vaxtı imkanlarının üstünlüklərini birləşdirərək CSS memarlığınızı effektiv şəkildə təşkil etmək üçün @scope-dan üstünlük verdiyiniz ön prosessorla yanaşı istifadə edə bilərsiniz.
Mən @scope qaydalarını bir-birinin içində yuvalaya bilərəmi?
Bəli, layihə memarlığınız tələb edərsə, @scope qaydalarını yuvalaya bilərsiniz. Bununla belə, bunu etmək üslub cədvəllərinizin mürəkkəbliyini artırır və səhvlərin aradan qaldırılmasını daha çətinləşdirə bilər. Veb komponentlərinizin inkişaf dövrü ərzində üslubların proqnozlaşdırıla bilən və idarə olunmasını asanlaşdırmaq üçün əhatə dairəsi təriflərinizi mümkün qədər düz saxlamaq ümumiyyətlə tövsiyə olunur.
Seçici həm əhatə dairəsinin içində, həm də xaricində mövcuddursa nə baş verir?
Brauzer standart CSS kaskad qaydalarına əməl edir. Əhatə dairəsindən kənarda olan seçicinin əhatə dairəsindəki seçicidən daha yüksək spesifikliyi varsa, qlobal üslub üstünlük təşkil edəcəkdir. @scope qaydası komponentin sərhədini idarə edir, lakin o, avtomatik olaraq əhatə dairəsi daxilindəki qaydalara qlobal üslublardan daha yüksək prioritet vermir. Ən yaxşı nəticələr əldə etmək üçün qlobal üslublarınızı ümumi, əhatə dairəsinə uyğun üslublarınızı isə xüsusi saxlayın.
Bu həftə haradan başlamaq lazımdır?
Bu həftə başlamaq üçün cari layihənizdə təkrar olunan bir komponenti müəyyənləşdirin – yan panel və ya kart kimi – və onun CSS-ni @scope qaydasından istifadə etmək üçün yenidən nəzərdən keçirin. Kiçik, təcrid olunmuş modul seçməklə siz sayt miqyasında qəza riski olmadan əhatə dairəsi məntiqinin mövcud üslublarınıza necə təsir etdiyini müşahidə edə bilərsiniz. Nəticələri sənədləşdirin və bu yanaşmanın standart inkişaf iş axınınıza uyğun olub olmadığını müəyyən etmək üçün onları komandanızla paylaşın.
Oxumağa davam edin: Veb Dizayn və İnkişaf · Veb Dizayn