CSS @export: நவீன வலைத்தள மேம்பாட்டிற்கான ஸ்டைல் மாட்யூல் ஏற்றுமதிகளைப் புரிந்துகொள்ளுதல்

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

CSS ஸ்டைல் மாட்யூல்கள் என்றால் என்ன?

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

பின்வரும் உதாரணத்தைக் கவனியுங்கள்:

            /* button.module.css */
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

            

              
                Copy
              
            
          

            /* JavaScript */
import styles from './button.module.css';

function Button() {
  return Click Me;
}

export default Button;

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், button.module.css கோப்பு .button கிளாஸிற்கான ஒரு ஸ்டைலை வரையறுக்கிறது. ஜாவாஸ்கிரிப்ட் கோப்பில் இறக்குமதி செய்யப்படும்போது, styles.button என்பது button_button__34567 போன்ற ஒரு தனித்துவமான கிளாஸ் பெயராக மாறும். இது ஸ்டைலிங் முரண்பாடுகளைத் தடுக்கிறது மற்றும் உங்கள் பயன்பாடு முழுவதும் பட்டனின் தோற்றம் சீராக இருப்பதை உறுதி செய்கிறது.

@export விதியை அறிமுகப்படுத்துதல்

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

தொடரியல்

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

            @export {
  <exported-name>: <value>;
  <exported-name>: <value>;
  /* ... more exports */
}

            

              
                Copy
              
            
          

• @export: ஏற்றுமதித் தொகுதியைத் தொடங்கும் முக்கியச் சொல்.
• <exported-name>: மதிப்பு ஏற்றுமதி செய்யப்படும் பெயர். இது மற்ற மாட்யூல்களில் மதிப்பை அணுகப் பயன்படுத்தப்படும் அடையாளங்காட்டி.
• <value>: ஏற்றுமதி செய்யப்படும் மதிப்பு. இது ஒரு CSS மாறி, ஒரு கிளாஸ் பெயர் அல்லது மற்ற மதிப்புகளின் அடிப்படையில் ஒரு கணக்கீடாக இருக்கலாம்.

CSS மாறிகளை (தனிப்பயன் பண்புகள்) ஏற்றுமதி செய்தல்

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

உதாரணம்:

            /* theme.module.css */
:root {
  --primary-color: #007bff; /* Blue */
  --secondary-color: #6c757d; /* Grey */
  --font-size-base: 16px;
}

@export {
  primaryColor: var(--primary-color);
  secondaryColor: var(--secondary-color);
  fontSizeBase: var(--font-size-base);
}

            

              
                Copy
              
            
          

            /* component.module.css */
@import theme from './theme.module.css';

.component {
  color: theme.primaryColor;
  font-size: theme.fontSizeBase;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், theme.module.css கோப்பு பல CSS மாறிகளை வரையறுத்து, அவற்றை @export பயன்படுத்தி ஏற்றுமதி செய்கிறது. பின்னர் component.module.css கோப்பு இந்த மாறிகளை இறக்குமதி செய்து .component கிளாஸை ஸ்டைல் செய்ய பயன்படுத்துகிறது. @import theme from './theme.module.css'; என்ற தொடரியல் CSS மாட்யூல்களுக்கு உரியது என்பதையும், theme.variableName பயன்படுத்தி மாறிகள் எவ்வாறு அணுகப்படுகின்றன என்பதையும் கவனியுங்கள்.

விளக்கம்:

• :root சூடோ-கிளாஸ் குளோபல் CSS மாறிகளை வரையறுக்கிறது. இவை தொழில்நுட்ப ரீதியாக உலகளவில் அணுகக்கூடியவையாக இருந்தாலும், அவற்றை ஒரு ஸ்டைல் மாட்யூல் சூழலில் பயன்படுத்தி ஏற்றுமதி செய்வது சிறந்த கட்டுப்பாடு மற்றும் அமைப்பை வழங்குகிறது.
• @export தொகுதி CSS மாறிகளை புதிய பெயர்களில் (primaryColor, secondaryColor, fontSizeBase) வெளிப்படுத்துகிறது. இது உங்கள் காம்பொனென்ட் ஸ்டைல்களில் மேலும் விளக்கமான பெயர்களைப் பயன்படுத்த உங்களை அனுமதிக்கிறது.
• @import கூற்று theme.module.css-லிருந்து ஏற்றுமதி செய்யப்பட்ட மதிப்புகளை component.module.css கோப்பிற்குள் இறக்குமதி செய்கிறது.
• theme.primaryColor தொடரியல் component.module.css கோப்பிற்குள் ஏற்றுமதி செய்யப்பட்ட CSS மாறியை அணுகுகிறது.

கிளாஸ் பெயர்களை ஏற்றுமதி செய்தல்

CSS மாறிகளை ஏற்றுமதி செய்வதை விட இது குறைவாகப் பயன்படுத்தப்பட்டாலும், நீங்கள் @export பயன்படுத்தி முழு கிளாஸ் பெயர்களையும் ஏற்றுமதி செய்யலாம். ஒரு மாட்யூலிலிருந்து ஒரு குறிப்பிட்ட ஸ்டைலை மற்றொன்றில் மீண்டும் பயன்படுத்த விரும்பும்போது இது பயனுள்ளதாக இருக்கும்.

உதாரணம்:

            /* alert.module.css */
.alert {
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.alertSuccess {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

@export {
  alert: alert;
  alertSuccess: alertSuccess;
}

            

              
                Copy
              
            
          

            /* notification.module.css */
@import alertStyles from './alert.module.css';

.notification {
  /* Additional styles for the notification container */
}

.notificationSuccess {
  extend: alertStyles.alertSuccess all;
  /* More Specific Styles Here */
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், alert.module.css கோப்பு ஒரு அடிப்படை எச்சரிக்கை செய்தி மற்றும் ஒரு வெற்றி எச்சரிக்கை செய்திக்கான ஸ்டைல்களை வரையறுக்கிறது. பின்னர் அது இந்த கிளாஸ் பெயர்களை @export பயன்படுத்தி ஏற்றுமதி செய்கிறது. notification.module.css இந்த ஸ்டைல்களை இறக்குமதி செய்கிறது. extend உத்தரவு மூலம், .notificationSuccess-க்கான ஸ்டைல்கள் .alertSuccess-ல் காணப்படும் விதிகளுக்கு ஒத்ததாக இருக்கும் என்று நீங்கள் கூறுகிறீர்கள். இது உங்கள் CSS-ஐ DRYer ஆக்குகிறது.

விளக்கம்:

• alert.module.css கோப்பு .alert மற்றும் .alertSuccess கிளாஸ்களை வரையறுக்கிறது.
• @export தொகுதி இந்த கிளாஸ் பெயர்களை அதே பெயர்களில் (alert, alertSuccess) ஏற்றுமதி செய்கிறது.
• @import கூற்று alert.module.css-லிருந்து ஏற்றுமதி செய்யப்பட்ட கிளாஸ் பெயர்களை notification.module.css கோப்பிற்குள் இறக்குமதி செய்கிறது.
• பின்னர் extend உத்தரவு .alertSuccess-இன் ஸ்டைல்களைப் பெற்று அவற்றை .notificationSuccess-க்கு பயன்படுத்துகிறது.

CSS மாறிகள் மற்றும் கிளாஸ் பெயர்களை இணைத்தல்

நீங்கள் ஒரே @export தொகுதியில் CSS மாறிகளையும் கிளாஸ் பெயர்களையும் இணைக்கலாம்.

            /* base.module.css */
:root {
  --base-font-size: 14px;
}

.baseStyle {
  font-family: sans-serif;
  font-size: var(--base-font-size);
}

@export {
  baseFontSize: var(--base-font-size);
  baseStyle: baseStyle;
}

            

              
                Copy
              
            
          

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

CSS ஸ்டைல் மாட்யூல்களில் @export பயன்படுத்துவது பல குறிப்பிடத்தக்க நன்மைகளை வழங்குகிறது:

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

குளோபல் ப்ராஜெக்ட்களில் @export-க்கான பயன்பாட்டு வழக்குகள்

@export விதி குறிப்பாக பெரிய அளவிலான, குளோபல் வலைத்தள மேம்பாட்டுத் திட்டங்களுக்குப் பயனுள்ளதாக இருக்கும், அங்கு நிலைத்தன்மை, பராமரிப்பு மற்றும் அளவிடுதல் ஆகியவை முக்கியமானவை. இதோ சில குறிப்பிட்ட பயன்பாட்டு வழக்குகள்:

• வடிவமைப்பு அமைப்புகள் (Design Systems): வடிவமைப்பு அமைப்புகளை உருவாக்கும் குழுக்களுக்கு, @export என்பது வண்ணத் தட்டுகள், அச்சுக்கலை அளவுகள் மற்றும் இடைவெளி அலகுகள் போன்ற முக்கிய ஸ்டைல் கொள்கைகளை வரையறுத்து அனைத்து காம்பொனென்ட்களுக்கும் விநியோகிக்கப் பயன்படுத்தப்படலாம். இது ஒரு நிலையான பயனர் அனுபவத்தை உறுதிசெய்கிறது மற்றும் அமைப்பைப் பராமரிக்கத் தேவையான முயற்சியைக் குறைக்கிறது.
• பல-தீம் பயன்பாடுகள்: பல தீம்களை ஆதரிக்கும் பயன்பாடுகள், தீம்-குறிப்பிட்ட மாறிகள் மற்றும் ஸ்டைல்களை வரையறுக்க @export-ஐப் பயன்படுத்தலாம். பயனர்கள் பின்னர் அடிப்படை காம்பொனென்ட் குறியீட்டை மாற்றாமல் தீம்களுக்கு இடையில் மாறலாம். ஒரு வங்கிப் பயன்பாடு பயனர்களுக்கு லைட் மற்றும் டார்க் தீம்களுக்கு இடையில் தேர்வு செய்ய அனுமதிப்பதை அல்லது ஒரு ஈ-காமர்ஸ் தளம் வெவ்வேறு பருவங்களுக்கு வெவ்வேறு தீம்களை வழங்குவதை கற்பனை செய்து பாருங்கள்.
• காம்பொனென்ட் நூலகங்கள்: உள் அல்லது வெளிப்புற பயன்பாட்டிற்காக காம்பொனென்ட் நூலகங்களை உருவாக்கும்போது, தனிப்பயனாக்கக்கூடிய ஸ்டைல் ஹூக்குகளை வெளிப்படுத்த @export பயன்படுத்தப்படலாம். இது டெவலப்பர்கள் நூலகத்தின் காம்பொனென்ட்களை தங்கள் குறிப்பிட்ட தேவைகளுக்கு ஏற்ப எளிதாக மாற்றியமைக்க அனுமதிக்கிறது, முக்கிய காம்பொனென்ட் குறியீட்டை மாற்ற வேண்டிய அவசியமில்லை. உதாரணமாக, ஒரு குளோபல் நிறுவனத்திற்கான UI நூலகம், டெவலப்பர்கள் பட்டன்கள் மற்றும் பிற ஊடாடும் கூறுகளில் பயன்படுத்தப்படும் முதன்மை நிறத்தைத் தனிப்பயனாக்க அனுமதிக்கலாம்.
• சர்வதேசமயமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (L10n): பயனரின் இருப்பிடத்தைப் பொறுத்து மாறுபடும் ஸ்டைல்களை நிர்வகிக்க @export பயன்படுத்தப்படலாம். உதாரணமாக, வெவ்வேறு எழுத்து அடர்த்திகளைக் கொண்ட மொழிகளுக்கு வெவ்வேறு எழுத்துரு அளவுகள் அல்லது இடைவெளி மதிப்புகளை நீங்கள் ஏற்றுமதி செய்யலாம். ஆங்கிலம் மற்றும் ஜப்பானிய மொழி பேசுபவர்களை இலக்காகக் கொண்ட ஒரு வலைத்தளம், வெவ்வேறு எழுத்து அகலங்களுக்கு இடமளிக்க எழுத்துரு அளவுகளை சரிசெய்ய வேண்டியிருக்கலாம்.
• A/B சோதனை: வெவ்வேறு வலைத்தள வடிவமைப்புகளில் A/B சோதனைகளை இயக்கும்போது, எளிதாக மாற்றக்கூடிய தனித்தனி ஸ்டைல் மாறுபாடுகளை உருவாக்க @export பயன்படுத்தப்படலாம். இது உங்கள் CSS-இன் பெரிய பகுதிகளை மீண்டும் எழுதாமல் வெவ்வேறு வடிவமைப்புகளின் செயல்திறனை விரைவாக ஒப்பிட உங்களை அனுமதிக்கிறது. உதாரணமாக, ஒவ்வொரு மாறுபாட்டிற்கும் வெவ்வேறு வண்ணத் திட்டங்கள் அல்லது பட்டன் ஸ்டைல்களை வரையறுக்க @export-ஐப் பயன்படுத்தலாம்.

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

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

• தேவையானதை மட்டும் ஏற்றுமதி செய்யுங்கள்: தேவையற்ற ஸ்டைல்கள் அல்லது மதிப்புகளை ஏற்றுமதி செய்வதைத் தவிர்க்கவும். மற்ற மாட்யூல்களுக்கு உண்மையிலேயே தேவைப்படுவதை மட்டுமே ஏற்றுமதி செய்யுங்கள். இது உங்கள் மாட்யூல்களைக் கவனம் செலுத்தி பராமரிக்க உதவுகிறது.
• விளக்கமான பெயர்களைப் பயன்படுத்துங்கள்: உங்கள் ஏற்றுமதி செய்யப்பட்ட மாறிகள் மற்றும் கிளாஸ் பெயர்களுக்கு தெளிவான மற்றும் விளக்கமான பெயர்களைத் தேர்வு செய்யவும். இது மற்ற டெவலப்பர்கள் ஏற்றுமதி செய்யப்பட்ட மதிப்புகள் எதைக் குறிக்கின்றன என்பதைப் புரிந்துகொள்வதை எளிதாக்குகிறது. உதாரணமாக, color1 என்ற மாறியை ஏற்றுமதி செய்வதற்குப் பதிலாக, primaryColor அல்லது brandColor-ஐப் பயன்படுத்தவும்.
• உங்கள் ஏற்றுமதிகளை ஆவணப்படுத்துங்கள்: உங்கள் ஏற்றுமதி செய்யப்பட்ட மாறிகள் மற்றும் கிளாஸ் பெயர்களுக்கு தெளிவான ஆவணங்களை வழங்கவும், அவற்றின் நோக்கம் மற்றும் பயன்பாட்டை விளக்கவும். இது மற்ற டெவலப்பர்கள் ஏற்றுமதி செய்யப்பட்ட மதிப்புகளைச் சரியாகப் பயன்படுத்த உதவுகிறது. உங்கள் CSS ஸ்டைல் மாட்யூல்களுக்கு ஆவணங்களை உருவாக்க JSDoc அல்லது Styleguidist போன்ற ஒரு கருவியைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.
• ஒரு நிலையான ஸ்டைல் வழிகாட்டியைப் பராமரிக்கவும்: உங்கள் CSS ஸ்டைல் மாட்யூல்களுக்கு ஒரு நிலையான ஸ்டைல் வழிகாட்டியை நிறுவவும், இதில் பெயரிடும் மரபுகள் மற்றும் @export பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள் அடங்கும். இது உங்கள் குறியீட்டுத்தளம் முழுவதும் நிலைத்தன்மை மற்றும் பராமரிப்பை உறுதிப்படுத்த உதவுகிறது.
• அதிகப்படியான சுருக்கத்தைத் தவிர்க்கவும்: @export மறுபயன்பாட்டை ஊக்குவிக்க முடியும் என்றாலும், உங்கள் ஸ்டைல்களை அதிகப்படியாக சுருக்கப்படுத்துவதைத் தவிர்க்கவும். பல காம்பொனென்ட்களில் உண்மையாகப் பகிரப்படும் மதிப்புகளை மட்டுமே ஏற்றுமதி செய்யுங்கள்.

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

@export ஒரு சக்திவாய்ந்த கருவியாக இருந்தாலும், அதன் வரம்புகள் மற்றும் கருத்தில் கொள்ள வேண்டியவை பற்றி அறிந்திருப்பது முக்கியம்:

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

@export-க்கான மாற்று வழிகள்

CSS மாட்யூல்களில் மதிப்புகளைப் பகிர்வதற்கான நிலையான வழி @export என்றாலும், பிற அணுகுமுறைகளும் உள்ளன, அவற்றுள்:

• CSS மாறிகள் (தனிப்பயன் பண்புகள்): @export பெரும்பாலும் CSS மாறிகளுடன் *பயன்படுத்தப்பட்டாலும்*, மாறிகள் ஒரு குளோபல் ஸ்டைல்ஷீட்டில் அல்லது ஒரு CSS மாட்யூலுக்குள் :root தொகுதியில் வரையறுக்கப்படலாம், இதனால் @export தேவைப்படாமல் அணுக முடியும். இருப்பினும், இது CSS மாட்யூல்கள் வழங்கும் உள்ளடக்கத்தைக் குறைக்கிறது.
• CSS-இன்-JS தீர்வுகள்: ஸ்டைல்ட் காம்பொனென்ட்ஸ், எமோஷன் மற்றும் JSS போன்ற நூலகங்கள் ஜாவாஸ்கிரிப்டில் CSS-ஐ நிர்வகிக்க மாற்று வழிகளை வழங்குகின்றன. இந்த நூலகங்கள் பெரும்பாலும் காம்பொனென்ட்களுக்கு இடையில் ஸ்டைல்கள் மற்றும் மதிப்புகளைப் பகிர்வதற்கான அவற்றின் சொந்த வழிமுறைகளைக் கொண்டுள்ளன.
• Sass/SCSS மாறிகள் மற்றும் மிக்ஸின்கள்: நீங்கள் Sass அல்லது SCSS போன்ற ஒரு CSS முன்செயலியைப் பயன்படுத்தினால், கோப்புகளுக்கு இடையில் ஸ்டைல்களைப் பகிர மாறிகள் மற்றும் மிக்ஸின்களைப் பயன்படுத்தலாம். இருப்பினும், இந்த அணுகுமுறை CSS ஸ்டைல் மாட்யூல்கள் போன்ற அதே அளவிலான உள்ளடக்கத்தை வழங்காது.

உதாரணம்: குளோபல் பிராண்டிங் பயன்பாடு

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

            /* core-variables.module.css */
:root {
  --brand-primary: #29abe2; /* A light blue */
  --brand-secondary: #f26522; /* An orange */
  --base-font-family: 'Open Sans', sans-serif;
}

@export {
  brandPrimary: var(--brand-primary);
  brandSecondary: var(--brand-secondary);
  baseFontFamily: var(--base-font-family);
}

            

              
                Copy
              
            
          

            /* typography.module.css */
@import core from './core-variables.module.css';

.heading {
  font-family: core.baseFontFamily;
  font-weight: bold;
  color: core.brandPrimary;
}

.paragraph {
  font-family: core.baseFontFamily;
  font-size: 16px;
  line-height: 1.5;
}

@export {
  heading: heading;
  paragraph: paragraph;
}

            

              
                Copy
              
            
          

            /* button.module.css */
@import core from './core-variables.module.css';
@import typography from './typography.module.css';

.button {
  font-family: core.baseFontFamily;
  background-color: core.brandPrimary;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில்:

• core-variables.module.css முக்கிய பிராண்ட் வண்ணங்களையும் எழுத்துரு குடும்பத்தையும் வரையறுக்கிறது.
• typography.module.css தலைப்புகள் மற்றும் பத்திகளை ஸ்டைல் செய்ய முக்கிய மாறிகளைப் பயன்படுத்துகிறது மற்றும் இந்த ஸ்டைல்களை ஏற்றுமதி செய்கிறது.
• button.module.css பட்டன்களை சீராக ஸ்டைல் செய்ய முக்கிய மாறிகள் மற்றும் அச்சுக்கலை ஸ்டைல்கள் இரண்டையும் இறக்குமதி செய்கிறது.

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

முடிவுரை

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