ئاساسىي CSS نىڭ پرىنسىپلىرىنى ئۆگەنگەندە ، سىجىللىققا كاپالەتلىك قىلىش ئۈچۈن مودۇللۇق ، قايتا ئىشلەتكىلى بولىدىغان ۋە تەسۋىرلەش ئۇسلۇبى يېزىشنى ئۆگىتىدۇ. ئەمما پروگراممېرلار ئەمەلىي قوللىنىشچان پروگراممىلارغا ئارىلاشقاندا ، ئويلىمىغان رايونلارغا ئۇسلۇبلار كىرمەي تۇرۇپ UI ئىقتىدارلىرىنى قوشۇش ھەمىشە مۇمكىن ئەمەسدەك ھېس قىلىدۇ. بۇ مەسىلە ھەمىشە قار توپى ئۆزىنى ئۆزى قامدايدىغان ھالقا بولۇپ قالىدۇ نەزەرىيە جەھەتتىن بىر ئېلېمېنت ياكى سىنىپقا باغلانغان ئۇسلۇبلار ئۇلارنىڭ تەۋە ئەمەسلىكىنى كۆرسىتىشكە باشلايدۇ. بۇ پروگرامما ئاچقۇچىلارنى تېخىمۇ ئېنىق تاللىغۇچىلارنى بارلىققا كەلتۈرۈپ ، ئاشكارىلانغان ئۇسلۇبلارنى بېسىپ چۈشىدۇ ، ئاندىن ئېھتىياتسىزلىقتىن يەرشارى ئۇسلۇبىنى بېسىپ چۈشىدۇ. BEM غا ئوخشاش قاتتىق تۈردىكى ئىسىم ئەھدىنامىسى بۇ مەسىلىنىڭ بىر نەزەرىيەۋى ھەل قىلىش چارىسى. BEM (بۆلەك ، ئېلېمېنت ، ئۆزگەرتكۈچ) مېتودولوگىيەسى CSS ھۆججىتىنىڭ قايتا ئىشلىتىلىشچانلىقى ۋە قۇرۇلمىسىغا كاپالەتلىك قىلىش ئۈچۈن CSS سىنىپلىرىغا ئىسىم قويۇشنىڭ سىستېمىلىق ئۇسۇلى. مۇشۇنىڭغا ئوخشاش ئىسىم قويۇش تور نامىنى ئىشلىتىپ ئېلېمېنت ۋە ئۇلارنىڭ ھالىتىنى تەسۋىرلەش ئارقىلىق بىلىش يۈكىنى يېنىكلىتىدۇ ، ئەگەر توغرا يولغا قويۇلسا ، چوڭ قوللىنىشچان پروگراممىلارنىڭ ئۇسلۇبىنى ساقلاپ قېلىشقا قولايلىق يارىتىدۇ. رېئال دۇنيادا بولسا ، ھەمىشە ئۇنداق بولمايدۇ. مۇھىم نۇقتىلار ئۆزگىرىدۇ ، ئۆزگىرىش بىلەن يولغا قويۇش بىردەك بولمايدۇ. HTML قۇرۇلمىسىغا ئازراق ئۆزگەرتىش نۇرغۇن CSS سىنىپ نامىنى تۈزىتىشنى تەلەپ قىلىدۇ. ئۆز-ئارا تەسىر كۆرسىتىدىغان ئالدىنقى قاتاردىكى قوللىنىشچان پروگراممىلار بىلەن ، BEM ئەندىزىسىگە ئەگىشىدىغان سىنىپ ناملىرى ئۇزۇن ۋە قالايمىقان بولۇپ قالىدۇ (مەسىلەن ، قوللىنىشچان پروگرامما ئىشلەتكۈچىنىڭ ئومۇمىي كۆرۈنۈشى __ ستاتىستىكا - دەلىللەش) ، ئىسىم قويۇش قائىدىسىگە تولۇق ئەمەل قىلماسلىق سىستېمىنىڭ قۇرۇلمىسىنى بۇزىدۇ ، بۇ ئارقىلىق ئۇنىڭ پايدىسىنى يوققا چىقىرىدۇ. بۇ خىرىسلارنى ئويلاشقاندا ، ئاچقۇچىلارنىڭ رامكىغا يۈزلىنىشى ئەجەبلىنەرلىك ئەمەس ، Tailwind ئەڭ ئالقىشقا ئېرىشكەن CSS رامكىسى. ئۇسلۇبلار ئارىسىدىكى يەڭگىلى بولمايدىغان ئالاھىدە ئۇرۇشتەك كۆرۈنىدىغان جەڭگە ئۇرۇنماي ، CSS كاسكادىدىن ۋاز كېچىپ ، پۈتۈنلەي يەكلىنىشكە كاپالەتلىك قىلىدىغان قوراللارنى ئىشلىتىش ئاسان. پروگراممېرلار ئاممىۋى مۇلازىمەتكە تېخىمۇ تايىنىدۇ بەزى پروگراممېرلارنىڭ كاساتلاشقان ئۇسلۇبتىن ساقلىنىشقا قىزىقىدىغانلىقىنى قانداق بىلىمىز؟ بۇ مەخسۇس «زامانىۋى» ئالدىنقى سەپ قوراللىرىنىڭ قەد كۆتۈرۈشى - JSS دىكى JS رامكىسىغا ئوخشاش مەخسۇس مۇشۇ مەقسەت ئۈچۈن لايىھەلەنگەن. ئالاھىدە زاپچاسلارغا مەھكەم باغلانغان يەككە ئۇسلۇب بىلەن ئىشلەش قارىماققا ساپ ھاۋادىن نەپەس ئالغاندەك قىلىدۇ. ئۇ نەرسىلەرگە ئىسىم قويۇش ئېھتىياجىنى يوقىتىدۇ - يەنىلا ئەڭ نەپرەتلىنىدىغان ۋە ۋاقىت ئىسراپ قىلىدىغان ئالدىنقى قاتاردىكى ۋەزىپىلەرنىڭ بىرى بولۇپ ، CSS مىراسىنىڭ پايدىسىنى تولۇق چۈشەنمەي ياكى پايدىلانماي تۇرۇپ ، پروگراممېرلارنىڭ ئىشلەپچىقىرىش ئۈنۈمىنى ئۆستۈرىدۇ. ئەمما CSS كاسكادىسىنى كولاش ئۆزىنىڭ مەسىلىسى بىلەن كېلىدۇ. مەسىلەن ، JavaScript دىكى ئۇسلۇبلارنى تۈزۈش قاتتىق قۇرۇلما سەپلەشنى تەلەپ قىلىدۇ ھەمدە ھەمىشە ئۇسلۇبلارنىڭ زاپچاس بەلگىسى ياكى HTML بىلەن ئوڭاي ئارىلىشىپ كېتىشىنى كەلتۈرۈپ چىقىرىدۇ. ئىسىم قويۇش ئەھدىنامىسىنى ئەستايىدىل ئويلىنىشنىڭ ئورنىغا ، بىز ئۈچۈن تاللىغۇچ ۋە پەرقلىگۈچنى ئۆزلۈكىدىن ھاسىل قىلىدىغان قورال ياساشقا يول قويىمىز (مەسىلەن .jsx-3130221066) ، پروگراممېرلارنىڭ ئۆزىدىن باشقا ساختا تىل بىلەن ماسلىشىشىنى تەلەپ قىلىمىز. (بارلىق زاپچاسلىرىڭىزنىڭ ئىشلىتىش ئۈنۈمىنى چۈشىنىشنىڭ بىلىش يۈكى ئاللىقاچان يېتەرلىك ئەمەسدەك!) دەرسكە ئىسىم قويۇش خىزمىتىنى يەنىمۇ قىسقارتىش دېگىنىمىز ، پروگرامما ئاچقۇچىلار قوراللىرى قاتارلىق بىۋاسىتە توركۆرگۈچنى قوللايدىغان يەرلىك توركۆرگۈچ ئىقتىدارلىرىنى ئىشلىتىشتىن كۆرە ، ئاساسلىق ھەل قىلىش ئۇسۇلى كۆپىنچە ئېچىش ئۈچۈن تۈزۈلگەن قوللىنىشچان پروگراممىلارنىڭ چەكلىمىسىگە ئۇچرايدۇ. بۇ بىز ئىشلىتىۋاتقان قوراللارنى تور ئارقىلىق تەمىنلەپ بەرگەن مەزمۇنلارنى قىسقارتىش ئۈچۈن ئىشلىتىدىغان قوراللارنى تەرەققىي قىلدۇرۇشقا ئېھتىياجلىق بولغىنىمىزغا ئوخشايدۇ - ھەممىسى ئۆلچەملىك CSS يېزىشنىڭ «ئازابى» دىن قېچىش ئۈچۈن. تەلىيىمىزگە ، زامانىۋى CSS ئىقتىدارلىرى يېزىقچىلىق ئۆلچىمى CSS نى تېخىمۇ جانلىق قىلىپلا قالماي ، بىزگە ئوخشاش پروگراممېرلارنى كاساتنى باشقۇرۇش ۋە بىز ئۈچۈن تېخىمۇ كۆپ كۈچ بىلەن تەمىنلەيدۇ. CSS كاسكاد قەۋىتى ناھايىتى ياخشى مىسال ، ئەمما كىشىنى ھەيران قالدۇرىدىغان يەنە بىر ئىقتىدار بار - گەرچە ئۇ ھازىر ئاساسىي جەھەتتىن ماسلىشىشچان بولۇپ قالدى. CSS @scope At-Rule مەن CSS @scope قائىدىسىنى بىز قاپلىغان بىر خىل ئۇسلۇب ئېقىپ كېتىش ئەندىشىسىنىڭ يوشۇرۇن داۋاسى دەپ قارايمەن ، بۇ بىزنى ئابستراكت ۋە قوشۇمچە قۇرۇلۇش قوراللىرى ئۈچۈن يەرلىك تور ئەۋزەللىكىگە دەخلى قىلىشقا مەجبۇرلىمايدۇ. «@Scope CSS قائىدىسىدە سىزنى ئالاھىدە DOM تارماق تۈرلىرىدىكى ئېلېمېنتلارنى تاللىيالايسىز ، ھەددىدىن زىيادە ئالاھىدە بولغان تاللىغۇچىلارنى يازماي تۇرۇپ ، تاللىغۇچىلارنى DOM قۇرۇلمىسىغا بەك مەھكەم باغلىماي تۇرۇپ ، نىشاننى نىشانلىيالايسىز.» - MDN
باشقىچە قىلىپ ئېيتقاندا ، بىز ۋارىسلىق قىلىش ، كاساتلاش ، ھەتتا ئەندىشىلەرنى ئاساسىي ئايرىماي تۇرۇپ ، ئالاھىدە ئەھۋاللاردا يەككە ئۇسلۇب بىلەن ئىشلىيەلەيمىز.بۇ ئۇزۇن مۇددەتلىك تەرەققىياتنىڭ يېتەكچى پرىنسىپى بولۇپ كەلدى. ئۇنىڭدىن باشقا ، ئۇنىڭ تور كۆرگۈنىڭ قاپلاش نىسبىتى ناھايىتى ياخشى. ئەمەلىيەتتە ، Firefox 146 12-ئايدا @scope نى قوللىدى ، بۇ Baseline نى تۇنجى قېتىم ماسلاشتۇردى. بۇ يەردە @scope قائىدىسى بىلەن BEM ئەندىزىسىنى ئىشلىتىپ بىر كۇنۇپكىنى ئاددىي سېلىشتۇرۇش:
@Scope قائىدىسى مۇرەككەپلىكى بىلەن ئېنىقلىققا يول قويىدۇ. پروگرامما ئاچقۇچى ئەمدى سىنىپ نامىنى ئىشلىتىپ چېگرا ھاسىل قىلىشنىڭ ھاجىتى يوق ، بۇ ئۆز نۆۋىتىدە ئۇلارنىڭ يەرلىك HTML ئېلېمېنتلىرىنى ئاساس قىلىپ تاللىغۇچىلارنى يېزىشىغا يول قويىدۇ ، بۇ ئارقىلىق رېتسېپلىق CSS سىنىپ نامىنىڭ ئېھتىياجىنى يوقىتىدۇ. سىنىپ نامىنى باشقۇرۇشنىڭ ئېھتىياجىنى چىقىرىپ تاشلاش ئارقىلىق ، @scope چوڭ تۈرلەردە CSS بىلەن مۇناسىۋەتلىك قورقۇنچنى پەسەيتەلەيدۇ.
ئاساسىي ئىشلىتىش
باشلاش ئۈچۈن ، CSS غا @scope قائىدىسىنى قوشۇڭ ۋە ئۇسلۇب تاللىنىدىغان يىلتىز تاللىغۇچنى قىستۇرۇڭ:
@scope (
مەسىلەن ، ئەگەر بىز ئۇسلۇبنى
@scope (nav) { a {/ * nav دائىرىسىدىكى ئۇلىنىش ئۇسلۇبى * /}
a: ئاكتىپ {/ * ئاكتىپ ئۇلىنىش ئۇسلۇبى * /}
a: ئاكتىپ :: ئىلگىرى {/ * قوشۇمچە ئۇسلۇبتىكى ساختا ئېلېمېنت بىلەن ئاكتىپ ئۇلىنىش * /}
@media (max-width: 768px) { a {/ * ئىنكاس تەڭشەش * /} } }
بۇ ئۆز نۆۋىتىدە بۆسۈش خاراكتېرلىك ئىقتىدار ئەمەس. قانداقلا بولمىسۇن ، دائىرىگە ئىككىنچى بىر تالاش-تارتىش قوشۇلۇپ ، تۆۋەن چەك ھاسىل قىلىپ ، دائىرىنىڭ باشلىنىش ۋە ئاخىرلىشىش نۇقتىسىنى ئۈنۈملۈك بەلگىلىگىلى بولىدۇ.
/ * ئۇل ئىچىدىكى ھەر قانداق ئېلېمېنتنىڭ ئۇسلۇبى قوللىنىلمايدۇ * / @scope (nav) دىن (ul) { a { font-size: 14px; } }
بۇ خىل ئۇسۇل ئىئانە توپلاش دەپ ئاتىلىدۇ ، بۇ يەردە ئىشلىتىشكە بولىدىغان بىر قانچە خىل ئۇسۇل بار ، بۇنىڭ ئىچىدە بىر قاتار ئوخشىشىپ كېتىدىغان ، ئالاھىدە ئالاھىدە تاللىغۇچىلار DOM قۇرۇلمىسىغا مەھكەم باغلانغان ، a: ساختا تاللىغۇچى ئەمەس ، ياكى ئوخشىمىغان CSS نى بىر تەرەپ قىلىش ئۈچۈن
/ *
خۇلاسە Tailwind غا ئوخشاش ئىشلىتىدىغان بىرىنچى CSS رامكىسى ئەسلى تىپ ۋە كىچىك تۈرلەردە ياخشى ئىشلەيدۇ. بىر نەچچە پروگرامما ئاچقۇچىلار قاتناشقان چوڭ تۈرلەردە ئىشلىتىلگەندە ، ئۇلارنىڭ پايدىسى تېزلا تۆۋەنلەيدۇ. ئالدىنقى بىر نەچچە يىلدا ئالدىنقى قاتاردىكى تەرەققىيات كۈنسېرى مۇرەككەپلىشىپ كەتتى ، CSS مۇ بۇنىڭدىن مۇستەسنا ئەمەس. گەرچە @scope قائىدىسى ھەممىنى داۋالىغىلى بولمىسىمۇ ، ئەمما مۇرەككەپ قوراللارنىڭ ئېھتىياجىنى ئازايتالايدۇ. ئورنىدا ياكى ئىستراتېگىيىلىك سىنىپقا ئىسىم قويۇش بىلەن بىللە ئىشلەتكەندە ، @scope ساقلىغىلى بولىدىغان CSS يېزىشنى ئاسان ۋە تېخىمۇ قىزىقارلىق قىلالايدۇ. داۋاملىق ئوقۇش
CSS @scope (MDN) «CSS @scope» ، خۇان دىياگو رودرىگۇز (CSS-Tricks) Firefox 146 ئېلان قىلىش خاتىرىسى (Firefox) توركۆرگۈ قوللاش (CanIUse) داڭلىق CSS رامكىسى (CSS 2024) CSS دىكى «C»: كاسكاد »، توماس يىپ (CSS-Tricks) BEM تونۇشتۇرۇش (Get BEM)
