ווען איר לערנען די פּרינסאַפּאַלז פון יקערדיק CSS, מען איז געלערנט צו שרייַבן מאַדזשאַלער, ריוזאַבאַל און דיסקריפּטיוו סטיילז צו ענשור מאַינטאַינאַביליטי. אָבער ווען דעוועלאָפּערס ווערן ינוואַלווד מיט פאַקטיש-וועלט אַפּלאַקיישאַנז, עס אָפט פילז אוממעגלעך צו לייגן UI פֿעיִקייטן אָן סטיילז ליקינג אין אַנינטענדיד געביטן. דעם אַרויסגעבן אָפט סנאָובאָלז אין אַ זיך-פולפילינג שלייף; סטיילז וואָס זענען טעאָרעטיש סקאָמעד צו איין עלעמענט אָדער קלאַס אָנהייבן צו ווייַזן זיך ווו זיי טאָן ניט געהערן. דאָס פאָרסעס די דעוועלאָפּער צו שאַפֿן אפילו מער ספּעציפיש סעלעקטאָרס צו אָווועררייד די ליקט סטיילז, וואָס דעמאָלט אַקסאַדענאַלי אָווועררייד גלאבאלע סטיילז, און אַזוי אויף. שטרענג קלאַס נאָמען קאַנווענשאַנז, אַזאַ ווי BEM, זענען איין טעאָרעטיש לייזונג צו דעם אַרויסגעבן. די BEM (בלאַק, עלעמענט, מאָדיפיער) מעטאַדאַלאַדזשי איז אַ סיסטעמאַטיש וועג פון נאָמען CSS קלאסן צו ענשור ריוזאַביליטי און סטרוקטור אין CSS טעקעס. נאַמינג קאַנווענשאַנז ווי דעם קענען רעדוצירן קאַגניטיוו מאַסע דורך לעווערידזשינג פעלד שפּראַך צו באַשרייַבן עלעמענטן און זייער שטאַט, און אויב ימפּלאַמענאַד ריכטיק, קענען מאַכן סטיילז פֿאַר גרויס אַפּלאַקיישאַנז גרינגער צו טייַנען. אין דער עמעס וועלט, אָבער, עס טוט נישט שטענדיק אַרבעט אַזוי. פּרייאָראַטיז קענען טוישן, און מיט ענדערונג, ימפּלאַמענטיישאַן ווערט סתירה. קליין ענדערונגען צו די HTML סטרוקטור קענען דאַרפן פילע CSS קלאַס נאָמען ריוויזשאַנז. מיט העכסט ינטעראַקטיוו פראָנט-ענד אַפּלאַקיישאַנז, קלאַס נעמען נאָך די BEM מוסטער קענען ווערן לאַנג און אַנווילדי (למשל, אַפּ-באַניצער-overview__status-איז-אָטענטאַקייטינג), און ניט גאָר אַדכירינג צו די נאַמינג כּללים ברייקס די סטרוקטור פון די סיסטעם, און דערמיט נעגינג זייַן בענעפיץ. געגעבן די טשאַלאַנדזשיז, עס ס קיין ווונדער אַז דעוועלאָפּערס האָבן זיך ווענדן צו פראַמעוואָרקס, טאַילווינד איז די מערסט פאָלקס קסס פריימווערק. אלא ווי טריינג צו קעמפן וואָס סימז ווי אַן אַנווינאַבאַל ספּעסיפיקאַטי מלחמה צווישן סטיילז, עס איז גרינגער צו געבן אַרויף אויף די CSS קאַסקאַדע און נוצן מכשירים וואָס גאַראַנטירן גאַנץ אפגעזונדערטקייט. דעוועלאָפּערס דאַר מער אויף יוטילאַטיז ווי טאָן מיר וויסן אַז עטלעכע דעוועלאָפּערס ווילן צו ויסמיידן קאַסקייד סטיילז? דאָס איז די העכערונג פון "מאָדערן" פראָנט-סוף מכשירים - ווי CSS-in-JS פראַמעוואָרקס - דיזיינד ספּאַסיפיקלי פֿאַר דעם צוועק. ארבעטן מיט אפגעזונדערט סטיילז וואָס זענען טייטלי סקאָמעד צו ספּעציפיש קאַמפּאָונאַנץ קענען ויסקומען ווי אַ אָטעם פון פריש לופט. עס רימוווז די נויט צו נאָמען טינגז - נאָך איינער פון די מערסט געהאסט און צייט-קאַנסומינג פראָנט-סוף טאַסקס - און אַלאַוז דעוועלאָפּערס צו זיין פּראָדוקטיוו אָן גאָר פֿאַרשטיין אָדער לעווערידזשינג די בענעפיץ פון CSS ירושה. אָבער דיטשינג די CSS קאַסקאַדע קומט מיט זיין אייגענע פראבלעמען. פֿאַר בייַשפּיל, קאַמפּאָוזינג סטיילז אין דזשאַוואַסקריפּט ריקווייערז שווער בויען קאַנפיגיעריישאַנז און אָפט פירט צו סטיילז ומגעלומפּערט ינטערמינג מיט קאָמפּאָנענט מאַרקאַפּ אָדער HTML. אַנשטאָט קערפאַלי באַטראַכט נאַמינג קאַנווענשאַנז, מיר לאָזן בויען מכשירים צו אַוטאָדזשענערייט סעלעקטאָרס און ידענטיפיערס פֿאַר אונדז (למשל, .jsx-3130221066), וואָס ריקווייערז דעוועלאָפּערס צו האַלטן זיך מיט נאָך אן אנדער פּסעוודאָ-שפּראַך אין און פון זיך. (ווי אויב די קאַגניטיוו מאַסע פון פארשטאנד וואָס אַלע דיין קאָמפּאָנענט ס נוצן יפעקץ זענען נישט גענוג!) ווייַטער אַבסטראַקטינג די אַרבעט פון נאַמינג קלאסן צו מכשירים מיטל אַז יקערדיק דיבאַגינג איז אָפט קאַנסטריינד צו ספּעציפיש אַפּלאַקיישאַן ווערסיעס קאַמפּיילד פֿאַר אַנטוויקלונג, אלא ווי לעווערידזשינג געבוירן בלעטערער פֿעיִקייטן וואָס שטיצן לעבן דיבאַגינג, אַזאַ ווי דעוועלאָפּער מכשירים. עס איז כּמעט ווי מיר דאַרפֿן צו אַנטוויקלען מכשירים צו דיבאַגינג די מכשירים וואָס מיר נוצן צו אַבסטראַקט וואָס די וועב שוין פּראָווידעס - אַלע פֿאַר די צוליב פון לויפן אַוועק פון די "ווייטיק" פון שרייבן נאָרמאַל CSS. צומ גליק, מאָדערן CSS פֿעיִקייטן ניט בלויז מאַכן די שרייבן נאָרמאַל CSS מער פלעקסאַבאַל, אָבער אויך געבן דעוועלאָפּערס ווי אונדז אַ פּלאַץ מער מאַכט צו פירן די קאַסקייד און מאַכן עס אַרבעט פֿאַר אונדז. CSS קאַסקאַדע לייַערס זענען אַ גרויס ביישפּיל, אָבער עס איז אן אנדער שטריך וואָס באַקומען אַ כידעשדיק פעלן פון ופמערקזאַמקייט - כאָטש דאָס איז טשאַנגינג איצט אַז עס איז לעצטנס געווארן באַסעלינע קאַמפּאַטאַבאַל. די CSS @scope At-Rule איך באַטראַכטן די CSS @scope at-rule צו זיין אַ פּאָטענציעל היילן פֿאַר די סאָרט פון סטיל-רינען-ינדוסט דייַגעס וואָס מיר האָבן קאַווערד, וואָס טוט נישט צווינגען אונדז צו קאָמפּראָמיס געבוירן וועב אַדוואַנטידזשיז פֿאַר אַבסטראַקציעס און עקסטרע בויען מכשירים. "די @scope CSS ביי-הערשן ינייבאַלז איר צו אויסקלייַבן עלעמענטן אין ספּעציפיש DOM סובטריעס, טאַרגאַטינג עלעמענטן פּונקט אָן שרייבן יבער-ספּעציפיש סעלעקטערז וואָס זענען שווער צו אָווועררייד, און אָן קאַפּלינג דיין סעלעקטאָרס צו טייטלי צו די DOM סטרוקטור." - MDN
אין אנדערע ווערטער, מיר קענען אַרבעטן מיט אפגעזונדערט סטיילז אין ספּעציפיש קאַסעס אָן קרבן ירושה, קאַסקיידינג אָדער אפילו די גרונט צעשיידונג פון קאַנסערנזוואָס איז געווען אַ לאַנג-לויפן גיידינג פּרינציפּ פון פראָנט-סוף אַנטוויקלונג. פּלוס, עס האט ויסגעצייכנט בלעטערער קאַווערידזש. אין פאַקט, Firefox 146 צוגעגעבן שטיצן פֿאַר @סקאָפּע אין דעצעמבער, מאכן עס באַסעלינע קאַמפּאַטאַבאַל פֿאַר די ערשטער מאָל. דאָ איז אַ פּשוט פאַרגלייַך צווישן אַ קנעפּל ניצן די BEM מוסטער קעגן די @סקאָפּע הערשן:
<סטייל> .button .button__text { /* קנעפּל טעקסט סטיילז */ } .button .button__icon { /* קנעפּל ייקאַן סטיילז */ } .קנעפּל - ערשטיק { ערשטיק קנעפּל סטיילז */ }
<סטייל> @scope (.primary-button) { שפּאַן: ערשטער-קינד {/* קנעפּל טעקסט סטיילז */ } שפּאַן: לעצטע קינד {/* קנעפּל ייקאַן סטיילז */ } }
די @scope הערשן אַלאַוז פּינטלעכקייַט מיט ווייניקער קאַמפּלעקסיטי. די דעוועלאָפּער ניט מער דאַרפֿן צו שאַפֿן באַונדריז ניצן קלאַס נעמען, וואָס, אין קער, אַלאַוז זיי צו שרייַבן סעלעקטאָרס באזירט אויף געבוירן HTML עלעמענטן, און דערמיט ילימאַנייטינג די נויט פֿאַר פּריסקריפּטיוו CSS קלאַס נאָמען פּאַטערנז. דורך פשוט רימוווינג די נויט פֿאַר קלאַס נאָמען פאַרוואַלטונג, @scope קענען גרינגער מאַכן די מורא פֿאַרבונדן מיט CSS אין גרויס פּראַדזשעקס.
יקערדיק באַניץ
צו אָנהייבן, לייג די @scope הערשן צו דיין CSS און אַרייַנלייגן אַ וואָרצל סעלעקטאָר צו וואָס סטיילז וועט זיין סקאָפּט:
@scope (
אַזוי, פֿאַר בייַשפּיל, אויב מיר זענען צו פאַרנעם סטיילז צו אַ
@scope (nav) { אַ {/* לינק סטיילז ין נאַוו פאַרנעם */ }
אַ: אַקטיוו { /* אַקטיוו לינק סטיילז */ }
a:active::before { /* אַקטיוו לינק מיט פּסעוודאָ-עלעמענט פֿאַר עקסטרע סטילינג */ }
@ מעדיע (מאַקס-ברייט: 768 פּקס) { אַ { /* אָפּרופיק אַדזשאַסטמאַנץ */ } } }
דאָס, אויף זיך, איז נישט אַ גראַונדברייקינג שטריך. אָבער, אַ צווייטע אַרגומענט קענען זיין מוסיף צו די פאַרנעם צו שאַפֿן אַ נידעריקער גרענעץ, יפעקטיוולי דיפיינינג די אָנהייב און סוף פונקטן פון די פאַרנעם.
/* קיין עלעמענט אין ul וועט נישט האָבן די סטיילז געווענדט */ @scope (nav) צו (ul) { א { שריפֿט גרייס: 14פּקס; } }
די פירונג איז גערופן פּעמפּיקל סקאָפּינג, און עס זענען עטלעכע אַפּראָוטשיז וואָס מען קען נוצן, אַרייַנגערעכנט אַ סעריע פון ענלעך, העכסט ספּעציפיש סעלעקטערז קאַפּאַלד צו די DOM סטרוקטור, אַ: ניט פּסעוודאָ-סעלעקטאָר, אָדער אַסיינינג ספּעציפיש קלאַס נעמען צו עלעמענטן אין די
מסקנא יוטיליטי-ערשטער קסס פראַמעוואָרקס, אַזאַ ווי טאַילווינד, אַרבעט געזונט פֿאַר פּראָוטאַטייפּ און קלענערער פּראַדזשעקס. זייער בענעפיץ געשווינד פאַרמינערן, אָבער, ווען געוויינט אין גרעסערע פּראַדזשעקס מיט מער ווי אַ פּאָר פון דעוועלאָפּערס. פראָנט-ענד אַנטוויקלונג איז ינקריסינגלי אָוווערקאַמפּליקייטיד אין די לעצטע יאָרן, און CSS איז קיין ויסנעם. כאָטש די @scope הערשן איז נישט אַ היילונג-אַלע, עס קען רעדוצירן די נויט פֿאַר קאָמפּלעקס מכשירים. ווען געוויינט אין פּלאַץ פון אָדער צוזאמען סטראַטידזשיק קלאַס נאַמינג, @scope קענען מאַכן עס גרינגער און מער שפּאַס צו שרייַבן מאַינטאַבאַל קסס. ווייַטער לייענען
CSS @scope (MDN) "CSS @scope", Juan Diego Rodríguez (CSS-טריקס) Firefox 146 מעלדונג נאָטעס (Firefox) בלעטערער שטיצן (CanIUse) פאָלקס CSS Frameworks (State of CSS 2024) "די "C" אין CSS: קאַסקייד, Thomas Yip (CSS-טריקס) BEM הקדמה (באַקומען BEM)