لە کاتی فێربوونی بنەماکانی CSS بنەڕەتیدا، مرۆڤ فێر دەکرێت کە شێوازی مۆدیۆلار و دووبارە بەکارهێنەرەوە و وەسفکەر بنووسێت بۆ دڵنیابوون لە پاراستن. بەڵام کاتێک گەشەپێدەران خەریکی بەرنامەکانی جیهانی ڕاستەقینە دەبن، زۆرجار هەست دەکەیت مەحاڵە تایبەتمەندییەکانی UI زیاد بکرێت بەبێ ئەوەی ستایلەکان دزەیان پێبکرێت بۆ ناوچە نەخوازراوەکان. ئەم پرسە زۆرجار تۆپێکی بەفر دەبێت و دەبێتە لوپێکی خۆبەدیهێنان؛ ئەو ستایلانەی کە لە ڕووی تیۆریەوە مەودای یەک توخم یان پۆلێکن دەست دەکەن بە دەرکەوتن لەو شوێنانەی کە سەر بە خۆیان نین. ئەمەش گەشەپێدەر ناچار دەکات کە هەڵبژێرەری تایبەتتر دروست بکات بۆ جێبەجێکردنی ستایلە دزەپێکراوەکان، کە دواتر بە هەڵە ستایلە جیهانییەکان جێبەجێ دەکەن و هتد. ڕێکەوتنە ڕەقەکانی ناوی پۆلەکان، وەک BEM، یەکێکە لە چارەسەرە تیۆریەکانی ئەم پرسە. میتۆدۆلۆژیای BEM (Block, Element, Modifier) ڕێگەیەکی سیستماتیکە بۆ ناونانی پۆلەکانی CSS بۆ دڵنیابوون لە دووبارە بەکارهێنانەوە و پێکهاتە لەناو فایلەکانی CSS. ڕێکەوتننامەکانی ناونانی وەک ئەم دەتوانێت باری مەعریفی کەم بکاتەوە بە بەکارهێنانی زمانی دۆمەین بۆ وەسفکردنی توخمەکان و دۆخەکەیان، و ئەگەر بە دروستی جێبەجێ بکرێت، دەتوانێت ستایلەکان بۆ بەرنامە گەورەکان ئاسانتر بکات بۆ پاراستنی. بەڵام لە جیهانی ڕاستەقینەدا هەمیشە بەو شێوەیە دەرناچێت. ئەولەویەتەکان دەتوانن بگۆڕدرێن و لەگەڵ گۆڕانکاریدا جێبەجێکردن ناتەبایی دەبێت. گۆڕانکاری بچووک لە پێکهاتەی HTML دەتوانێت پێویستی بە چەندین پێداچوونەوە بە ناوی پۆلی CSS هەبێت. لەگەڵ بەرنامەکانی پێشەوەی کارلێککەری زۆر، ناوی پۆلەکان کە نەخشی BEM پەیڕەو دەکەن دەتوانن درێژ و نائاسایی بن (بۆ نموونە، app-user-overview__status--is-authenticating)، و پابەندنەبوون بە تەواوی بە یاساکانی ناونانی ناونانی پێکهاتەی سیستەمەکە دەشکێنێت، بەمەش سوودەکانی نکۆڵی دەکات. بە لەبەرچاوگرتنی ئەم تەحەددایانە، سەیر نییە کە گەشەپێدەران ڕوویان لە چوارچێوە کردووە، Tailwind بەناوبانگترین چوارچێوەی CSS ە. لەبری ئەوەی هەوڵبدەیت بەرەنگاربوونەوەی ئەوەی کە پێدەچێت وەک شەڕێکی تایبەتمەندی نەبردراو بێت لە نێوان ستایلەکاندا، ئاسانترە واز لە CSS Cascade بهێنیت و ئەو ئامرازانە بەکاربهێنیت کە گەرەنتی گۆشەگیری تەواو دەکەن. گەشەپێدەران زیاتر پشت بە خزمەتگوزارییەکان دەبەستن چۆن بزانین هەندێک لە گەشەپێدەران ئارەزووی دوورکەوتنەوەیان لە ستایلە پەستاندارەکان دەکەن؟ ئەوە سەرهەڵدانی ئامرازەکانی پێشەوەی “مۆدێرن”ە — وەک چوارچێوەی CSS-in-JS — کە بە تایبەتی بۆ ئەو مەبەستە دیزاین کراوە. کارکردن لەگەڵ ستایلە دابڕاوەکان کە بە توندی پەیوەستن بە پێکهاتە تایبەتەکانەوە دەتوانێت وەک هەناسەیەکی هەوای پاک دەرکەوێت. پێویستی ناونانی شتەکان لا دەبات - هێشتا یەکێکە لە ئەرکە پێشەوە ڕق لێکراوەکان و کات بەفیڕۆدەرەکان - و ڕێگە بە گەشەپێدەران دەدات بەرهەمدار بن بەبێ ئەوەی بە تەواوی لە سوودەکانی میراتی CSS تێبگەن یان سوودیان لێ وەربگرن. بەڵام وازهێنان لە CSS Cascade کێشەی خۆی لەگەڵ خۆیدا دەهێنێت. بۆ نموونە، پێکهاتەکردنی ستایلەکان لە جاڤاسکڕێپت پێویستی بە ڕێکخستنی دروستکردنی قورس هەیە و زۆرجار دەبێتە هۆی تێکەڵبوونی ستایلەکان بە شێوەیەکی نائاسایی لەگەڵ مارکاپی پێکهاتەکان یان HTML. لەبری ئەوەی بە وردی ڕەچاوی ڕێکەوتننامەکانی ناونانی بکەین، ڕێگە بە ئامرازەکانی دروستکردن دەدەین کە هەڵبژێرەران و ناسێنەرەکان بە شێوەیەکی ئۆتۆماتیکی بۆ ئێمە دروست بکەن (بۆ نموونە، .jsx-3130221066)، کە پێویستە گەشەپێدەران لەگەڵ زمانێکی ساختەی دیکەدا لە خۆیدا بەردەوام بن. (وەک ئەوەی باری مەعریفی تێگەیشتن لەوەی کە هەموو useEffects ی پێکهاتەکەت چی دەکەن پێشتر بەس نەبووبێت!) زیاتر ئەبستراکتکردنی کاری ناونانی پۆلەکان بۆ ئامرازکردن بەو مانایەیە کە زۆرجار چاککردنەوەی بنەڕەتی سنووردارە بە وەشانی تایبەتی بەرنامەکان کە بۆ پەرەپێدان کۆکراونەتەوە، نەک سوودوەرگرتن لە تایبەتمەندییە ڕەسەنەکانی وێبگەڕ کە پشتگیری لە چاککردنی ڕاستەوخۆ دەکەن، وەک ئامرازەکانی گەشەپێدەر. نزیکە وەک ئەوە وایە کە پێویستمان بە پەرەپێدانی ئامرازەکان بێت بۆ چاککردنەوەی ئەو ئامرازانەی کە بەکاریان دەهێنین بۆ ئەبستراکتکردنی ئەوەی کە وێب پێشتر دابینی دەکات — هەموو ئەمانە لە پێناو ڕاکردن لە "ئازار"ی نووسینی CSS ستاندارد. خۆشبەختانە تایبەتمەندییە مۆدێرنەکانی CSS نەک هەر نووسینی CSS ی ستاندارد نەرمتر دەکەن بەڵکو هێزێکی زۆر زیاتر بە گەشەپێدەرانی وەک ئێمە دەبەخشن بۆ بەڕێوەبردنی کاسکەدەکە و واکردن کە بۆ ئێمە کاربکات. چینەکانی CSS Cascade نموونەیەکی زۆر باشە، بەڵام تایبەتمەندییەکی تر هەیە کە کەمی سەرنجی سەرسوڕهێنەر بەدەست دەهێنێت — هەرچەندە ئەوە لە ئێستادا دەگۆڕێت کە بەم دواییە بووەتە گونجاو لەگەڵ Baseline. CSS @scope لە یاسادا من CSS @scope at-rule بە چارەسەرێکی پۆتانسێل دەزانم بۆ ئەو جۆرە دڵەڕاوکێیەی کە بەهۆی دزەکردنی ستایلەوە ڕووماڵمان کردووە، یەکێک کە ناچارمان ناکات سازش لەسەر سوودەکانی وێبی ڕەسەن بکەین بۆ ئەبستراکت و ئامرازی دروستکردنی زیادە. " @scope CSS at-rule ڕێگەت پێدەدات توخمەکان لە ژێردارە تایبەتەکانی DOMدا هەڵبژێریت، توخمەکان بە وردی بکاتە ئامانج بەبێ ئەوەی هەڵبژێرەری زۆر تایبەت بنووسیت کە سەختە سەرپێچی بکرێت، و بەبێ ئەوەی هەڵبژێردراوەکانت زۆر بە توندی بە پێکهاتەی DOM ببەستیت."— MDN
بە واتایەکی تر دەتوانین لەگەڵ شێوازە دابڕاوەکان لە نموونە تایبەتەکاندا کار بکەین بەبێ ئەوەی میرات، پەلەوەری و تەنانەت جیاکردنەوەی بنەڕەتی نیگەرانییەکانیش بکەین بە قوربانیکە بنەمایەکی ڕێنمایی درێژخایەنی پەرەپێدانی پێشەوە بووە. لەگەڵ ئەوەشدا، ڕووپۆشێکی نایابی وێبگەڕی هەیە. لە ڕاستیدا فایەرفۆکس ١٤٦ لە مانگی کانوونی دووەمدا پشتگیری بۆ @scope زیاد کرد، ئەمەش وایکرد بۆ یەکەمجار لەگەڵ Baseline بگونجێت. لێرەدا بەراوردێکی سادە لە نێوان دوگمەیەک کە نەخشی BEM بەکاردەهێنێت لە بەرامبەر یاسای @scope:
<ستایل> .button .button__text { /* شێوازەکانی دەقی دوگمە */ } .button .button__icon { /* شێوازەکانی ئایکۆنی دوگمە */ } .button--primary { شێوازەکانی دوگمەی سەرەتایی */ }
<ستایل> @scope (.دوگمەی سەرەتایی) { span:first-child { /* شێوازەکانی دەقی دوگمەی */ } span:last-child { /* ستایلەکانی ئایکۆنی دوگمە */ } }
یاسای @scope ڕێگە بە وردبینی دەدات بە ئاڵۆزیی کەمتر. گەشەپێدەر چیتر پێویستی بە دروستکردنی سنوور نییە بە بەکارهێنانی ناوی پۆلەکان، کە لە بەرامبەردا ڕێگەیان پێدەدات هەڵبژێرەر بنووسن لەسەر بنەمای توخمە ڕەسەنەکانی HTML، بەمەش پێویستی بە نەخشی ناوی پۆلی CSS ڕێنماییکراو نامێنێت. بە سادەیی لابردنی پێویستی بەڕێوەبردنی ناوی پۆلەکان، @scope دەتوانێت ئەو ترسەی پەیوەستە بە CSS لە پڕۆژە گەورەکاندا کەم بکاتەوە.
بەکارهێنانی بنەڕەتی
بۆ دەستپێکردن، یاسای @scope زیاد بکە بۆ CSS ـەکەت و هەڵبژێرەری ڕەگ دابنێ کە کام ستایلەکان سکۆپیان بۆ دەکرێت:
@scope (<هەڵبژێر>) {
/* ستایلەکان کە مەودایان بۆ
کەواتە، بۆ نموونە، ئەگەر ئێمە ستایلەکان بۆ توخمێکی
@سکۆپ (nav) { a { /* شێوازەکانی بەستەر لە ناو بازنەی nav */ }
a:active { /* شێوازەکانی بەستەری چالاک */ }
a:active::before { /* بەستەری چالاک لەگەڵ توخمە ساختەکان بۆ ستایلکردنی زیادە */ }
@media (زۆرترین پانایی: 768px) { a { /* ڕێکخستنە وەڵامدەرەوەکان */ } } }
ئەمەش، بە تەنیا، تایبەتمەندییەکی پێشکەوتوو نییە. بەڵام دەتوانرێت ئارگومێنتێکی دووەم بۆ مەودا زیاد بکرێت بۆ دروستکردنی سنوورێکی خوارەوە، کە بە شێوەیەکی کاریگەر خاڵەکانی دەستپێکردن و کۆتایی مەوداکە پێناسە دەکات.
/* هەر توخمێک لە ناو ul ستایلەکانی جێبەجێ ناکرێت */ @scope (nav) بۆ (ul) { a { قەبارەی فۆنت: 14px؛ } }
ئەم پراکتیزەیە پێی دەوترێت دۆناتس سکۆپینگ، و چەندین ڕێگە هەیە کە مرۆڤ دەتوانێت بەکاری بهێنێت، لەوانە زنجیرەیەک هەڵبژاردەی هاوشێوە و زۆر تایبەت کە بە توندی بە پێکهاتەی DOMەوە لکێنراون، :نەک هەڵبژاردەی ساختە، یان تەرخانکردنی ناوی پۆلی تایبەت بۆ توخمەکانی لە ناو
دەرەنجام چوارچێوەی CSSی یەکەمی سوودمەندی، وەک Tailwind، بە باشی کاردەکات بۆ پرۆتۆتایپکردن و پڕۆژە بچووکەکان. بەڵام سوودەکانیان بە خێرایی کەم دەبنەوە کاتێک لە پڕۆژە گەورەکاندا بەکاردەهێنرێن کە زیاتر لە یەک دوو گەشەپێدەر بەشدارن. پەرەپێدانی پێشەوە لە چەند ساڵی ڕابردوودا تادێت زۆر ئاڵۆز بووە و CSSش لەوە بێبەری نییە. لە کاتێکدا یاسای @scope چارەسەری هەموو شتێک نییە، بەڵام دەتوانێت پێویستی بە ئامرازکردنی ئاڵۆز کەم بکاتەوە. کاتێک لەبری، یان شانبەشانی ناونانی پۆلی ستراتیژی بەکاردەهێنرێت، @scope دەتوانێت ئاسانتر و خۆشتر بکات بۆ نووسینی CSS کە دەتوانرێت پارێزگاری لێبکرێت. خوێندنەوەی زیاتر
CSS @scope (MDN) “CSS @scope”، خوان دیێگۆ ڕۆدریگێز (CSS-Tricks) تێبینییەکانی بڵاوکردنەوەی فایەرفۆکس ١٤٦ (فایەرفۆکس) پشتگیری وێبگەڕ (CanIUse) چوارچێوە بەناوبانگەکانی CSS (دۆخی CSS 2024) “The “C” لە CSS: Cascade”، تۆماس یپ (CSS-Tricks) پێشەکی BEM (Get BEM)
