CSS-இல் புரட்சி: நேட்டிவ் பேக்கேஜ் மேலாண்மைக்கான @package விதியில் ஒரு ஆழமான பார்வை

பல தசாப்தங்களாக, டெவலப்பர்கள் கேஸ்கேடிங் ஸ்டைல் ஷீட்களின் (CSS) மிகவும் வரையறுக்கப்பட்ட மற்றும் சவாலான அம்சங்களில் ஒன்றான அதன் உலகளாவிய தன்மையுடன் போராடி வருகின்றனர். சக்தி வாய்ந்ததாக இருந்தாலும், CSS-இன் உலகளாவிய ஸ்கோப் எண்ணற்ற பிரத்யேகத்தன்மைப் போர்களுக்கும், பெயரிடும் மரபு விவாதங்களுக்கும், மற்றும் கட்டமைப்புச் சிக்கல்களுக்கும் ஆதாரமாக இருந்து வருகிறது. BEM வழிமுறைகள் முதல் சிக்கலான ஜாவாஸ்கிரிப்ட் அடிப்படையிலான தீர்வுகள் வரை, அதை அடக்குவதற்காக CSS-இன் மேல் நாம் விரிவான அமைப்புகளை உருவாக்கியுள்ளோம். ஆனால், அந்தத் தீர்வு ஒரு லைப்ரரியாகவோ அல்லது ஒரு மரபாகவோ இல்லாமல், CSS மொழியின் ஒரு நேட்டிவ் பகுதியாகவே இருந்தால் எப்படி இருக்கும்? CSS பேக்கேஜ் விதி என்ற கருத்தாக்கத்திற்குள் நுழையுங்கள். இது நமது ஸ்டைல்ஷீட்களுக்குள் நேரடியாக வலுவான, பிரவுசர்-நேட்டிவ் பேக்கேஜ் மேலாண்மையைக் கொண்டுவருவதை நோக்கமாகக் கொண்ட ஒரு முன்னோக்கிய முன்மொழிவாகும்.

இந்த விரிவான வழிகாட்டி, இந்த மாற்றத்தை ஏற்படுத்தும் முன்மொழிவை ஆராய்கிறது. இது தீர்க்க முனையும் முக்கிய பிரச்சனைகளை நாம் பிரித்தாய்வோம், அதன் முன்மொழியப்பட்ட தொடரியல் மற்றும் இயக்கவியலை உடைத்துப் பார்ப்போம், நடைமுறைச் செயலாக்க எடுத்துக்காட்டுகளைப் பார்ப்போம், மற்றும் வலை மேம்பாட்டின் எதிர்காலத்திற்கு இது என்ன அர்த்தம் என்பதையும் காண்போம். நீங்கள் ஒரு வடிவமைப்பு அமைப்பின் அளவிடுதலுடன் போராடும் ஒரு கட்டமைப்பாளராக இருந்தாலும் சரி, அல்லது கிளாஸ் பெயர்களுக்கு முன்னொட்டு சேர்ப்பதில் சோர்வடைந்த ஒரு டெவலப்பராக இருந்தாலும் சரி, CSS-இல் இந்த பரிணாம வளர்ச்சியைப் புரிந்துகொள்வது மிக முக்கியமானது.

முக்கியப் பிரச்சனை: CSS-க்கு ஏன் நேட்டிவ் பேக்கேஜ் மேலாண்மை தேவைப்படுகிறது

தீர்வைப் பாராட்டுவதற்கு முன், நாம் பிரச்சனையை முழுமையாகப் புரிந்து கொள்ள வேண்டும். பெரிய அளவில் CSS-ஐ நிர்வகிப்பதில் உள்ள சவால்கள் புதியவை அல்ல, ஆனால் அவை கூறு-அடிப்படையிலான கட்டமைப்புகள் மற்றும் பெரிய, கூட்டுத் திட்டங்களின் காலத்தில் மேலும் தீவிரமடைந்துள்ளன. இந்தச் சிக்கல்கள் முதன்மையாக மொழியின் சில அடிப்படைப் பண்புகளிலிருந்து உருவாகின்றன.

உலகளாவிய பெயர்வெளிச் சிக்கல்

CSS-இல், நீங்கள் எழுதும் ஒவ்வொரு செலக்டரும் ஒரே, பகிரப்பட்ட, உலகளாவிய ஸ்கோப்பில் வாழ்கிறது. ஒரு ஹெடர் காம்போனென்ட்டின் ஸ்டைல்ஷீட்டில் வரையறுக்கப்பட்ட ஒரு .button கிளாஸ், ஒரு ஃபூட்டர் காம்போனென்ட்டின் ஸ்டைல்ஷீட்டில் குறிப்பிடப்படும் அதே .button கிளாஸ் தான். இது உடனடியாக மோதல் ஏற்படும் அதிக ஆபத்தை உருவாக்குகிறது.

ஒரு எளிய, பொதுவான சூழ்நிலையைக் கவனியுங்கள். உங்கள் குழு ஒரு அழகான கார்டு காம்போனென்ட்டை உருவாக்குகிறது:

.card { background: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); } .title { font-size: 1.5em; color: #333; }

பின்னர், வேறு ஒரு குழு, .card மற்றும் .title போன்ற பொதுவான கிளாஸ் பெயர்களைப் பயன்படுத்தும் ஒரு மூன்றாம் தரப்பு வலைப்பதிவு விட்ஜெட்டை ஒருங்கிணைக்கிறது, ஆனால் முற்றிலும் மாறுபட்ட ஸ்டைலிங்குடன். திடீரென்று, உங்கள் கார்டு காம்போனென்ட் உடைகிறது, அல்லது வலைப்பதிவு விட்ஜெட் தவறாகத் தெரிகிறது. கடைசியாக ஏற்றப்பட்ட ஸ்டைல்ஷீட் வெற்றி பெறுகிறது, இப்போது நீங்கள் ஒரு பிரத்யேகத்தன்மை அல்லது மூல-வரிசைச் சிக்கலைத் தீர்க்கிறீர்கள். இந்த உலகளாவிய தன்மை டெவலப்பர்களை தற்காப்பு குறியீட்டு முறைகளுக்குள் தள்ளுகிறது.

சார்புநிலை மேலாண்மை நரகம்

நவீன வலைப் பயன்பாடுகள் அரிதாகவே புதிதாக உருவாக்கப்படுகின்றன. நாம் மூன்றாம் தரப்பு லைப்ரரிகள், UI கிட்கள், மற்றும் ஃபிரேம்வொர்க்குகளின் செழிப்பான சூழல் அமைப்பை நம்பியுள்ளோம். இந்த சார்புநிலைகளுக்கான ஸ்டைல்களை நிர்வகிப்பது பெரும்பாலும் ஒரு பலவீனமான செயல்முறையாகும். நீங்கள் ஒரு பெரிய, ஒற்றைக்கல் CSS கோப்பை இறக்குமதி செய்து, உங்களுக்குத் தேவையானதை மேலெழுதி, எதையும் உடைக்க மாட்டீர்கள் என்று நம்புகிறீர்களா? உங்கள் குறியீட்டுடன் முரண்பாடுகளைத் தவிர்க்க, லைப்ரரியின் ஆசிரியர்கள் தங்கள் அனைத்து கிளாஸ்களையும் சரியாக பெயர்வெளியிட்டிருப்பார்கள் என்று நம்புகிறீர்களா? ஒரு முறையான சார்புநிலை மாதிரி இல்லாததால், நாம் பெரும்பாலும் எல்லாவற்றையும் ஒரே, பெரிய CSS கோப்பில் தொகுக்கிறோம், இதனால் ஸ்டைல்கள் எங்கிருந்து வருகின்றன என்ற தெளிவை இழந்து, ஒரு பராமரிப்புப் εφιάλτη-ஐ உருவாக்குகிறோம்.

தற்போதைய தீர்வுகளின் குறைபாடுகள்

இந்த வரம்புகளைச் சமாளிக்க டெவலப்பர் சமூகம் நம்பமுடியாத அளவிற்கு புதுமையான தீர்வுகளை உருவாக்கியுள்ளது. இருப்பினும், ஒவ்வொன்றும் அதன் சொந்த சமரசங்களுடன் வருகிறது:

• வழிமுறைகள் (BEM போன்றவை): பிளாக், எலிமென்ட், மாடிஃபையர் வழிமுறை பெயர்வெளியை உருவகப்படுத்த ஒரு கடுமையான பெயரிடும் மரபை (உதாரணமாக, .card__title--primary) உருவாக்குகிறது. நன்மை: இது வெறும் CSS மற்றும் எந்த கருவிகளும் தேவையில்லை. குறைபாடு: இது மிகவும் நீண்ட மற்றும் விரிவான கிளாஸ் பெயர்களுக்கு வழிவகுக்கும், முற்றிலும் டெவலப்பர் ஒழுக்கத்தைச் சார்ந்துள்ளது, மற்றும் உண்மையான என்கேப்சுலேஷனை வழங்காது. பெயரிடுவதில் ஒரு தவறு கூட ஸ்டைல் கசிவுகளுக்கு வழிவகுக்கும்.
• பில்ட்-டைம் கருவிகள் (CSS தொகுதிகள் போன்றவை): இந்த கருவிகள் உங்கள் CSS-ஐ பில்ட் நேரத்தில் செயலாக்கி, தானாகவே தனித்துவமான கிளாஸ் பெயர்களை (உதாரணமாக, .card_title_a8f3e) உருவாக்குகின்றன. நன்மை: இது உண்மையான, கோப்பு-நிலை ஸ்கோப் தனிமைப்படுத்தலை வழங்குகிறது. குறைபாடு: இதற்கு ஒரு குறிப்பிட்ட பில்ட் சூழல் (Webpack அல்லது Vite போன்றவை) தேவைப்படுகிறது, நீங்கள் எழுதும் CSS-க்கும் நீங்கள் பார்க்கும் HTML-க்கும் இடையிலான நேரடி இணைப்பை உடைக்கிறது, மற்றும் இது ஒரு நேட்டிவ் பிரவுசர் அம்சம் அல்ல.
• CSS-in-JS: ஸ்டைல்டு காம்போனென்ட்ஸ் அல்லது எமோஷன் போன்ற லைப்ரரிகள் உங்கள் ஜாவாஸ்கிரிப்ட் காம்போனென்ட் கோப்புகளுக்குள் நேரடியாக CSS எழுத அனுமதிக்கின்றன. நன்மை: இது சக்திவாய்ந்த, காம்போனென்ட்-நிலை என்கேப்சுலேஷன் மற்றும் டைனமிக் ஸ்டைலிங்கை வழங்குகிறது. குறைபாடு: இது இயக்க நேர மேல்சுமையை அறிமுகப்படுத்தலாம், ஜாவாஸ்கிரிப்ட் பண்டில் அளவை அதிகரிக்கலாம், மற்றும் பாரம்பரியமான கவலைகளின் பிரிவினையை மங்கலாக்குகிறது, இது பல குழுக்களுக்கு ஒரு சர்ச்சைக்குரிய விஷயமாகும்.
• ஷேடோ டாம் (Shadow DOM): வலை கூறுகள் தொகுப்பின் ஒரு பகுதியான ஒரு நேட்டிவ் பிரவுசர் தொழில்நுட்பம், இது முழுமையான DOM மற்றும் ஸ்டைல் என்கேப்சுலேஷனை வழங்குகிறது. நன்மை: இது கிடைக்கக்கூடிய தனிமைப்படுத்தலின் வலிமையான வடிவமாகும். குறைபாடு: இதனுடன் வேலை செய்வது சிக்கலானதாக இருக்கலாம், மற்றும் வெளியில் இருந்து காம்போனென்ட்களை ஸ்டைல் செய்வது (தீமிங்) CSS தனிப்பயன் பண்புகள் அல்லது ::part-ஐப் பயன்படுத்தி ஒரு திட்டமிட்ட அணுகுமுறை தேவை. இது ஒரு உலகளாவிய சூழலில் CSS சார்புநிலைகளை நிர்வகிப்பதற்கான ஒரு தீர்வு அல்ல.

இந்த அணுகுமுறைகள் அனைத்தும் செல்லுபடியாகக்கூடியவை மற்றும் பயனுள்ளவை என்றாலும், அவை தற்காலிகத் தீர்வுகள். CSS பேக்கேஜ் விதி முன்மொழிவு, ஸ்கோப், சார்புநிலைகள் மற்றும் பொது API-களின் கருத்துக்களை நேரடியாக மொழிக்குள் உருவாக்குவதன் மூலம் பிரச்சனையின் மூலத்தை நிவர்த்தி செய்வதை நோக்கமாகக் கொண்டுள்ளது.

CSS @package விதியை அறிமுகப்படுத்துதல்: ஒரு நேட்டிவ் தீர்வு

சமீபத்திய W3C முன்மொழிவுகளில் ஆராயப்பட்டபடி, CSS பேக்கேஜ் கருத்து, ஒரு ஒற்றை @package அட்-ரூலைப் பற்றியது அல்ல, மாறாக ஒரு பேக்கேஜிங் அமைப்பை உருவாக்க ஒன்றிணைந்து செயல்படும் புதிய மற்றும் மேம்படுத்தப்பட்ட அம்சங்களின் தொகுப்பாகும். ஒரு ஸ்டைல்ஷீட் ஒரு தெளிவான எல்லையை வரையறுக்க அனுமதிப்பதே முக்கிய யோசனையாகும், அதன் உள் ஸ்டைல்களை இயல்பாகவே தனிப்பட்டதாக மாற்றி, மற்ற ஸ்டைல்ஷீட்களால் நுகர்வுக்காக ஒரு பொது API-ஐ வெளிப்படையாக வெளிப்படுத்துகிறது.

முக்கிய கருத்துக்கள் மற்றும் தொடரியல்

இந்த அமைப்பின் அடித்தளம் இரண்டு முதன்மை அட்-ரூல்களைச் சார்ந்துள்ளது: @export மற்றும் ஒரு நவீனமயமாக்கப்பட்ட @import. ஒரு ஸ்டைல்ஷீட் இந்த விதிகளைப் பயன்படுத்துவதன் மூலம் ஒரு "பேக்கேஜ்" ஆகிறது.

1. இயல்பாகவே தனியுரிமை: ஒரு பேக்கேஜில் (விநியோகத்திற்காக உருவாக்கப்பட்ட ஒரு CSS கோப்பு) உள்ள அனைத்து ஸ்டைல்களும் இயல்பாகவே உள்ளூர் அல்லது தனிப்பட்டதாகக் கருதப்படுகின்றன என்பதே சிந்தனையில் உள்ள அடிப்படை மாற்றமாகும். அவை என்கேப்சுலேட் செய்யப்பட்டுள்ளன மற்றும் வெளிப்படையாக ஏற்றுமதி செய்யப்படாவிட்டால் உலகளாவிய ஸ்கோப்பையோ அல்லது மற்ற பேக்கேஜ்களையோ பாதிக்காது.

2. @export உடன் பொது API: தீமிங் மற்றும் இயங்குதன்மைக்கு அனுமதிக்க, ஒரு பேக்கேஜ் @export அட்-ரூலைப் பயன்படுத்தி ஒரு பொது API-ஐ உருவாக்க முடியும். "இங்கே வெளியுலகம் பார்க்கவும் மற்றும் தொடர்பு கொள்ளவும் அனுமதிக்கப்பட்ட எனது பாகங்கள் உள்ளன" என்று ஒரு பேக்கேஜ் கூறுவது இதுதான். தற்போது, இந்த முன்மொழிவு செலக்டர் அல்லாத சொத்துக்களை ஏற்றுமதி செய்வதில் கவனம் செலுத்துகிறது.

• CSS தனிப்பயன் பண்புகள்: தீமிங்கிற்கான முதன்மை வழிமுறை.
• கீஃப்ரேம் அனிமேஷன்கள்: பொதுவான அனிமேஷன்களைப் பகிர.
• CSS லேயர்கள்: கேஸ்கேட் வரிசையை நிர்வகிக்க.
• மற்ற சாத்தியமான ஏற்றுமதிகள்: எதிர்கால முன்மொழிவுகளில் கவுண்டர்கள், கிரிட் பெயர்கள் மற்றும் பலவற்றை ஏற்றுமதி செய்வது அடங்கும்.

தொடரியல் நேரடியானது:

/* my-theme.css-க்குள் */ @export --brand-primary: #0a74d9; @export --border-radius-default: 5px; @export standard-fade-in { from { opacity: 0; } to { opacity: 1; } }

3. @import உடன் கட்டுப்படுத்தப்பட்ட நுகர்வு: பழக்கமான @import விதி சூப்பர்சார்ஜ் செய்யப்படுகிறது. இது ஒரு பேக்கேஜை இறக்குமதி செய்வதற்கும் அதன் ஏற்றுமதி செய்யப்பட்ட API-ஐ அணுகுவதற்கும் ஆன வழிமுறையாகிறது. பாரம்பரிய @import ஏற்படுத்தக்கூடிய உலகளாவிய பெயர்வெளி மாசுபாட்டைத் தடுத்து, இதை ஒரு கட்டமைக்கப்பட்ட வழியில் கையாள புதிய தொடரியலை இந்த முன்மொழிவு உள்ளடக்கியுள்ளது.

/* app.css-க்குள் */ @import url("my-theme.css"); /* பேக்கேஜையும் அதன் பொது API-யையும் இறக்குமதி செய்கிறது */

இறக்குமதி செய்யப்பட்டவுடன், பயன்பாடு அதன் சொந்த காம்போனென்ட்களை ஸ்டைல் செய்ய ஏற்றுமதி செய்யப்பட்ட தனிப்பயன் பண்புகளைப் பயன்படுத்தலாம், இது தீம் பேக்கேஜில் வரையறுக்கப்பட்ட வடிவமைப்பு அமைப்புடன் நிலைத்தன்மையையும் இணக்கத்தையும் உறுதி செய்கிறது.

ஒரு நடைமுறைச் செயலாக்கம்: ஒரு காம்போனென்ட் பேக்கேஜை உருவாக்குதல்

கோட்பாடு சிறந்தது, ஆனால் இது நடைமுறையில் எப்படி வேலை செய்யும் என்று பார்ப்போம். நாம் ஒரு தன்னுள் அடங்கிய, தீம் செய்யக்கூடிய "அலர்ட்" காம்போனென்ட் பேக்கேஜை உருவாக்குவோம், இது அதன் சொந்த தனிப்பட்ட ஸ்டைல்கள் மற்றும் தனிப்பயனாக்கத்திற்கான ஒரு பொது API-ஐக் கொண்டுள்ளது.

படி 1: பேக்கேஜை வரையறுத்தல் (`alert-component.css`)

முதலில், நமது காம்போனென்ட்டிற்கான CSS கோப்பை உருவாக்குகிறோம். இந்தக் கோப்புதான் நமது "பேக்கேஜ்". நாம் எச்சரிக்கையின் முக்கிய கட்டமைப்பு மற்றும் தோற்றத்தை வரையறுப்போம். நாம் எந்த சிறப்பு ரேப்பர் விதியையும் பயன்படுத்தவில்லை என்பதைக் கவனியுங்கள்; கோப்பே பேக்கேஜ் எல்லையாகும்.

/* alert-component.css */ /* --- பொது API --- */ /* இவை நமது காம்போனென்ட்டின் தனிப்பயனாக்கக்கூடிய பகுதிகள். */ @export --alert-bg-color: #e6f7ff; @export --alert-border-color: #91d5ff; @export --alert-text-color: #0056b3; @export --alert-border-radius: 4px; /* --- தனிப்பட்ட ஸ்டைல்கள் --- */ /* இந்த ஸ்டைல்கள் இந்த பேக்கேஜுக்குள் என்கேப்சுலேட் செய்யப்பட்டுள்ளன. அவை அவற்றின் மதிப்புகளுக்கு ஏற்றுமதி செய்யப்பட்ட தனிப்பயன் பண்புகளைப் பயன்படுத்துகின்றன. இது இறுதியில் `@scope` உடன் இணைக்கப்படும்போது `.alert` கிளாஸ் ஸ்கோப் செய்யப்படும். */ .alert { padding: 1em 1.5em; border: 1px solid var(--alert-border-color); background-color: var(--alert-bg-color); color: var(--alert-text-color); border-radius: var(--alert-border-radius); display: flex; align-items: center; gap: 0.75em; } .alert-icon { /* எச்சரிக்கைக்குள் உள்ள ஒரு ஐகானுக்கான கூடுதல் தனிப்பட்ட ஸ்டைல்கள் */ flex-shrink: 0; } .alert-message { /* செய்தி உரைக்கான தனிப்பட்ட ஸ்டைல்கள் */ flex-grow: 1; }

முக்கியமான takeaway: நமக்கு ஒரு தெளிவான பிரிப்பு உள்ளது. மேலே உள்ள @export விதிகள் வெளியுலகத்துடனான ஒப்பந்தத்தை வரையறுக்கின்றன. கீழே உள்ள கிளாஸ்-அடிப்படையிலான விதிகள் உள் செயலாக்க விவரங்கள். மற்ற ஸ்டைல்ஷீட்கள் .alert-icon-ஐ நேரடியாக இலக்கு வைக்க முடியாது மற்றும் கூடாது.

படி 2: ஒரு பயன்பாட்டில் பேக்கேஜைப் பயன்படுத்துதல் (`app.css`)

இப்போது, நமது புதிய எச்சரிக்கை காம்போனென்ட்டை நமது முக்கிய பயன்பாட்டில் பயன்படுத்துவோம். நாம் பேக்கேஜை இறக்குமதி செய்வதன் மூலம் தொடங்குகிறோம். HTML எளிமையாகவும் செமண்டிக்காகவும் உள்ளது.

HTML (`index.html`):

<div class="alert"> <span class="alert-icon">ℹ️</span> <p class="alert-message">இது நமது காம்போனென்ட் பேக்கேஜைப் பயன்படுத்தும் ஒரு தகவல் செய்தி.</p> </div>

CSS (`app.css`):

/* app.css */ /* 1. பேக்கேஜை இறக்குமதி செய்யவும். பிரவுசர் இந்தக் கோப்பை எடுத்து, அதன் ஸ்டைல்களைச் செயலாக்கி, அதன் ஏற்றுமதிகளைக் கிடைக்கச் செய்கிறது. */ @import url("alert-component.css"); /* 2. பயன்பாட்டின் தளவமைப்புக்கான உலகளாவிய ஸ்டைல்கள் */ body { font-family: sans-serif; padding: 2em; background-color: #f4f7f6; }

இந்த நிலையில், எச்சரிக்கை காம்போனென்ட் அதன் இயல்புநிலை நீல-தீம் ஸ்டைலிங்குடன் பக்கத்தில் ரெண்டர் ஆகும். alert-component.css-இல் இருந்து ஸ்டைல்கள் பயன்படுத்தப்படுகின்றன, ஏனெனில் காம்போனென்ட்டின் மார்க்கப் .alert கிளாஸைப் பயன்படுத்துகிறது, மற்றும் ஸ்டைல்ஷீட் இறக்குமதி செய்யப்பட்டுள்ளது.

படி 3: காம்போனென்ட்டைத் தனிப்பயனாக்குதல் மற்றும் தீமிங் செய்தல்

குழப்பமான மேலெழுதல்களை எழுதாமல் காம்போனென்ட்டை எளிதாக தீம் செய்யக்கூடிய திறனிலிருந்து உண்மையான சக்தி வருகிறது. நமது பயன்பாட்டு ஸ்டைல்ஷீட்டில் பொது API-ஐ (தனிப்பயன் பண்புகள்) மேலெழுதுவதன் மூலம் ஒரு "வெற்றி" மற்றும் ஒரு "ஆபத்து" வகைகளை உருவாக்குவோம்.

HTML (`index.html`):

<div class="alert"> <p class="alert-message">இது இயல்புநிலை தகவல் எச்சரிக்கை.</p> </div> <div class="alert alert-success"> <p class="alert-message">உங்கள் செயல்பாடு வெற்றிகரமாக இருந்தது!</p> </div> <div class="alert alert-danger"> <p class="alert-message">ஒரு பிழை ஏற்பட்டது. தயவுசெய்து மீண்டும் முயற்சிக்கவும்.</p> </div>

CSS (`app.css`):

@import url("alert-component.css"); body { font-family: sans-serif; padding: 2em; background-color: #f4f7f6; } /* --- எச்சரிக்கை காம்போனென்ட்டை தீமிங் செய்தல் --- */ /* நாம் .alert-icon போன்ற உள் கிளாஸ்களை இலக்கு வைக்கவில்லை. நாம் அதிகாரப்பூர்வ, பொது API-ஐ மட்டுமே பயன்படுத்துகிறோம். */ .alert-success { --alert-bg-color: #f6ffed; --alert-border-color: #b7eb8f; --alert-text-color: #389e0d; } .alert-danger { --alert-bg-color: #fff1f0; --alert-border-color: #ffa39e; --alert-text-color: #cf1322; }

இது காம்போனென்ட் ஸ்டைலிங்கை நிர்வகிக்க ஒரு சுத்தமான, வலுவான மற்றும் பராமரிக்கக்கூடிய வழியாகும். பயன்பாட்டுக் குறியீடு எச்சரிக்கை காம்போனென்ட்டின் உள் கட்டமைப்பு பற்றி எதுவும் தெரிந்து கொள்ளத் தேவையில்லை. அது நிலையான, ஆவணப்படுத்தப்பட்ட தனிப்பயன் பண்புகளுடன் மட்டுமே தொடர்பு கொள்கிறது. காம்போனென்ட் ஆசிரியர் உள் கிளாஸ் பெயர்களை .alert-message-இலிருந்து .alert__text-க்கு மாற்ற முடிவு செய்தால், பயன்பாட்டின் ஸ்டைலிங் உடையாது, ஏனெனில் பொது ஒப்பந்தம் (தனிப்பயன் பண்புகள்) மாறவில்லை.

மேம்பட்ட கருத்துக்கள் மற்றும் ஒருங்கிணைப்புகள்

CSS பேக்கேஜ் கருத்து, மற்ற நவீன CSS அம்சங்களுடன் தடையின்றி ஒருங்கிணைக்க வடிவமைக்கப்பட்டுள்ளது, இது வலையில் ஸ்டைலிங்கிற்கான ஒரு சக்திவாய்ந்த, ஒத்திசைவான அமைப்பை உருவாக்குகிறது.

பேக்கேஜ்களுக்கு இடையிலான சார்புநிலைகளை நிர்வகித்தல்

பேக்கேஜ்கள் இறுதிப் பயனர் பயன்பாடுகளுக்கு மட்டுமல்ல. அதிநவீன அமைப்புகளை உருவாக்க அவை ஒன்றையொன்று இறக்குமதி செய்யலாம். வடிவமைப்பு டோக்கன்களை (நிறங்கள், எழுத்துருக்கள், இடைவெளி) மட்டுமே ஏற்றுமதி செய்யும் ஒரு அடித்தளமான "தீம்" பேக்கேஜை கற்பனை செய்து பாருங்கள்.

/* theme.css */ @export --color-brand-primary: #6f42c1; @export --font-size-base: 16px; @export --spacing-unit: 8px;

ஒரு பட்டன் காம்போனென்ட் பேக்கேஜ், அதன் மதிப்புகளைப் பயன்படுத்த இந்த தீம் பேக்கேஜை இறக்குமதி செய்யலாம், அதே நேரத்தில் அதன் சொந்த, மேலும் குறிப்பிட்ட தனிப்பயன் பண்புகளையும் ஏற்றுமதி செய்யலாம்.

/* button-component.css */ @import url("theme.css"); /* வடிவமைப்பு டோக்கன்களை இறக்குமதி செய்கிறது */ /* பட்டனுக்கான பொது API */ @export --btn-padding: var(--spacing-unit); @export --btn-bg-color: var(--color-brand-primary); /* பட்டனுக்கான தனிப்பட்ட ஸ்டைல்கள் */ .button { background-color: var(--btn-bg-color); padding: var(--btn-padding); /* ... மற்ற பட்டன் ஸ்டைல்கள் */ }

இது ஒரு தெளிவான சார்புநிலை வரைபடத்தை உருவாக்குகிறது, இது ஸ்டைல்கள் எங்கிருந்து உருவாகின்றன என்பதைக் கண்டறிவதை எளிதாக்குகிறது மற்றும் ஒரு முழு வடிவமைப்பு அமைப்பு முழுவதும் நிலைத்தன்மையை உறுதி செய்கிறது.

CSS ஸ்கோப் (@scope) உடன் ஒருங்கிணைப்பு

CSS பேக்கேஜ் முன்மொழிவு மற்றொரு அற்புதமான அம்சத்துடன் நெருங்கிய தொடர்புடையது: @scope அட்-ரூல். @scope DOM மரத்தின் ஒரு குறிப்பிட்ட பகுதிக்குள் மட்டுமே ஸ்டைல்களைப் பயன்படுத்த உங்களை அனுமதிக்கிறது. இணைந்தால், அவை உண்மையான என்கேப்சுலேஷனை வழங்குகின்றன. ஒரு பேக்கேஜ் அதன் ஸ்டைல்களை ஒரு ஸ்கோப் பிளாக்கிற்குள் வரையறுக்கலாம்.

/* alert-component.css-இல் */ @scope (.alert) { :scope { /* .alert உறுப்புக்கான ஸ்டைல்கள் */ padding: 1em; } .alert-icon { /* இந்த செலக்டர் ஒரு .alert உறுப்புக்கு உள்ளே இருக்கும் .alert-icon-உடன் மட்டுமே பொருந்தும் */ color: blue; } } /* இது பாதிக்கப்படாது, ஏனெனில் இது ஸ்கோப்பிற்கு வெளியே உள்ளது */ .alert-icon { ... }

இந்தக் கலவையானது ஒரு பேக்கேஜின் ஸ்டைல்கள் கட்டுப்படுத்தப்பட்ட API-ஐக் கொண்டிருப்பது மட்டுமல்லாமல், பக்கத்தின் மற்ற பகுதிகளைப் பாதிக்காமல் வெளியே கசிவதைத் தடுக்கவும் உடல்ரீதியாகத் தடுக்கப்படுகிறது, இது உலகளாவிய பெயர்வெளிப் பிரச்சனையை அதன் மூலத்திலேயே தீர்க்கிறது.

வலை கூறுகளுடன் ஒருங்கிணைப்பு

ஷேடோ டாம் இறுதி என்கேப்சுலேஷனை வழங்கினாலும், பல காம்போனென்ட் லைப்ரரிகள் ஸ்டைலிங் சிக்கல்கள் காரணமாக அதைப் பயன்படுத்துவதில்லை. CSS பேக்கேஜ் அமைப்பு இந்த "லைட் டாம்" காம்போனென்ட்களுக்கு ஒரு சக்திவாய்ந்த மாற்றீட்டை வழங்குகிறது. இது ஷேடோ டாமிற்கு முழுமையாக மாறத் தேவையில்லாமல் என்கேப்சுலேஷன் நன்மைகளையும் (@scope வழியாக) மற்றும் தீமிங் கட்டமைப்பையும் (@export வழியாக) வழங்குகிறது. வலை கூறுகளைப் பயன்படுத்துபவர்களுக்கு, பேக்கேஜ்கள் தனிப்பயன் பண்புகள் வழியாக காம்போனென்ட்டின் ஷேடோ டாமிற்கு அனுப்பப்படும் பகிரப்பட்ட வடிவமைப்பு டோக்கன்களை நிர்வகிக்க முடியும், இது ஒரு சரியான கூட்டாண்மையை உருவாக்குகிறது.

@package-ஐ தற்போதைய தீர்வுகளுடன் ஒப்பிடுதல்

இந்த புதிய நேட்டிவ் அணுகுமுறை இன்று நாம் பயன்படுத்துபவற்றுடன் எப்படி ஒப்பிடுகிறது?

• vs. CSS Modules: இலக்கு மிகவும் ஒத்திருக்கிறது—ஸ்கோப் செய்யப்பட்ட ஸ்டைல்கள். இருப்பினும், CSS பேக்கேஜ் அமைப்பு ஒரு பிரவுசர்-நேட்டிவ் தரநிலை, ஒரு பில்ட் கருவி மரபு அல்ல. இதன் பொருள் உள்நாட்டில் ஸ்கோப் செய்யப்பட்ட கிளாஸ் பெயர்களைப் பெற சிறப்பு லோடோர்களோ அல்லது உருமாற்றங்களோ தேவையில்லை. CSS Modules-இல் உள்ள :global தப்பிக்கும் வழியுடன் ஒப்பிடும்போது, பொது API @export உடன் மேலும் வெளிப்படையானது.
• vs. BEM: BEM என்பது ஸ்கோப்பை உருவகப்படுத்தும் ஒரு பெயரிடும் மரபு; CSS பேக்கேஜ் அமைப்பு பிரவுசரால் செயல்படுத்தப்படும் உண்மையான ஸ்கோப்பை வழங்குகிறது. இது ஒன்றைத் தொட வேண்டாம் என்று höflich கேட்பதற்கும் ஒரு பூட்டிய கதவுக்கும் உள்ள வித்தியாசம். இது மிகவும் வலுவானது மற்றும் மனிதப் பிழைக்கு குறைவான வாய்ப்புள்ளது.
• vs. Tailwind CSS / யூட்டிலிட்டி-ஃபர்ஸ்ட்: Tailwind போன்ற யூட்டிலிட்டி-ஃபர்ஸ்ட் கட்டமைப்புகள் முற்றிலும் மாறுபட்ட ஒரு முன்னுதாரணம், இது HTML-இல் குறைந்த-நிலை யூட்டிலிட்டி கிளாஸ்களிலிருந்து இடைமுகங்களை உருவாக்குவதில் கவனம் செலுத்துகிறது. ஒரு CSS பேக்கேஜ் அமைப்பு உயர்-நிலை, செமண்டிக் காம்போனென்ட்களை உருவாக்குவதை நோக்கமாகக் கொண்டுள்ளது. இரண்டும் கூட இணைந்து இருக்க முடியும்; ஒருவர் Tailwind-இன் @apply டைரக்டிவை உள்நாட்டில் பயன்படுத்தி ஒரு காம்போனென்ட் பேக்கேஜை உருவாக்கலாம், அதே நேரத்தில் தீமிங்கிற்காக ஒரு சுத்தமான, உயர்-நிலை API-ஐ ஏற்றுமதி செய்யலாம்.

CSS கட்டமைப்பின் எதிர்காலம்: இது டெவலப்பர்களுக்கு என்ன அர்த்தம்

ஒரு நேட்டிவ் CSS பேக்கேஜ் அமைப்பின் அறிமுகம், நாம் CSS-ஐப் பற்றி எப்படி சிந்திப்போம் மற்றும் எழுதுவோம் என்பதில் ஒரு மகத்தான மாற்றத்தைக் குறிக்கிறது. இது பல ஆண்டுகால சமூக முயற்சி மற்றும் புதுமையின் உச்சக்கட்டமாகும், இறுதியாக தளத்திலேயே சுடப்படுகிறது.

காம்போனென்ட்-ஃபர்ஸ்ட் ஸ்டைலிங்கை நோக்கிய ஒரு மாற்றம்

இந்த அமைப்பு CSS உலகில் காம்போனென்ட்-அடிப்படையிலான மாதிரியை ஒரு முதல்-வகுப்பு குடிமகனாக உறுதிப்படுத்துகிறது. இது டெவலப்பர்களை சிறிய, மீண்டும் பயன்படுத்தக்கூடிய, மற்றும் உண்மையிலேயே தன்னுள் அடங்கிய UI துண்டுகளை உருவாக்க ஊக்குவிக்கிறது, ஒவ்வொன்றும் அதன் சொந்த தனிப்பட்ட ஸ்டைல்கள் மற்றும் நன்கு வரையறுக்கப்பட்ட பொது இடைமுகத்துடன். இது மேலும் அளவிடக்கூடிய, பராமரிக்கக்கூடிய, மற்றும் நெகிழ்வான வடிவமைப்பு அமைப்புகளுக்கு வழிவகுக்கும்.

சிக்கலான பில்ட் கருவிகள் மீதான சார்புநிலையைக் குறைத்தல்

மினிஃபிகேஷன் மற்றும் பழைய பிரவுசர் ஆதரவு போன்ற பணிகளுக்கு பில்ட் கருவிகள் எப்போதும் அவசியமாக இருக்கும் என்றாலும், ஒரு நேட்டிவ் பேக்கேஜ் அமைப்பு நமது பில்ட் பைப்லைன்களின் CSS பகுதியை வியத்தகு முறையில் எளிதாக்கக்கூடும். கிளாஸ் பெயர் ஹாஷிங் மற்றும் ஸ்கோப்பிங்கைக் கையாள தனிப்பயன் லோடர்கள் மற்றும் செருகுநிரல்களின் தேவை மறைந்துவிடும், இது வேகமான பில்ட்கள் மற்றும் எளிமையான உள்ளமைவுகளுக்கு வழிவகுக்கும்.

தற்போதைய நிலை மற்றும் எப்படித் தகவலறிந்து இருப்பது

@export மற்றும் தொடர்புடைய அம்சங்கள் உட்பட CSS பேக்கேஜ் அமைப்பு தற்போது ஒரு முன்மொழிவு என்பதை நினைவில் கொள்வது அவசியம். இது இன்னும் எந்த நிலையான பிரவுசரிலும் கிடைக்கவில்லை. இந்தக் கருத்துக்கள் W3C-இன் CSS பணிக்குழுவால் தீவிரமாக விவாதிக்கப்பட்டு செம்மைப்படுத்தப்படுகின்றன. இதன் பொருள் இங்கே விவரிக்கப்பட்டுள்ள தொடரியல் மற்றும் நடத்தை இறுதிச் செயலாக்கத்திற்கு முன் மாறக்கூடும்.

முன்னேற்றத்தைப் பின்தொடர:

• அதிகாரப்பூர்வ விளக்கங்களைப் படிக்கவும்: CSSWG GitHub-இல் முன்மொழிவுகளை நடத்துகிறது. "CSS Scope" மற்றும் தொடர்புடைய இணைப்பு/இறக்குமதி அம்சங்கள் பற்றிய விளக்கங்களைத் தேடுங்கள்.
• பிரவுசர் விற்பனையாளர்களைப் பின்தொடரவும்: Chrome Platform Status, Firefox's standards positions, மற்றும் WebKit's feature status pages போன்ற தளங்களில் ஒரு கண் வைத்திருங்கள்.
• ஆரம்பகால செயலாக்கங்களுடன் பரிசோதனை செய்யுங்கள்: இந்த அம்சங்கள் Chrome Canary அல்லது Firefox Nightly போன்ற பிரவுசர்களில் சோதனை கொடிகளின் பின்னால் வந்தவுடன், அவற்றை முயற்சி செய்து கருத்துக்களை வழங்கவும்.

முடிவுரை: CSS-க்கு ஒரு புதிய அத்தியாயம்

முன்மொழியப்பட்ட CSS பேக்கேஜ் அமைப்பு வெறும் புதிய அட்-ரூல்களின் தொகுப்பு மட்டுமல்ல; இது நவீன, காம்போனென்ட்-இயக்கப்படும் வலைக்கான CSS-இன் ஒரு அடிப்படை மறுவடிவமைப்பு. இது பல ஆண்டுகால சமூக-இயக்கப்படும் தீர்வுகளிலிருந்து பெறப்பட்ட கடினமான பாடங்களை எடுத்து அவற்றை நேரடியாக பிரவுசரில் ஒருங்கிணைக்கிறது, CSS இயற்கையாகவே ஸ்கோப் செய்யப்பட்டு, சார்புநிலைகள் வெளிப்படையாக நிர்வகிக்கப்பட்டு, மற்றும் தீமிங் ஒரு சுத்தமான, தரப்படுத்தப்பட்ட செயல்முறையாக இருக்கும் ஒரு எதிர்காலத்தை வழங்குகிறது.

என்கேப்சுலேஷனுக்கான நேட்டிவ் கருவிகளை வழங்குவதன் மூலமும் தெளிவான பொது API-களை உருவாக்குவதன் மூலமும், இந்த பரிணாம வளர்ச்சி நமது ஸ்டைல்ஷீட்களை மேலும் வலுவானதாகவும், நமது வடிவமைப்பு அமைப்புகளை மேலும் அளவிடக்கூடியதாகவும், மற்றும் டெவலப்பர்களாகிய நமது வாழ்க்கையை கணிசமாக எளிதாக்கவும் உறுதியளிக்கிறது. முன்மொழிவிலிருந்து உலகளாவிய பிரவுசர் ஆதரவுக்கான பாதை நீண்டது, ஆனால் இலக்கு என்பது நாளைய வலையின் சவால்களுக்காக உண்மையிலேயே கட்டமைக்கப்பட்ட ஒரு சக்திவாய்ந்த, கணிக்கக்கூடிய, மற்றும் நேர்த்தியான CSS ஆகும்.