அடிப்படை CSS இன் கொள்கைகளைக் கற்கும் போது, பராமரிக்கும் தன்மையை உறுதி செய்வதற்காக மட்டு, மீண்டும் பயன்படுத்தக்கூடிய மற்றும் விளக்கமான பாணிகளை எழுதக் கற்றுக்கொடுக்கப்படுகிறது. ஆனால் டெவலப்பர்கள் நிஜ-உலகப் பயன்பாடுகளில் ஈடுபடும்போது, திட்டமிடப்படாத பகுதிகளில் ஸ்டைல்கள் கசியாமல் UI அம்சங்களைச் சேர்ப்பது பெரும்பாலும் சாத்தியமற்றதாக உணர்கிறது. இந்தப் பிரச்சினை பெரும்பாலும் ஒரு சுய-நிறைவேற்ற வளையமாக பனிப்பந்துகளாக மாறுகிறது; கோட்பாட்டு ரீதியாக ஒரு உறுப்பு அல்லது வகுப்பிற்கு நோக்கம் கொண்ட பாணிகள் அவை சார்ந்தவை அல்ல என்பதைக் காட்டத் தொடங்குகின்றன. இது கசிந்த பாணிகளை மேலெழுத இன்னும் குறிப்பிட்ட தேர்வாளர்களை உருவாக்க டெவலப்பரை கட்டாயப்படுத்துகிறது, பின்னர் அது தற்செயலாக உலகளாவிய பாணிகளை மேலெழுதுகிறது மற்றும் பல. BEM போன்ற கடுமையான வகுப்பு பெயர் மரபுகள், இந்த சிக்கலுக்கு ஒரு தத்துவார்த்த தீர்வாகும். BEM (தடுப்பு, உறுப்பு, மாற்றி) முறையானது CSS கோப்புகளுக்குள் மறுபயன்பாடு மற்றும் கட்டமைப்பை உறுதிப்படுத்த CSS வகுப்புகளுக்கு பெயரிடும் முறையான வழியாகும். இது போன்ற மரபுகளை பெயரிடுவது, உறுப்புகள் மற்றும் அவற்றின் நிலையை விவரிக்க டொமைன் மொழியை மேம்படுத்துவதன் மூலம் அறிவாற்றல் சுமையை குறைக்கலாம், மேலும் சரியாக செயல்படுத்தப்பட்டால், பெரிய பயன்பாடுகளுக்கான பாணிகளை எளிதாக பராமரிக்க முடியும். இருப்பினும், நிஜ உலகில், அது எப்போதும் அவ்வாறு செயல்படாது. முன்னுரிமைகள் மாறலாம் மற்றும் மாற்றத்துடன், செயல்படுத்தல் சீரற்றதாக மாறும். HTML கட்டமைப்பில் சிறிய மாற்றங்களுக்கு பல CSS வகுப்பு பெயர் திருத்தங்கள் தேவைப்படலாம். மிகவும் ஊடாடும் முன்-இறுதிப் பயன்பாடுகளுடன், BEM வடிவத்தைப் பின்பற்றும் வகுப்புப் பெயர்கள் நீளமாகவும், கட்டுப்பாடற்றதாகவும் மாறும் (எ.கா., app-user-overview__status--s-authenticating), மேலும் பெயரிடும் விதிகளை முழுமையாகக் கடைப்பிடிக்காமல் இருப்பது அமைப்பின் கட்டமைப்பை உடைத்து, அதன் பலன்களை மறுக்கிறது. இந்த சவால்களைக் கருத்தில் கொண்டு, டெவலப்பர்கள் கட்டமைப்பிற்கு மாறியதில் ஆச்சரியமில்லை, டெயில்விண்ட் மிகவும் பிரபலமான CSS கட்டமைப்பாகும். ஸ்டைல்களுக்கு இடையில் வெற்றிபெற முடியாத தனித்துவப் போராகத் தோன்றுவதை எதிர்த்துப் போராடுவதற்குப் பதிலாக, CSS அடுக்கைக் கைவிடுவது மற்றும் முழுமையான தனிமைப்படுத்தலுக்கு உத்தரவாதம் அளிக்கும் கருவிகளைப் பயன்படுத்துவது எளிது. டெவலப்பர்கள் பயன்பாடுகளில் அதிகம் சாய்ந்துள்ளனர் சில டெவலப்பர்கள் அடுக்கடுக்கான பாணிகளைத் தவிர்ப்பதில் ஆர்வமாக உள்ளனர் என்பதை நாம் எப்படி அறிவது? இது "நவீன" முன்-இறுதிக் கருவியின் எழுச்சி - CSS-in-JS கட்டமைப்புகள் போன்றது - குறிப்பாக அந்த நோக்கத்திற்காக வடிவமைக்கப்பட்டுள்ளது. குறிப்பிட்ட கூறுகளுக்கு இறுக்கமாக நோக்கப்பட்ட தனிமைப்படுத்தப்பட்ட பாணிகளுடன் பணிபுரிவது புதிய காற்றின் சுவாசமாகத் தோன்றும். இது விஷயங்களைப் பெயரிட வேண்டிய அவசியத்தை நீக்குகிறது - இன்னும் மிகவும் வெறுக்கப்படும் மற்றும் நேரத்தைச் செலவழிக்கும் முன்-இறுதிப் பணிகளில் ஒன்றாகும் - மேலும் CSS மரபுரிமையின் நன்மைகளை முழுமையாகப் புரிந்து கொள்ளாமல் அல்லது மேம்படுத்தாமல் டெவலப்பர்களை உற்பத்தி செய்ய அனுமதிக்கிறது. ஆனால் CSS அடுக்கை அகற்றுவது அதன் சொந்த பிரச்சனைகளுடன் வருகிறது. எடுத்துக்காட்டாக, ஜாவாஸ்கிரிப்ட்டில் பாணிகளை உருவாக்குவதற்கு கனமான கட்டமைப்பு உள்ளமைவுகள் தேவைப்படுகின்றன மற்றும் பெரும்பாலும் கூறு மார்க்அப் அல்லது HTML உடன் சங்கடமான முறையில் பாணிகளை இணைக்கிறது. கவனமாகப் பெயரிடும் மரபுகளுக்குப் பதிலாக, எங்களுக்கான தேர்வாளர்கள் மற்றும் அடையாளங்காட்டிகளை (எ.கா., .jsx-3130221066) தானாக உருவாக்க கருவிகளை உருவாக்க அனுமதிக்கிறோம். (உங்கள் கூறுகளின் பயன்விளைவுகள் என்ன செய்கின்றன என்பதைப் புரிந்துகொள்ளும் அறிவாற்றல் சுமை ஏற்கனவே போதுமானதாக இல்லை என்பது போல!) டூலிங்கிற்கு வகுப்புகளுக்கு பெயரிடும் வேலையை மேலும் சுருக்கினால், டெவலப்பர் டூல்ஸ் போன்ற நேரடி பிழைத்திருத்தத்தை ஆதரிக்கும் சொந்த உலாவி அம்சங்களை மேம்படுத்துவதை விட, மேம்பாட்டிற்காக தொகுக்கப்பட்ட குறிப்பிட்ட பயன்பாட்டு பதிப்புகளுக்கு அடிப்படை பிழைத்திருத்தம் பெரும்பாலும் கட்டுப்படுத்தப்படுகிறது. இணையம் ஏற்கனவே வழங்குவதை சுருக்கமாகப் பயன்படுத்த நாம் பயன்படுத்தும் கருவிகளை பிழைத்திருத்தம் செய்வதற்கான கருவிகளை உருவாக்குவது போன்றது - இவை அனைத்தும் நிலையான CSS எழுதும் "வலி" யிலிருந்து ஓடுவதற்காக. அதிர்ஷ்டவசமாக, நவீன CSS அம்சங்கள் நிலையான CSS எழுதுவதை மிகவும் நெகிழ்வானதாக்குவது மட்டுமல்லாமல், எங்களைப் போன்ற டெவலப்பர்களுக்கு அடுக்கை நிர்வகிப்பதற்கும் அதை எங்களுக்குச் செயல்பட வைப்பதற்கும் அதிக சக்தியை அளிக்கிறது. CSS அடுக்கு அடுக்குகள் ஒரு சிறந்த எடுத்துக்காட்டு, ஆனால் வியக்கத்தக்க கவனமின்மையைப் பெறும் மற்றொரு அம்சம் உள்ளது - இருப்பினும் அது சமீபத்தில் அடிப்படை இணக்கமாக மாறியதால் இப்போது மாறுகிறது. CSS @scope At-Rule CSS @scope at-rule என்பது, நாங்கள் உள்ளடக்கிய பாணி-கசிவு-தூண்டப்பட்ட கவலைக்கான சாத்தியமான சிகிச்சையாக நான் கருதுகிறேன், இது சுருக்கங்கள் மற்றும் கூடுதல் உருவாக்க கருவிகளுக்கான சொந்த இணைய நன்மைகளை சமரசம் செய்ய எங்களை கட்டாயப்படுத்தாது. "@ஸ்கோப் CSS விதியானது, குறிப்பிட்ட DOM சப்ட்ரீகளில் உள்ள உறுப்புகளைத் தேர்ந்தெடுக்கவும், மீறுவதற்கு கடினமாக இருக்கும் அதிகப்படியான-குறிப்பிட்ட தேர்வாளர்களை எழுதாமல், உங்கள் தேர்வாளர்களை DOM கட்டமைப்பில் மிகவும் இறுக்கமாக இணைக்காமல் துல்லியமாகக் குறிவைக்க உங்களை அனுமதிக்கிறது."- MDN
வேறு வார்த்தைகளில் கூறுவதானால், பரம்பரை, அடுக்கை அல்லது கவலைகளின் அடிப்படை பிரிவினையை கூட தியாகம் செய்யாமல் குறிப்பிட்ட நிகழ்வுகளில் தனிமைப்படுத்தப்பட்ட பாணிகளுடன் நாம் வேலை செய்யலாம்.இது முன்-இறுதி வளர்ச்சியின் நீண்டகால வழிகாட்டும் கொள்கையாகும். கூடுதலாக, இது சிறந்த உலாவி பாதுகாப்பு உள்ளது. உண்மையில், பயர்பாக்ஸ் 146 டிசம்பரில் @ஸ்கோப்புக்கான ஆதரவைச் சேர்த்தது, இது முதல்முறையாக பேஸ்லைன் இணக்கமாக இருந்தது. BEM வடிவத்தையும் @ஸ்கோப் விதியையும் பயன்படுத்தும் பொத்தானுக்கு இடையேயான எளிய ஒப்பீடு இங்கே உள்ளது:
<பாணி> .button .button__text { /* பொத்தான் உரை நடைகள் */} .button .button__icon { /* பொத்தான் ஐகான் ஸ்டைல்கள் */} .button--primary {primary button styles */}
<பாணி> @scope (.primary-button) { span:first-child { /* பொத்தான் உரை நடைகள் */ } span:last-child { /* பொத்தான் ஐகான் ஸ்டைல்கள் */} }
@ஸ்கோப் விதி குறைவான சிக்கலான தன்மையுடன் துல்லியமாக அனுமதிக்கிறது. டெவலப்பர் இனி வகுப்புப் பெயர்களைப் பயன்படுத்தி எல்லைகளை உருவாக்க வேண்டியதில்லை, இது, சொந்த HTML உறுப்புகளின் அடிப்படையில் தேர்வாளர்களை எழுத அனுமதிக்கிறது, இதன் மூலம் பரிந்துரைக்கப்பட்ட CSS வகுப்பு பெயர் வடிவங்களின் தேவையை நீக்குகிறது. வகுப்புப் பெயர் நிர்வாகத்தின் தேவையை நீக்குவதன் மூலம், @scope பெரிய திட்டங்களில் CSS உடன் தொடர்புடைய பயத்தைப் போக்கலாம்.
அடிப்படை பயன்பாடு
தொடங்குவதற்கு, உங்கள் CSS இல் @ஸ்கோப் விதியைச் சேர்த்து, ரூட் செலக்டரைச் செருகவும்.
@scope (
எனவே, எடுத்துக்காட்டாக, நாம் ஒரு
@scope (nav) { ஒரு { /* நேவ் ஸ்கோப்பில் உள்ள இணைப்பு நடைகள் */}
a:active { /* Active link styles */}
a:active:: முன் { /* கூடுதல் ஸ்டைலிங்கிற்கான போலி உறுப்புடன் செயலில் உள்ள இணைப்பு */}
@media (அதிகபட்ச அகலம்: 768px) { ஒரு { /* பதிலளிக்கக்கூடிய சரிசெய்தல்கள் */} } }
இது, அதன் சொந்த, ஒரு அற்புதமான அம்சம் அல்ல. இருப்பினும், குறைந்த எல்லையை உருவாக்க, நோக்கத்தின் தொடக்க மற்றும் இறுதிப் புள்ளிகளை திறம்பட வரையறுக்கும் நோக்கத்தில் இரண்டாவது வாதத்தை சேர்க்கலாம்.
/* ul ல் உள்ள எந்த உறுப்புக்கும் பயன்படுத்தப்படும் பாணிகள் இருக்காது */ @scope (nav) முதல் (ul) { ஒரு { எழுத்துரு அளவு: 14px; } }
இந்த நடைமுறை டோனட் ஸ்கோப்பிங் என்று அழைக்கப்படுகிறது, மேலும் DOM அமைப்பில் இறுக்கமாக இணைக்கப்பட்ட ஒரே மாதிரியான, மிகவும் குறிப்பிட்ட தேர்வாளர்களின் தொடர், போலி-தேர்வுக்குழு, அல்லது வேறுபட்ட CSS ஐக் கையாள உறுப்புகளுக்கு குறிப்பிட்ட வகுப்பு பெயர்களை ஒதுக்குவது உட்பட பல அணுகுமுறைகள் உள்ளன. மற்ற அணுகுமுறைகளைப் பொருட்படுத்தாமல், @ஸ்கோப் முறை மிகவும் சுருக்கமானது. மிக முக்கியமாக, வகுப்புப் பெயர்கள் மாறினால் அல்லது தவறாகப் பயன்படுத்தப்பட்டால் அல்லது HTML அமைப்பு மாற்றப்பட்டால் உடைந்த பாணிகளின் அபாயத்தைத் தடுக்கிறது. இப்போது @ஸ்கோப் அடிப்படை இணக்கமானது, எங்களுக்கு இனி தீர்வுகள் தேவையில்லை! "ஸ்டைல் ஃபிகர் எட்டை" உருவாக்க பல இறுதி எல்லைகளுடன் இந்த யோசனையை மேலும் எடுத்துச் செல்லலாம்:
முடிவுரை டெயில்விண்ட் போன்ற பயன்பாடு-முதல் CSS கட்டமைப்புகள், முன்மாதிரி மற்றும் சிறிய திட்டங்களுக்கு நன்றாக வேலை செய்கின்றன. இருப்பினும், இரண்டுக்கும் மேற்பட்ட டெவலப்பர்களை உள்ளடக்கிய பெரிய திட்டங்களில் பயன்படுத்தும்போது அவற்றின் பலன்கள் விரைவில் குறைந்துவிடும். கடந்த சில ஆண்டுகளில் முன்னணி-இறுதி வளர்ச்சி மிகவும் சிக்கலானதாகிவிட்டது, மேலும் CSS விதிவிலக்கல்ல. @ஸ்கோப் விதி ஒரு சிகிச்சை அல்ல என்றாலும், அது சிக்கலான கருவிகளின் தேவையைக் குறைக்கும். மூலோபாய வர்க்கப் பெயரிடுதலுக்குப் பதிலாகப் பயன்படுத்தப்படும்போது, @scope ஆனது பராமரிக்கக்கூடிய CSSஐ எழுதுவதை எளிதாகவும் வேடிக்கையாகவும் மாற்றும். மேலும் படித்தல்
CSS @scope (MDN) “CSS @scope”, ஜுவான் டியாகோ ரோட்ரிக்ஸ் (CSS-தந்திரங்கள்) பயர்பாக்ஸ் 146 வெளியீட்டு குறிப்புகள் (பயர்பாக்ஸ்) உலாவி ஆதரவு (CanIUse) பிரபலமான CSS கட்டமைப்புகள் (CSS நிலை 2024) CSS இல் "C": கேஸ்கேட்", தாமஸ் யிப் (CSS-ட்ரிக்ஸ்) BEM அறிமுகம் (BEM பெறவும்)
