CSS @apply: மிக்சின் பயன்பாடு மற்றும் ஸ்டைல் உருவாக்கத்தின் ஆற்றலை வெளிக்கொணர்தல்

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

CSS @apply என்றால் என்ன?

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

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

அடிப்படை தொடரியல் மற்றும் பயன்பாடு

@apply-ஐப் பயன்படுத்துவதற்கான தொடரியல் நேரடியானது:

            .element {
  @apply .mixin-name;
}

            

              
                Copy
              
            
          

இங்கே, .mixin-name என்பது நீங்கள் .element సెలெக்டருக்குப் பயன்படுத்த விரும்பும் ஸ்டைல்களைக் கொண்ட ஒரு CSS கிளாஸ் ஆகும். உலாவி @apply விதியை எதிர்கொள்ளும்போது, அது @apply அறிவிப்பை .mixin-name கிளாஸில் வரையறுக்கப்பட்ட CSS விதிகளுடன் திறம்பட மாற்றுகிறது.

எடுத்துக்காட்டு: மீண்டும் பயன்படுத்தக்கூடிய பட்டன் ஸ்டைலை உருவாக்குதல்

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

            .button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.primary-button {
  @apply .button;
  background-color: #007bff;
}

.secondary-button {
  @apply .button;
  background-color: #6c757d;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், .primary-button மற்றும் .secondary-button ஆகிய இரண்டும் .button கிளாஸில் வரையறுக்கப்பட்ட அடிப்படை ஸ்டைல்களைப் பெறுகின்றன. பின்னர் அவை தனித்துவமான காட்சி வேறுபாடுகளை உருவாக்க background-color பண்பை மேலெழுதுகின்றன.

@apply பயன்படுத்துவதன் நன்மைகள்

• குறியீடு மறுபயன்பாடு: பல సెలெக்டர்களில் CSS விதிகளை நகலெடுப்பதைத் தவிர்க்கவும். ஸ்டைல்களை ஒருமுறை வரையறுத்து, உங்கள் ப்ராஜெக்ட் முழுவதும் மீண்டும் பயன்படுத்தவும்.
• பராமரிப்புத்திறன்: ஒரு மிக்சினில் செய்யப்படும் மாற்றங்கள், அதைப் பயன்படுத்தும் அனைத்து கூறுகளிலும் தானாகவே பிரதிபலிக்கும். இது பராமரிப்பை எளிதாக்குகிறது மற்றும் நிலைத்தன்மையை உறுதி செய்கிறது.
• மேம்பட்ட வாசிப்புத்திறன்: @apply சிக்கலான ஸ்டைல் அறிவிப்புகளை சுருக்கமாகக் காண்பிப்பதன் மூலம் உங்கள் CSS-ஐ மேலும் படிக்க எளிதாக்கும்.
• நிலைத்தன்மை: உங்கள் வலைத்தளம் அல்லது பயன்பாடு முழுவதும் ஒரு சீரான காட்சி மொழியைச் செயல்படுத்துகிறது.
• பிரேம்வொர்க் ஒருங்கிணைப்பு: Tailwind CSS போன்ற CSS பிரேம்வொர்க்குகளுடன் தடையின்றி ஒருங்கிணைந்து, அவற்றின் முன்வரையறுக்கப்பட்ட யூட்டிலிட்டி கிளாஸ்களைப் பயன்படுத்த உங்களை அனுமதிக்கிறது.

@apply-க்கான பயன்பாட்டு நேர்வுகள்

@apply பின்வரும் சூழ்நிலைகளில் குறிப்பாக பயனுள்ளதாக இருக்கும்:

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

எடுத்துக்காட்டு: ஒரு தீமிங் அமைப்பைச் செயல்படுத்துதல்

அடிப்படை ஸ்டைல்களை வரையறுத்து, பின்னர் செயலில் உள்ள தீமின் அடிப்படையில் அவற்றை மேலெழுதுவதன் மூலம் ஒரு எளிய தீமிங் அமைப்பை உருவாக்க @apply-ஐப் பயன்படுத்தலாம்.

            /* Base styles */
.card {
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Light theme */
.light-theme .card {
  @apply .card;
  background-color: white;
  color: black;
}

/* Dark theme */
.dark-theme .card {
  @apply .card;
  background-color: #333;
  color: white;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், .card கிளாஸ் ஒரு கார்டு கூறுக்கான அடிப்படை ஸ்டைல்களை வரையறுக்கிறது. .light-theme மற்றும் .dark-theme கிளாஸ்கள் பின்னர் அடிப்படை ஸ்டைல்களைப் பயன்படுத்துகின்றன மற்றும் வெவ்வேறு காட்சி தீம்களை உருவாக்க background-color மற்றும் color பண்புகளை மேலெழுதுகின்றன.

சாத்தியமான குறைபாடுகள் மற்றும் கருத்தில் கொள்ள வேண்டியவை

@apply பல நன்மைகளை வழங்கினாலும், அதன் சாத்தியமான குறைபாடுகளை அறிந்து, அதை விவேகத்துடன் பயன்படுத்துவது அவசியம்:

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

@apply-க்கு மாற்றுகள்

@apply ஒரு சக்திவாய்ந்த கருவியாக இருந்தாலும், அது எப்போதும் சிறந்த தீர்வு அல்ல. கருத்தில் கொள்ள வேண்டிய சில மாற்று அணுகுமுறைகள் இங்கே:

• CSS முன்செயலிகள் (Sass, Less, Stylus): CSS முன்செயலிகள் மாறிகள், மிக்சின்கள் மற்றும் செயல்பாடுகள் போன்ற அம்சங்களை வழங்குகின்றன, அவை @apply-க்கு ஒத்த செயல்பாட்டை வழங்குகின்றன, ஆனால் சிறந்த உலாவி இணக்கத்தன்மை மற்றும் பிழைத்திருத்தக் கருவிகளுடன் இருக்கலாம். Sass மிக்சின்கள் பரவலாகப் பயன்படுத்தப்படும் மற்றும் நன்கு புரிந்துகொள்ளப்பட்ட மாற்றாகும்.
• CSS தனிப்பயன் பண்புகள் (மாறிகள்): CSS தனிப்பயன் பண்புகள், உங்கள் ஸ்டைல்ஷீட் முழுவதும் பயன்படுத்தக்கூடிய மீண்டும் பயன்படுத்தக்கூடிய மதிப்புகளை வரையறுக்க உங்களை அனுமதிக்கின்றன. அவை வண்ணங்கள், எழுத்துருக்கள் மற்றும் பிற வடிவமைப்பு டோக்கன்களை நிர்வகிக்க சிறந்தவை.
• கூறு-அடிப்படையிலான CSS (BEM, OOCSS): இந்த வழிமுறைகள் மாடுலர் மற்றும் மீண்டும் பயன்படுத்தக்கூடிய CSS கூறுகளை ஊக்குவிக்கின்றன, இது @apply-ஐ நம்பாமல் குறியீடு நகலெடுப்பைத் தவிர்க்க உதவும்.
• CSS தொகுதிகள்: CSS தொகுதிகள் CSS விதிகளை தனிப்பட்ட கூறுகளுக்கு உள்ளூரில் வரம்பிற்குட்படுத்துகின்றன, பெயர் முரண்பாடுகளைத் தடுக்கின்றன மற்றும் பராமரிப்புத்திறனை மேம்படுத்துகின்றன.
• யூட்டிலிட்டி-ஃபர்ஸ்ட் CSS (Tailwind CSS): @apply பொதுவாக Tailwind CSS உடன் பயன்படுத்தப்பட்டாலும், நீங்கள் யூட்டிலிட்டி கிளாஸ்களை உங்கள் HTML-இல் நேரடியாகப் பயன்படுத்தலாம், இது தனிப்பயன் CSS-இன் தேவையைக் குறைக்கிறது. இந்த அணுகுமுறை உங்கள் HTML-இல் அதிக சொற்களைக் கொண்டது, ஆனால் விரைவான முன்மாதிரி மற்றும் நிலையான ஸ்டைலிங்கிற்கு நன்மை பயக்கும்.

@apply மற்றும் Sass மிக்சின்களின் ஒப்பீடு

@apply மற்றும் Sass மிக்சின்கள் இரண்டும் குறியீடு மறுபயன்பாட்டிற்கான வழிமுறைகளை வழங்குகின்றன. இங்கே ஒரு ஒப்பீடு:

Sass மிக்சின்களைப் பயன்படுத்தி எடுத்துக்காட்டு:

            @mixin button-styles {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.primary-button {
  @include button-styles;
  background-color: #007bff;
}

.secondary-button {
  @include button-styles;
  background-color: #6c757d;
}

            

              
                Copy
              
            
          

@apply-ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

@apply-இன் நன்மைகளை அதிகரிக்கவும், சாத்தியமான சிக்கல்களைத் தவிர்க்கவும், இந்த சிறந்த நடைமுறைகளைப் பின்பற்றவும்:

• அளவோடு பயன்படுத்தவும்: @apply-ஐ அதிகமாகப் பயன்படுத்த வேண்டாம். எளிமையான நேர்வுகளுக்கு CSS மாறிகள் அல்லது கூறு-அடிப்படையிலான CSS போன்ற மாற்று அணுகுமுறைகளைக் கருத்தில் கொள்ளுங்கள்.
• மிக்சின்களைக் கவனம் செலுத்தி வைக்கவும்: ஒவ்வொரு மிக்சினும் ஒரு தர்க்கரீதியான ஸ்டைலிங் அலகைக் குறிக்க வேண்டும். புரிந்துகொள்வதற்கும் பராமரிப்பதற்கும் கடினமான மிகவும் சிக்கலான மிக்சின்களை உருவாக்குவதைத் தவிர்க்கவும்.
• உங்கள் மிக்சின்களை ஆவணப்படுத்தவும்: ஒவ்வொரு மிக்சினும் என்ன செய்கிறது மற்றும் அதை எவ்வாறு பயன்படுத்த வேண்டும் என்பதைத் தெளிவாக ஆவணப்படுத்தவும். இது மற்ற டெவலப்பர்கள் உங்கள் குறியீட்டைப் புரிந்துகொள்வதற்கும் பராமரிப்பதற்கும் எளிதாக்கும்.
• குறிப்பிட்ட தன்மையைக் கவனத்தில் கொள்ளுங்கள்: @apply-ஐப் பயன்படுத்தும்போது குறிப்பிட்ட தன்மைக்கு அதிக கவனம் செலுத்துங்கள். சாத்தியமான முரண்பாடுகளைக் கண்டறிந்து தீர்க்க CSS குறிப்பிட்ட தன்மை கருவிகளைப் பயன்படுத்தவும்.
• முழுமையாகச் சோதிக்கவும்: @apply மூலம் பயன்படுத்தப்படும் ஸ்டைல்கள் எதிர்பார்த்தபடி செயல்படுகின்றன என்பதை உறுதிப்படுத்த உங்கள் CSS-ஐ முழுமையாகச் சோதிக்கவும்.
• பொருள் சார்ந்த கிளாஸ் பெயர்களுக்கு முன்னுரிமை அளியுங்கள்: யூட்டிலிட்டி-ஃபர்ஸ்ட் CSS உடன் @apply-ஐப் பயன்படுத்தும்போது, உறுப்பின் நோக்கத்தைத் தெளிவாக விவரிக்கும் பொருள் சார்ந்த கிளாஸ் பெயர்களை உருவாக்க முயற்சி செய்யுங்கள். எடுத்துக்காட்டாக, .p-4 .bg-blue-500 .text-white என்பதற்குப் பதிலாக, .primary-button-ஐக் கருத்தில் கொள்ளுங்கள்.
• செயல்திறன் தாக்கங்களைக் கருத்தில் கொள்ளுங்கள் (பொருந்தினால்): @apply-இன் அதிகப்படியான பயன்பாட்டால் ஏற்படும் சாத்தியமான இடையூறுகளைக் கண்டறிய உங்கள் வலைத்தளம் அல்லது பயன்பாட்டின் செயல்திறனைக் கண்காணிக்கவும். (நவீன உலாவிகளில் அரிதானது).
• நிலையான பெயரிடல் மரபுகளைப் பராமரிக்கவும்: வாசிப்புத்திறன் மற்றும் பராமரிப்புத்திறனை மேம்படுத்த உங்கள் மிக்சின்களுக்கு ஒரு நிலையான பெயரிடல் மரபைப் பயன்படுத்தவும்.

உலகளாவிய பரிசீலனைகள்

ஒரு உலகளாவிய சூழலில் @apply-ஐப் பயன்படுத்தும்போது, பின்வருவனவற்றைக் கருத்தில் கொள்ளுங்கள்:

• உள்ளூர்மயமாக்கல் (L10n): உங்கள் மிக்சின்கள் வெவ்வேறு மொழிகள் மற்றும் உரை திசைகளுக்கு (எ.கா., இடமிருந்து வலம் எதிராக வலமிருந்து இடம்) இடமளிக்கும் அளவுக்கு நெகிழ்வானவை என்பதை உறுதிப்படுத்தவும். எடுத்துக்காட்டாக, சர்வதேசமயமாக்கலுக்கு பௌதீக பண்புகளுக்கு (margin-left) பதிலாக தர்க்கரீதியான பண்புகளை (margin-inline-start) பயன்படுத்துவது முக்கியம்.
• அணுகல்தன்மை (A11y): @apply மூலம் பயன்படுத்தப்படும் ஸ்டைல்கள் உங்கள் வலைத்தளம் அல்லது பயன்பாட்டின் அணுகல்தன்மையை எதிர்மறையாக பாதிக்கவில்லை என்பதை உறுதிப்படுத்தவும். எடுத்துக்காட்டாக, போதுமான வண்ண மாறுபாடு மற்றும் விசைப்பலகை வழிசெலுத்தலை சரிபார்க்கவும்.
• கலாச்சார உணர்திறன்: உங்கள் UI கூறுகளை வடிவமைக்கும்போது கலாச்சார வேறுபாடுகளை மனதில் கொள்ளுங்கள். சில கலாச்சாரங்களில் புண்படுத்தக்கூடிய வண்ணங்கள் அல்லது படங்களைப் பயன்படுத்துவதைத் தவிர்க்கவும்.
• நேர மண்டலங்கள்: தேதிகள் மற்றும் நேரங்களைக் காட்டும்போது, பயனரின் இருப்பிடத்திற்குப் பொருத்தமான நேர மண்டலத்தைப் பயன்படுத்துகிறீர்கள் என்பதை உறுதிப்படுத்தவும்.
• நாணயங்கள்: விலைகளைக் காட்டும்போது, பயனரின் இருப்பிடத்திற்குப் பொருத்தமான நாணயத்தைப் பயன்படுத்தவும்.

எடுத்துக்காட்டு: L10n ஆதரவிற்காக தர்க்கரீதியான பண்புகளைப் பயன்படுத்துதல்:

            .card {
  padding-inline-start: 20px; /* Instead of padding-left */
  padding-inline-end: 20px;   /* Instead of padding-right */
}

            

              
                Copy
              
            
          

முடிவுரை

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