டெயில்விண்டின் ஆற்றலைத் திறத்தல்: சிக்கலான பயன்பாட்டுக் கலவைகளுக்கான மாடிஃபையர்களை அடுக்கும் கலை

டெயில்விண்ட் CSS, இணையத்திற்கான ஸ்டைலிங்கை பல டெவலப்பர்கள் அணுகும் முறையை அடியோடு மாற்றியுள்ளது. அதன் யூட்டிலிட்டி-ஃபர்ஸ்ட் தத்துவம், உங்கள் HTML-ஐ விட்டு வெளியேறாமலேயே விரைவான புரோட்டோடைப்பிங் மற்றும் தனிப்பயன் வடிவமைப்புகளை உருவாக்க அனுமதிக்கிறது. p-4 அல்லது text-blue-500 போன்ற ஒற்றை யூட்டிலிட்டிகளைப் பயன்படுத்துவது நேரடியானது என்றாலும், டெயில்விண்டின் உண்மையான ஆற்றல், நீங்கள் சிக்கலான, ஸ்டேட்ஃபுல் மற்றும் ரெஸ்பான்சிவ் பயனர் இடைமுகங்களை உருவாக்கத் தொடங்கும் போது திறக்கப்படுகிறது. இதன் ரகசியம் ஒரு சக்திவாய்ந்த, ஆனால் எளிமையான கருத்தில் உள்ளது: மாடிஃபையர் ஸ்டாக்கிங்.

பல டெவலப்பர்கள் hover:bg-blue-500 அல்லது md:grid-cols-3 போன்ற ஒற்றை மாடிஃபையர்களுடன் வசதியாக உள்ளனர். ஆனால் ஒரு பெரிய திரையில், ஹோவர் செய்யும் போது, மற்றும் டார்க் மோட் இயக்கப்பட்டிருக்கும் போது ஒரு ஸ்டைலைப் பயன்படுத்த வேண்டியிருந்தால் என்ன செய்வது? இங்குதான் மாடிஃபையர் ஸ்டாக்கிங் வருகிறது. இது பல நிபந்தனைகளின் கலவைக்கு பதிலளிக்கும் மிகக் குறிப்பிட்ட ஸ்டைலிங் விதிகளை உருவாக்க, பல மாடிஃபையர்களை ஒன்றாக இணைக்கும் ஒரு நுட்பமாகும்.

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

அடித்தளம்: ஒற்றை மாடிஃபையர்களைப் புரிந்துகொள்ளுதல்

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

மாடிஃபையர்களை பரவலாக வகைப்படுத்தலாம்:

• ஸ்டேட் மாடிஃபையர்கள்: இவை பயனர் தொடர்பு போன்ற உறுப்பின் தற்போதைய நிலையின் அடிப்படையில் ஸ்டைல்களைப் பயன்படுத்துகின்றன. பொதுவான எடுத்துக்காட்டுகளில் hover:, focus:, active:, disabled:, மற்றும் visited: ஆகியவை அடங்கும்.
• ரெஸ்பான்சிவ் பிரேக்பாயிண்ட் மாடிஃபையர்கள்: இவை ஒரு குறிப்பிட்ட திரை அளவு மற்றும் அதற்கு மேல், மொபைல்-ஃபர்ஸ்ட் அணுகுமுறையைப் பின்பற்றி ஸ்டைல்களைப் பயன்படுத்துகின்றன. இயல்புநிலைகள் sm:, md:, lg:, xl:, மற்றும் 2xl: ஆகும்.
• சிஸ்டம் பிரெஃபரன்ஸ் மாடிஃபையர்கள்: இவை பயனரின் ஆப்பரேட்டிங் சிஸ்டம் அல்லது பிரவுசர் அமைப்புகளுக்கு பதிலளிக்கின்றன. டார்க் மோடுக்கான dark: மிகவும் முக்கியமானது, ஆனால் motion-reduce: மற்றும் print: போன்றவையும் நம்பமுடியாத அளவிற்கு பயனுள்ளதாக இருக்கும்.
• சூடோ-கிளாஸ் & சூடோ-எலிமெண்ட் மாடிஃபையர்கள்: இவை ஒரு உறுப்பின் குறிப்பிட்ட கட்டமைப்பு பண்புகள் அல்லது பகுதிகளை குறிவைக்கின்றன, அதாவது first:, last:, odd:, even:, before:, after:, மற்றும் placeholder:.

உதாரணமாக, ஒரு எளிய பட்டன் இது போன்ற ஒரு ஸ்டேட் மாடிஃபையரைப் பயன்படுத்தலாம்:

<button class="bg-sky-500 hover:bg-sky-600 ...">Click me</button>

இங்கே, hover:bg-sky-600 பயனரின் கர்சர் பட்டன் மீது இருக்கும்போது மட்டும் ஒரு இருண்ட பின்னணி நிறத்தைப் பயன்படுத்துகிறது. இதுவே நாம் கட்டமைக்கப் போகும் அடிப்படைக் கருத்து.

அடுக்குதலின் மாயம்: டைனமிக் UI-களுக்காக மாடிஃபையர்களை இணைத்தல்

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

Syntax: modifier1:modifier2:utility-class

வரிசை முக்கியமானது. டெயில்விண்ட் மாடிஃபையர்களை இடமிருந்து வலமாகப் பயன்படுத்துகிறது. உதாரணமாக, md:hover:text-red-500 என்ற கிளாஸ் தோராயமாக பின்வரும் CSS-ஆக மொழிபெயர்க்கப்படுகிறது:

@media (min-width: 768px) {
.md\:hover\:text-red-500:hover {
color: red;
}
}

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

உதாரணம் 1: பிரேக்பாயிண்ட்கள் மற்றும் ஸ்டேட்களை இணைத்தல்

டச் சாதனங்கள் மற்றும் கர்சர் அடிப்படையிலான சாதனங்களில் ஊடாடும் கூறுகள் வித்தியாசமாக செயல்பட வேண்டும் என்பது ஒரு பொதுவான தேவையாகும். வெவ்வேறு பிரேக்பாயிண்ட்களில் ஹோவர் விளைவுகளை மாற்றுவதன் மூலம் இதை நாம் தோராயமாகச் செய்யலாம்.

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

<div class="... transition-transform duration-300 md:hover:scale-105 md:hover:-translate-y-1">...</div>

பகுப்பாய்வு:

• transition-transform duration-300: இது எந்தவொரு டிரான்ஸ்ஃபார்ம் மாற்றங்களுக்கும் ஒரு மென்மையான மாற்றத்தை அமைக்கிறது.
• md:hover:scale-105: நடுத்தர பிரேக்பாயிண்டில் (768px) மற்றும் அதற்கு மேல், கார்டு ஹோவர் செய்யப்படும்போது, அதை 5% பெரிதாக்கவும்.
• md:hover:-translate-y-1: நடுத்தர பிரேக்பாயிண்டில் மற்றும் அதற்கு மேல், கார்டு ஹோவர் செய்யப்படும்போது, அதைச் சற்று மேலே நகர்த்தவும்.

768px-ஐ விட சிறிய திரைகளில், md: மாடிஃபையர் ஹோவர் விளைவுகள் பயன்படுத்தப்படுவதைத் தடுக்கிறது, இது மொபைல் பயனர்களுக்கு ஒரு சிறந்த அனுபவத்தை வழங்குகிறது.

உதாரணம் 2: டார்க் மோடை ஊடாடும் தன்மையுடன் அடுக்குதல்

டார்க் மோட் என்பது இனி ஒரு முக்கிய அம்சம் அல்ல; அது ஒரு பயனர் எதிர்பார்ப்பு. ஸ்டாக்கிங் ஒவ்வொரு வண்ணத் திட்டத்திற்கும் குறிப்பிட்ட ஊடாடும் ஸ்டைல்களை வரையறுக்க உங்களை அனுமதிக்கிறது.

லைட் மற்றும் டார்க் மோட்களில் இயல்புநிலை மற்றும் ஹோவர் நிலைகளுக்கு வெவ்வேறு வண்ணங்களைக் கொண்ட ஒரு இணைப்பை ஸ்டைல் செய்வோம்.

<a href="#" class="text-blue-600 underline hover:text-blue-800 dark:text-cyan-400 dark:hover:text-cyan-200">Read more</a>

பகுப்பாய்வு:

• text-blue-600 hover:text-blue-800: லைட் மோடில் (இயல்புநிலை), உரை நீல நிறத்தில் உள்ளது மற்றும் ஹோவர் செய்யும்போது அடர் நிறமாகிறது.
• dark:text-cyan-400: டார்க் மோட் செயலில் இருக்கும்போது, இயல்புநிலை உரை நிறம் வெளிர் சயானுக்கு மாறுகிறது.
• dark:hover:text-cyan-200: டார்க் மோட் செயலில் இருக்கும்போது மற்றும் இணைப்பு ஹோவர் செய்யப்படும்போது, உரை இன்னும் வெளிர் சயானாக மாறுகிறது.

இது ஒரே வரியில் ஒரு உறுப்பிற்கான தீம்-அவேர் ஸ்டைல்களின் முழுமையான தொகுப்பை நீங்கள் எவ்வாறு உருவாக்கலாம் என்பதைக் காட்டுகிறது.

உதாரணம் 3: மூன்றும் இணையும் மாயம் - ரெஸ்பான்சிவ், டார்க் மோட் மற்றும் ஸ்டேட் மாடிஃபையர்களை அடுக்குதல்

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

<input type="text" class="border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 md:dark:focus:ring-yellow-400" />

இங்கே மிகவும் சிக்கலான கிளாஸில் கவனம் செலுத்துவோம்: md:dark:focus:ring-yellow-400.

பகுப்பாய்வு:

1. md:: இந்த விதி நடுத்தர பிரேக்பாயிண்டில் (768px) மற்றும் அகலமான திரைகளில் மட்டுமே பொருந்தும்.
2. dark:: அந்த பிரேக்பாயிண்டிற்குள், பயனர் டார்க் மோடை இயக்கியிருந்தால் மட்டுமே இது பொருந்தும்.
3. focus:: அந்த பிரேக்பாயிண்ட் மற்றும் கலர் மோடிற்குள், உள்ளீட்டு உறுப்பு ஃபோகஸில் இருக்கும்போது மட்டுமே இது பொருந்தும்.
4. ring-yellow-400: மூன்று நிபந்தனைகளும் பூர்த்தி செய்யப்படும்போது, ஒரு மஞ்சள் ஃபோகஸ் ரிங்கைப் பயன்படுத்தவும்.

இந்த ஒற்றை யூட்டிலிட்டி கிளாஸ் நமக்கு நம்பமுடியாத அளவிற்கு ஒரு குறிப்பிட்ட நடத்தையை அளிக்கிறது: "பெரிய திரைகளில், டார்க் மோடில், இந்த ஃபோகஸ் செய்யப்பட்ட உள்ளீட்டை ஒரு மஞ்சள் ரிங் மூலம் முன்னிலைப்படுத்தவும்." இதற்கிடையில், எளிமையான focus:ring-blue-500 மற்ற எல்லா சூழ்நிலைகளுக்கும் (மொபைல் லைட்/டார்க் மோட், மற்றும் டெஸ்க்டாப் லைட் மோட்) இயல்புநிலை ஃபோகஸ் ஸ்டைலாக செயல்படுகிறது.

அடிப்படைகளுக்கு அப்பால்: `group` மற்றும் `peer` உடன் மேம்பட்ட ஸ்டாக்கிங்

கூறுகளுக்கு இடையில் உறவுகளை உருவாக்கும் மாடிஃபையர்களை நீங்கள் அறிமுகப்படுத்தும்போது ஸ்டாக்கிங் இன்னும் சக்திவாய்ந்ததாகிறது. group மற்றும் peer மாடிஃபையர்கள் ஒரு பேரண்ட் அல்லது ஒரு சிப்ளிங்கின் நிலையின் அடிப்படையில் ஒரு உறுப்பை ஸ்டைல் செய்ய உங்களை அனுமதிக்கின்றன.

`group-*` உடன் ஒருங்கிணைந்த விளைவுகள்

`group` மாடிஃபையர், ஒரு பேரண்ட் உறுப்புடனான ஒரு ஊடாடல் அதன் ஒன்று அல்லது அதற்கு மேற்பட்ட சைல்டுகளை பாதிக்க வேண்டியிருக்கும் போது சரியானதாகும். ஒரு பேரண்ட்டில் group கிளாஸைச் சேர்ப்பதன் மூலம், நீங்கள் எந்த சைல்டு உறுப்பிலும் group-hover:, group-focus: போன்றவற்றைப் பயன்படுத்தலாம்.

ஒரு கார்டை உருவாக்குவோம், அதில் கார்டின் எந்தப் பகுதியிலும் ஹோவர் செய்தால் அதன் தலைப்பு நிறம் மாறும் மற்றும் ஒரு அம்புக்குறி ஐகான் நகரும். இது டார்க் மோடிற்கு ஏற்றதாகவும் இருக்க வேண்டும்.

<a href="#" class="group block p-6 bg-white dark:bg-slate-800 rounded-lg shadow-md"> <h3 class="text-slate-900 group-hover:text-blue-600 dark:text-white dark:group-hover:text-blue-400">Card Title</h3> <p class="text-slate-500 dark:text-slate-400">Card content goes here.</p> <span class="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">→</span> </a>

அடுக்கப்பட்ட மாடிஃபையர் பகுப்பாய்வு:

• `h3`-இல் dark:group-hover:text-blue-400: டார்க் மோட் செயலில் இருக்கும்போது மற்றும் பேரண்ட் `group` ஹோவர் செய்யப்படும்போது, தலைப்பின் உரை நிறத்தை மாற்றவும். இது இயல்புநிலை டார்க் மோட் நிறத்தை மீறுகிறது ஆனால் லைட் மோட் ஹோவர் ஸ்டைலைப் பாதிக்காது.
• `span`-இல் group-hover:translate-x-1: பேரண்ட் `group` ஹோவர் செய்யப்படும்போது (எந்த மோடிலும்), அம்புக்குறி ஐகானை வலதுபுறம் நகர்த்தவும்.

`peer-*` உடன் டைனமிக் சிப்ளிங் ஊடாடல்கள்

`peer` மாடிஃபையர் சிப்ளிங் கூறுகளை ஸ்டைல் செய்வதற்காக வடிவமைக்கப்பட்டுள்ளது. நீங்கள் ஒரு உறுப்பை peer கிளாஸுடன் குறிக்கும்போது, அதன் பின்வரும் சிப்ளிங்கில் peer-focus:, peer-invalid:, அல்லது peer-checked: போன்ற மாடிஃபையர்களைப் பயன்படுத்தி பியரின் நிலையின் அடிப்படையில் அதை ஸ்டைல் செய்யலாம்.

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

<div> <label for="email" class="text-sm font-medium text-gray-700 dark:text-gray-300 peer-focus:text-violet-600 dark:peer-focus:text-violet-400">Email</label> <input type="email" id="email" class="peer mt-1 block w-full border-gray-300 invalid:border-red-500 focus:border-violet-500 ..." required /> <p class="mt-2 invisible text-sm text-red-600 peer-invalid:visible">Please provide a valid email address.</p> </div>

அடுக்கப்பட்ட மாடிஃபையர் பகுப்பாய்வு:

• `label`-இல் dark:peer-focus:text-violet-400: டார்க் மோட் செயலில் இருக்கும்போது மற்றும் சிப்ளிங் `peer` இன்புட் ஃபோகஸ் செய்யப்படும்போது, லேபிளின் நிறத்தை வயலட்டாக மாற்றவும். இது லைட் மோடுக்கான நிலையான peer-focus:text-violet-600 உடன் இணைந்து செயல்படுகிறது.
• பிழை `p`-இல் peer-invalid:visible: சிப்ளிங் `peer` இன்புட் `invalid` நிலையில் இருக்கும்போது (எ.கா., ஒரு காலி தேவைப்படும் புலம்), அதன் விசிபிலிட்டியை `invisible`-இலிருந்து `visible`-ஆக மாற்றவும். இது எந்த ஜாவாஸ்கிரிப்டும் இல்லாமல் ஃபார்ம் வேலிடேஷன் ஸ்டைலிங்கிற்கு ஒரு சிறந்த எடுத்துக்காட்டு.

இறுதி எல்லை: தன்னிச்சையான வேரியண்ட்களுடன் ஸ்டாக்கிங்

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

தொடரியல் சதுர அடைப்புக்குறிகளைப் பயன்படுத்துகிறது: `[&_selector]:utility`.

உதாரணம் 1: ஹோவர் செய்யும் போது குறிப்பிட்ட சைல்டுகளைக் குறிவைத்தல்

உங்களிடம் ஒரு கண்டெய்னர் இருப்பதாக கற்பனை செய்து பாருங்கள், அது ஹோவர் செய்யப்படும்போது அதிலுள்ள அனைத்து `` டேக்குகளும் பச்சை நிறமாக மாற வேண்டும், ஆனால் பெரிய திரைகளில் மட்டும்.

<div class="p-4 border lg:hover:[&_strong]:text-green-500">

This is a paragraph with important text that will change color.

This is another paragraph with another bolded part.

</div>

பகுப்பாய்வு:

lg:hover:[&_strong]:text-green-500 என்ற கிளாஸ் ஒரு ரெஸ்பான்சிவ் மாடிஃபையர் (lg:), ஒரு ஸ்டேட் மாடிஃபையர் (hover:), மற்றும் ஒரு தன்னிச்சையான வேரியண்ட் ([&_strong]:) ஆகியவற்றை இணைத்து ஒரு மிகக் குறிப்பிட்ட விதியை உருவாக்குகிறது: "பெரிய திரைகள் மற்றும் அதற்கு மேல், இந்த div ஹோவர் செய்யப்படும்போது, அனைத்து வம்சாவளி `` உறுப்புகளையும் கண்டுபிடித்து அவற்றின் உரையை பச்சையாக மாற்றவும்."

உதாரணம் 2: ஆட்ரிபியூட் செலக்டர்களுடன் ஸ்டாக்கிங்

இந்த நுட்பம் ஜாவாஸ்கிரிப்ட் பிரேம்வொர்க்குகளுடன் ஒருங்கிணைக்க நம்பமுடியாத அளவிற்கு பயனுள்ளதாக இருக்கும், அங்கு நீங்கள் நிலையை நிர்வகிக்க `data-*` ஆட்ரிபியூட்களைப் பயன்படுத்தலாம் (எ.கா., அக்கார்டியன்கள், டேப்கள், அல்லது டிராப்டவுன்கள்).

ஒரு அக்கார்டியன் ஐட்டத்தின் உள்ளடக்கப் பகுதியை ஸ்டைல் செய்வோம், அது இயல்பாக மறைக்கப்பட்டிருக்கும் ஆனால் அதன் பேரண்ட்டில் `data-state="open"` இருக்கும்போது தெரியும். மேலும், டார்க் மோடில் அது திறந்திருக்கும்போது வேறுபட்ட பின்னணி நிறம் வேண்டும்.

<div data-state="closed" class="border rounded"> <h3>... Accordion Trigger ...</h3> <div class="overflow-hidden h-0 [data-state=open]:h-auto dark:[data-state=open]:bg-gray-800"> Accordion Content... </div> </div>

உங்கள் ஜாவாஸ்கிரிப்ட் பேரண்ட்டில் உள்ள `data-state` ஆட்ரிபியூட்டை `open` மற்றும் `closed` இடையே மாற்றும்.

அடுக்கப்பட்ட மாடிஃபையர் பகுப்பாய்வு:

உள்ளடக்க `div`-இல் உள்ள dark:[data-state=open]:bg-gray-800 என்ற கிளாஸ் ஒரு சரியான உதாரணம். அது கூறுகிறது: "டார்க் மோட் செயலில் இருக்கும்போது மற்றும் உறுப்பு `data-state="open"` என்ற ஆட்ரிபியூட்டைக் கொண்டிருக்கும்போது, ஒரு அடர் சாம்பல் பின்னணியைப் பயன்படுத்தவும்." இது அனைத்து மோட்களிலும் அதன் விசிபிலிட்டியை கட்டுப்படுத்தும் அடிப்படை `[data-state=open]:h-auto` விதியுடன் அடுக்கப்பட்டுள்ளது.

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

மாடிஃபையர் ஸ்டாக்கிங் சக்திவாய்ந்ததாக இருந்தாலும், ஒரு சுத்தமான மற்றும் நிர்வகிக்கக்கூடிய கோட்பேஸைப் பராமரிக்க அதை புத்திசாலித்தனமாகப் பயன்படுத்துவது அவசியம்.

• படிக்க எளிதாக வைத்திருங்கள்: நீண்ட யூட்டிலிட்டி கிளாஸ்களைப் படிப்பது கடினமாக இருக்கலாம். அதிகாரப்பூர்வ டெயில்விண்ட் CSS பிரெட்டியர் பிளக்கின் போன்ற ஒரு தானியங்கி கிளாஸ் வரிசைப்படுத்தியைப் பயன்படுத்துவது மிகவும் பரிந்துரைக்கப்படுகிறது. இது கிளாஸ்களின் வரிசையை தரப்படுத்துகிறது, சிக்கலான கலவைகளை ஸ்கேன் செய்வதை மிகவும் எளிதாக்குகிறது.
• கூறு சுருக்கம்: நீங்கள் பல உறுப்புகளில் ஒரே சிக்கலான மாடிஃபையர் அடுக்கை மீண்டும் மீண்டும் பயன்படுத்துவதைக் கண்டால், அந்த பேட்டர்னை மீண்டும் பயன்படுத்தக்கூடிய ஒரு கூறாக (எ.கா., ஒரு ரியாக்ட் அல்லது வ்யூ கூறு, லாராவெல்லில் ஒரு பிளேடு கூறு, அல்லது ஒரு எளிய பார்ஷியல்) சுருக்குவதற்கான ஒரு வலுவான அறிகுறியாகும்.
• JIT இன்ஜினைத் தழுவுங்கள்: கடந்த காலத்தில், பல வேரியண்ட்களை இயக்குவது பெரிய CSS கோப்பு அளவுகளுக்கு வழிவகுக்கும். டெயில்விண்டின் ஜஸ்ட்-இன்-டைம் (JIT) இன்ஜின் மூலம், இது ஒரு பிரச்சனை அல்ல. JIT இன்ஜின் உங்கள் கோப்புகளை ஸ்கேன் செய்து, உங்களுக்குத் தேவையான சரியான CSS-ஐ மட்டுமே உருவாக்குகிறது, இதில் அடுக்கப்பட்ட மாடிஃபையர்களின் ஒவ்வொரு சிக்கலான கலவையும் அடங்கும். உங்கள் இறுதி பில்டில் செயல்திறன் தாக்கம் மிகக் குறைவு, எனவே நீங்கள் நம்பிக்கையுடன் அடுக்கலாம்.
• குறிப்பிட்ட தன்மை மற்றும் வரிசையைப் புரிந்து கொள்ளுங்கள்: உங்கள் HTML-இல் உள்ள கிளாஸ்களின் வரிசை பொதுவாக பாரம்பரிய CSS-இல் உள்ளதைப் போல குறிப்பிட்ட தன்மையைப் பாதிக்காது. இருப்பினும், ஒரே பிரேக்பாயிண்ட் மற்றும் ஸ்டேட்டில் உள்ள இரண்டு யூட்டிலிட்டிகள் ஒரே பண்பைக் கட்டுப்படுத்த முயற்சிக்கும்போது (எ.கா., `md:text-left md:text-right`), சரத்தில் கடைசியாகத் தோன்றும் ஒன்று வெற்றி பெறுகிறது. பிரெட்டியர் பிளக்கின் இந்த தர்க்கத்தை உங்களுக்காகக் கையாளுகிறது.

முடிவுரை: நீங்கள் கற்பனை செய்யக்கூடிய எதையும் உருவாக்குங்கள்

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

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