මූලික CSS හි මූලධර්ම ඉගෙන ගන්නා විට, නඩත්තු කිරීමේ හැකියාව සහතික කිරීම සඳහා මොඩියුලර්, නැවත භාවිතා කළ හැකි සහ විස්තරාත්මක මෝස්තර ලිවීමට කෙනෙකුට උගන්වනු ලැබේ. නමුත් සංවර්ධකයින් සැබෑ-ලෝක යෙදුම් සමඟ සම්බන්ධ වූ විට, අනපේක්ෂිත ප්රදේශවලට මෝස්තර කාන්දු නොවී UI විශේෂාංග එක් කිරීමට බොහෝ විට නොහැකි බව හැඟේ. මෙම ගැටළුව බොහෝ විට හිමබෝල ස්වයං-සම්පූර්ණ පුඩුවක් බවට පත්වේ; එක් මූලද්රව්යයකට හෝ පන්තියකට න්යායිකව විකාශනය වන මෝස්තර ඒවා අයිති නැති තැන පෙන්වීමට පටන් ගනී. මෙය කාන්දු වූ විලාසයන් අභිබවා යාමට ඊටත් වඩා නිශ්චිත තේරීම් කාරක නිර්මාණය කිරීමට සංවර්ධකයාට බල කරයි, එය අහම්බෙන් ගෝලීය මෝස්තර අභිබවා යයි, යනාදිය. BEM වැනි දෘඩ පංති නාම සම්මුතීන් මෙම ගැටලුව සඳහා එක් න්යායික විසඳුමකි. BEM (බ්ලොක්, මූලද්රව්ය, වෙනස් කරන්නා) ක්රමවේදය යනු CSS ගොනු තුළ නැවත භාවිත කිරීමේ හැකියාව සහ ව්යුහය සහතික කිරීම සඳහා CSS පන්ති නම් කිරීමේ ක්රමානුකූල ක්රමයකි. මෙවැනි සම්මුතීන් නම් කිරීම මූලද්රව්ය සහ ඒවායේ තත්ත්වය විස්තර කිරීමට වසම් භාෂාව උත්තෝලනය කිරීමෙන් සංජානන බර අඩු කර ගත හැකි අතර, නිවැරදිව ක්රියාත්මක කළහොත්, විශාල යෙදුම් සඳහා විලාසයන් නඩත්තු කිරීම පහසු කළ හැක. කෙසේ වෙතත්, සැබෑ ලෝකයේ, එය සෑම විටම එසේ සිදු නොවේ. ප්රමුඛතා වෙනස් විය හැකි අතර වෙනස් වීමත් සමඟ ක්රියාත්මක කිරීම නොගැලපේ. HTML ව්යුහයේ කුඩා වෙනස්කම් සඳහා බොහෝ CSS පන්ති නාම සංශෝධන අවශ්ය විය හැක. ඉහළ අන්තර්ක්රියාකාරී ඉදිරිපස යෙදුම් සමඟින්, BEM රටාව අනුගමනය කරන පන්ති නම් දිගු හා නොසැලකිලිමත් විය හැකිය (උදා., යෙදුම්-පරිශීලක-දළ විශ්ලේෂණය__තත්ත්වය--සත්යාපනය කරයි), සහ නම් කිරීමේ නීතිවලට සම්පූර්ණයෙන්ම අනුගත නොවීම පද්ධතියේ ව්යුහය බිඳ දමයි, එමඟින් එහි ප්රතිලාභ නිෂේධනය වේ. මෙම අභියෝග හමුවේ, සංවර්ධකයින් රාමු වෙත යොමු වීම පුදුමයක් නොවේ, Tailwind වඩාත් ජනප්රිය CSS රාමුව වේ. ශෛලීන් අතර ජයගත නොහැකි නිශ්චිතතා යුද්ධයක් ලෙස පෙනෙන දෙයට එරෙහිව සටන් කිරීමට උත්සාහ කරනවාට වඩා, CSS කඳුරැල්ල අත්හැරීම සහ සම්පූර්ණ හුදකලාව සහතික කරන මෙවලම් භාවිතා කිරීම පහසුය. සංවර්ධකයින් උපයෝගිතා මත වැඩිපුර නැඹුරු වේ සමහර සංවර්ධකයින් කැස්කැඩඩ් විලාසිතාවන්ගෙන් වැළකී සිටීමට උනන්දු වන බව අප දන්නේ කෙසේද? එය CSS-in-JS රාමු වැනි - "නවීන" ඉදිරිපස මෙවලම්වල නැගීමකි - එම අරමුණ සඳහා විශේෂයෙන් නිර්මාණය කර ඇත. නිශ්චිත සංරචක වලට තදින් සීමා වී ඇති හුදකලා මෝස්තර සමඟ වැඩ කිරීම නැවුම් වාතය ආශ්වාස කිරීමක් ලෙස පෙනේ. එය දේවල් නම් කිරීමේ අවශ්යතාවය ඉවත් කරයි - තවමත් වඩාත්ම පිළිකුල් කරන ලද සහ කාලය ගතවන ඉදිරිපස කාර්යයකි - සහ සංවර්ධකයින්ට CSS උරුමයේ ප්රතිලාභ සම්පූර්ණයෙන් අවබෝධ කර නොගෙන හෝ උත්තේජනය නොකර ඵලදායී වීමට ඉඩ සලසයි. නමුත් CSS කඳුරැල්ල ඉවත් කිරීම එහිම ගැටළු සමඟ පැමිණේ. උදාහරණයක් ලෙස, JavaScript හි විලාසයන් රචනා කිරීම සඳහා බර ගොඩනැංවීමේ වින්යාසයන් අවශ්ය වන අතර බොහෝ විට සංරචක සලකුණු කිරීම හෝ HTML සමඟ අමුතු ලෙස මිශ්ර වන මෝස්තර වලට මග පාදයි. ප්රවේශමෙන් සලකා බලන ලද නම් කිරීමේ සම්මුතීන් වෙනුවට, අප සඳහා තේරීම් සහ හඳුනාගැනීම් ස්වයංක්රීයව උත්පාදනය කිරීමට මෙවලම් තැනීමට අපි ඉඩ දෙමු (උදා., .jsx-3130221066), සංවර්ධකයින්ට සහ එහිම තවත් ව්යාජ භාෂාවක් සමඟින් සිටීමට අවශ්ය වේ. (ඔබේ සියලුම සංරචකයේ ප්රයෝජනය කුමක්ද යන්න තේරුම් ගැනීමේ සංජානන බර දැනටමත් ප්රමාණවත් නොවීම වැනිය!) මෙවලම් වෙත පන්ති නම් කිරීමේ කාර්යය තවදුරටත් වියුක්ත කිරීම යනු සංවර්ධක මෙවලම් වැනි සජීවී නිදොස්කරණයට සහය වන ස්වදේශීය බ්රවුසර විශේෂාංග උත්තේජනය කරනවාට වඩා සංවර්ධනය සඳහා සම්පාදනය කරන ලද විශේෂිත යෙදුම් අනුවාදවලට මූලික නිදොස්කරණය බොහෝ විට සීමා වී ඇති බවයි. සාමාන්ය CSS ලිවීමේ "වේදනාවෙන්" පලා යාම සඳහා - අන්තර්ජාලය දැනටමත් සපයන දේ වියුක්ත කිරීමට අප භාවිතා කරන මෙවලම් නිදොස් කිරීම සඳහා මෙවලම් සංවර්ධනය කිරීමට අවශ්ය වේ. වාසනාවකට මෙන්, නවීන CSS විශේෂාංග ලිවීම සම්මත CSS වඩාත් නම්යශීලී කරනවා පමණක් නොව, අප වැනි සංවර්ධකයින්ට කඳුරැල්ල කළමනාකරණය කිරීමට සහ එය අපට වැඩ කිරීමට විශාල බලයක් ලබා දෙයි. CSS Cascade Layers විශිෂ්ට උදාහරණයකි, නමුත් විස්මිත අවධානයක් නොලැබෙන තවත් විශේෂාංගයක් ඇත - එය මෑතකදී Baseline compatible බවට පත් වී ඇති බැවින් එය දැන් වෙනස් වෙමින් පවතී. CSS @scope At-Rule මම CSS @scope at-rule අපි ආවරණය කර ඇති ආකාරයේ විලාසය කාන්දු වීම-ප්රේරිත කාංසාව සඳහා විභව ප්රතිකාරයක් ලෙස සලකමි, එය වියුක්ත කිරීම් සහ අමතර ගොඩනැගීමේ මෙවලම් සඳහා ස්වදේශීය වෙබ් වාසි සම්මුතියට පත් කිරීමට අපට බල නොකරන එකක් ලෙසයි. "@scope CSS at-rule මඟින් ඔබට නිශ්චිත DOM subtrees තුළ මූලද්රව්ය තෝරා ගැනීමට හැකියාව ලබා දෙයි, ප්රතික්ෂේප කිරීමට අපහසු අතිශයින් විශේෂිත තේරීම් ලිවීමෙන් තොරව සහ ඔබේ තේරීම් DOM ව්යුහයට තදින් සම්බන්ධ නොකර නිශ්චිතවම මූලද්රව්ය ඉලක්ක කරයි." - MDN
වෙනත් වචන වලින් කිවහොත්, අපට උරුමය, කැස්කැඩින් හෝ මූලික සැලකිල්ලෙන් වෙන් කිරීම පවා කැප නොකර නිශ්චිත අවස්ථාවන්හිදී හුදකලා මෝස්තර සමඟ වැඩ කළ හැකිය.එය ඉදිරිපස සංවර්ධනයේ දිගුකාලීන මාර්ගෝපදේශක මූලධර්මයකි. ඊට අමතරව, එය විශිෂ්ට බ්රව්සර් ආවරණයක් ඇත. ඇත්ත වශයෙන්ම, Firefox 146 දෙසැම්බර් මාසයේදී @scope සඳහා සහය එක් කළ අතර, එය පළමු වරට Baseline අනුකූල විය. මෙන්න @scope රීතියට එරෙහිව BEM රටාව භාවිතා කරන බොත්තමක් අතර සරල සංසන්දනයක්:
< style> .button .button__text { /* button text styles */} .button .button__icon { /* බොත්තම් නිරූපක මෝස්තර */} .button--primary {primary button styles */}
< style> @scope (.primary-බොත්තම) { span:first-child { /* button text styles */} span:last-child { /* button icon styles */} }
@scope රීතිය අඩු සංකීර්ණතාවයකින් නිරවද්යතාවයට ඉඩ සලසයි. සංවර්ධකයාට තවදුරටත් පන්ති නාම භාවිතයෙන් මායිම් නිර්මාණය කිරීමට අවශ්ය නැත, එමඟින් ඔවුන්ට ස්වදේශීය HTML මූලද්රව්ය මත පදනම්ව තේරීම් ලිවීමට ඉඩ සලසයි, එමඟින් නිර්දේශිත CSS පන්ති නාම රටා අවශ්යතාවය ඉවත් කරයි. පන්ති නාම කළමනාකරණයේ අවශ්යතාවය ඉවත් කිරීමෙන්, @scope හට විශාල ව්යාපෘති වල CSS හා සම්බන්ධ බිය සමනය කළ හැක.
මූලික භාවිතය
ආරම්භ කිරීම සඳහා, ඔබේ CSS වෙත @scope රීතිය එක් කර විලාසයන් විෂය පථයට අයත් වන මූල තේරීමක් ඇතුළු කරන්න:
@scope (
එබැවින්, උදාහරණයක් ලෙස, අපි
@scope (nav) { නාවික විෂය පථය තුළ {/* සබැඳි විලාස */}
a:active { /* Active link styles */}
a:active:: පෙර { /* අමතර හැඩගැන්වීම් සඳහා ව්යාජ මූලද්රව්ය සමඟ සක්රිය සබැඳිය */}
@media (උපරිම-පළල: 768px) { a { /* ප්රතිචාරාත්මක ගැලපීම් */} } }
මෙය තනිවම, මුල් ලක්ෂණයක් නොවේ. කෙසේ වෙතත්, විෂය පථයේ ආරම්භක සහ අවසාන ලක්ෂ්ය ඵලදායි ලෙස නිර්වචනය කරමින් පහළ මායිමක් නිර්මාණය කිරීම සඳහා විෂය පථයට දෙවන තර්කයක් එක් කළ හැක.
/* උල් තුළ ඇති ඕනෑම මූලද්රව්යයකට මෝස්තර යොදන්නේ නැත */ @scope (nav) සිට (ul) { a { අකුරු ප්රමාණය: 14px; } }
මෙම පරිචය ඩෝනට් ස්කොපින් ලෙස හඳුන්වනු ලබන අතර, DOM ව්යුහයට තදින් සම්බන්ධ කරන ලද සමාන, ඉතා විශේෂිත තේරීම් මාලාවක්, :නොව්යාජ-තේරීමක්, හෝ වෙනස්වන CSS හැසිරවීම සඳහා
නිගමනය Tailwind වැනි උපයෝගිතා-පළමු CSS රාමු, මූලාකෘතිකරණය සහ කුඩා ව්යාපෘති සඳහා හොඳින් ක්රියා කරයි. කෙසේ වෙතත්, සංවර්ධකයින් කිහිප දෙනෙකුට වඩා වැඩි ගණනක් සම්බන්ධ වන විශාල ව්යාපෘතිවල භාවිතා කරන විට ඔවුන්ගේ ප්රතිලාභ ඉක්මනින් අඩු වේ. පසුගිය වසර කිහිපය තුළ ඉදිරිපස සංවර්ධනය වැඩි වැඩියෙන් සංකීර්ණ වී ඇති අතර CSS ද ව්යතිරේකයක් නොවේ. @ස්කෝප් රීතිය සුවයක් නොවන අතර, එය සංකීර්ණ මෙවලම් සඳහා අවශ්යතාවය අඩු කළ හැකිය. උපාය මාර්ගික පන්ති නම් කිරීම වෙනුවට භාවිතා කරන විට, @scope විසින් නඩත්තු කළ හැකි CSS ලිවීම පහසු සහ වඩාත් විනෝදජනක කළ හැක. වැඩිදුර කියවීම
CSS @scope (MDN) “CSS @scope”, Juan Diego Rodríguez (CSS-උපක්රම) Firefox 146 නිකුත් කිරීමේ සටහන් (Firefox) බ්රව්සර් සහාය (CanIUse) ජනප්රිය CSS රාමු (CSS තත්ත්වය 2024) CSS හි "C": Cascade", Thomas Yip (CSS-Ttricks) BEM හැඳින්වීම (BEM ලබා ගන්න)
