CSS அடுக்கு முன்னுரிமை கணக்கீடு: அடுக்கு தனித்தன்மை வழிமுறையில் தேர்ச்சி பெறுதல்

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

CSS கேஸ்கேடைப் புரிந்துகொள்ளுதல்

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

• தோற்றம் மற்றும் முக்கியத்துவம்: ஸ்டைல்கள் வெவ்வேறு மூலங்களிலிருந்து (எ.கா., ஆசிரியர், பயனர், பயனர்-ஏஜென்ட்) வரலாம் மற்றும் வெவ்வேறு முக்கியத்துவ நிலைகளுடன் (எ.கா., !important ஐப் பயன்படுத்தி) அறிவிக்கப்படலாம்.
• தனித்தன்மை: செலக்டர்கள் அவற்றின் கூறுகளைப் (எ.கா., ஐடிகள், கிளாஸ்கள், டேக்குகள்) பொறுத்து வெவ்வேறு தனித்தன்மை நிலைகளைக் கொண்டுள்ளன.
• மூல வரிசை: ஸ்டைல்ஷீட்களில் அல்லது <style> டேக்குகளுக்குள் CSS விதிகள் தோன்றும் வரிசை முக்கியமானது. பொதுவாக பிந்தைய விதிகள் முந்தைய விதிகளை மேலெழுதும்.

தோற்றம் மற்றும் முக்கியத்துவம்

ஸ்டைல்கள் வெவ்வேறு மூலங்களிலிருந்து வருகின்றன, ஒவ்வொன்றும் ஒரு முன்னரே வரையறுக்கப்பட்ட முன்னுரிமையைக் கொண்டுள்ளன:

1. பயனர்-ஏஜென்ட் ஸ்டைல்கள்: இவை உலாவி வழங்கும் இயல்புநிலை ஸ்டைல்கள். அவற்றுக்கு மிகக் குறைந்த முன்னுரிமை உண்டு.
2. பயனர் ஸ்டைல்கள்: இவை பயனரால் வரையறுக்கப்பட்ட தனிப்பயன் ஸ்டைல்கள் (எ.கா., உலாவி நீட்டிப்புகள் மூலம்).
3. ஆசிரியர் ஸ்டைல்கள்: இவை வலைத்தள ஆசிரியரால் வரையறுக்கப்பட்ட ஸ்டைல்கள், பொதுவாக வெளிப்புற ஸ்டைல்ஷீட்கள், உட்பொதிக்கப்பட்ட ஸ்டைல்கள் அல்லது இன்லைன் ஸ்டைல்களில் இருக்கும்.
4. !important அறிவிப்புகள்: !important உடன் அறிவிக்கப்பட்ட ஸ்டைல்கள், தனித்தன்மையைப் பொருட்படுத்தாமல், அதே மூலத்தின் மற்ற எல்லா ஸ்டைல்களையும் மேலெழுதும். !important ஐப் பயன்படுத்துவது பொதுவாக மிகவும் குறிப்பிட்ட சூழ்நிலைகளைத் தவிர (எ.கா., மூன்றாம் தரப்பு ஸ்டைல்களை மேலெழுதுதல்) ஊக்கப்படுத்தப்படுவதில்லை.

ஒவ்வொரு மூலத்திலும், !important அறிவிப்புகள் சாதாரண அறிவிப்புகளை விட அதிக முன்னுரிமையைக் கொண்டுள்ளன. இதன் பொருள், !important உடன் அறிவிக்கப்பட்ட ஒரு ஆசிரியர் ஸ்டைல், பயனர் ஸ்டைலும் !important ஐப் பயன்படுத்தினாலும் கூட, எப்போதும் ஒரு பயனர் ஸ்டைலை மேலெழுதும் (ஏனெனில் பயனர் ஸ்டைல்கள் கேஸ்கேடில் ஆசிரியர் ஸ்டைல்களுக்கு முன் வருகின்றன). இதற்கு மாறாக, !important *இல்லாத* ஒரு ஆசிரியர் ஸ்டைல், !important *உடன்* உள்ள ஒரு பயனர் ஸ்டைலால் மேலெழுதப்படலாம்.

உதாரணம்:

            /* author.css */
p {
  color: blue;
}

p {
  color: red !important;
}

/* user.css */
p {
  color: green !important;
}

            

              
                Copy
              
            
          

இந்த சூழ்நிலையில், ஆசிரியரின் ஸ்டைல்ஷீட் பயனரின் ஸ்டைல்ஷீட்டிற்குப் *பிறகு* ஏற்றப்பட்டால் பத்தியின் உரை சிவப்பாக இருக்கும், அல்லது பயனரின் ஸ்டைல்ஷீட் ஆசிரியரின் ஸ்டைல்ஷீட்டிற்குப் பிறகு ஏற்றப்பட்டால் பச்சையாக இருக்கும். !important அறிவிப்புகள் என்றால், ஒவ்வொரு மூலத்திற்குள்ளும் தோற்றம் மற்றும் மூல வரிசை பயன்படுத்தப்படும் ஸ்டைலை தீர்மானிக்கின்றன. பயனர் ஸ்டைல்கள் பொதுவாக ஆசிரியர் ஸ்டைல்களுக்கு *முன்பு* கருதப்படுகின்றன, எனவே ஆசிரியர் !important ஐப் பயன்படுத்தி *மற்றும்* அவரது ஸ்டைல்ஷீட் பயனர் ஸ்டைல்ஷீட்டிற்கு *பிறகு* ஏற்றப்படாவிட்டால், பச்சை நிற பயனர் ஸ்டைல் வெற்றி பெறும். இது ஸ்டைல்ஷீட் வரிசையை நிர்வகிப்பதன் முக்கியத்துவத்தையும், !important ஐ அதிகமாகப் பயன்படுத்துவதால் ஏற்படும் சாத்தியமான ஆபத்துகளையும் விளக்குகிறது.

தனித்தன்மை

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

1. இன்லைன் ஸ்டைல்கள்: style பண்புக்கூறுகளைப் பயன்படுத்தி ஒரு HTML எலிமெண்ட்டிற்கு நேரடியாகப் பயன்படுத்தப்படும் ஸ்டைல்கள். இவை மிக உயர்ந்த தனித்தன்மையைக் கொண்டுள்ளன.
2. ஐடிகள் (IDs): ஐடி செலக்டர்களின் எண்ணிக்கை (எ.கா., #my-element).
3. கிளாஸ்கள், பண்புக்கூறுகள் மற்றும் சூடோ-கிளாஸ்கள்: கிளாஸ் செலக்டர்கள் (எ.கா., .my-class), பண்புக்கூறு செலக்டர்கள் (எ.கா., [type="text"]), மற்றும் சூடோ-கிளாஸ்கள் (எ.கா., :hover) ஆகியவற்றின் எண்ணிக்கை.
4. எலிமெண்ட்டுகள் மற்றும் சூடோ-எலிமெண்ட்டுகள்: எலிமெண்ட் செலக்டர்கள் (எ.கா., p, div) மற்றும் சூடோ-எலிமெண்ட்டுகள் (எ.கா., ::before) ஆகியவற்றின் எண்ணிக்கை.

யுனிவர்சல் செலக்டர் (*), காம்பினேட்டர்கள் (எ.கா., >, +, ~), மற்றும் நிராகரிப்பு சூடோ-கிளாஸ் (:not()) ஆகியவை தனித்தன்மைக்கு பங்களிக்காது, ஆனால் ஒரு செலக்டர் எந்த எலிமெண்ட்டுகளுடன் பொருந்துகிறது என்பதைப் பாதிக்கலாம். :where() சூடோ-கிளாஸ் அதன் மிகத் தனித்துவமான ஆர்கியுமென்ட்டிலிருந்து தனித்தன்மையை எடுக்கும், ஏதேனும் இருந்தால். :is() மற்றும் :has() சூடோ-கிளாஸ்களும் அவற்றின் மிகத் தனித்துவமான ஆர்கியுமென்ட்டை செலக்டரின் தனித்தன்மைக்கு பங்களிக்கின்றன.

தனித்தன்மை பெரும்பாலும் நான்கு-பகுதி மதிப்பாக (a, b, c, d) குறிப்பிடப்படுகிறது, இதில்:

• a = இன்லைன் ஸ்டைல்களின் எண்ணிக்கை
• b = ஐடி செலக்டர்களின் எண்ணிக்கை
• c = கிளாஸ் செலக்டர்கள், பண்புக்கூறு செலக்டர்கள், மற்றும் சூடோ-கிளாஸ்களின் எண்ணிக்கை
• d = எலிமெண்ட் செலக்டர்கள் மற்றும் சூடோ-எலிமெண்ட்டுகளின் எண்ணிக்கை

எந்தவொரு நிலையிலும் ஒரு உயர் மதிப்பு, முந்தைய நிலைகளில் உள்ள குறைந்த மதிப்புகளை மேலெழுதும். உதாரணமாக, (0, 1, 0, 0) என்பது (0, 0, 10, 10) ஐ விட அதிக தனித்தன்மை வாய்ந்தது.

உதாரணங்கள்:

• * (0, 0, 0, 0)
• p (0, 0, 0, 1)
• .my-class (0, 0, 1, 0)
• div p (0, 0, 0, 2)
• .my-class p (0, 0, 1, 1)
• #my-element (0, 1, 0, 0)
• #my-element p (0, 1, 0, 1)
• style="color: red;" (1, 0, 0, 0)

இன்னும் சிக்கலான உதாரணத்தைக் கருத்தில் கொள்வோம்:

            /* style.css */
body #content .article p {
  color: blue; /* (0, 1, 1, 3) */
}

.article p.highlight {
  color: green; /* (0, 0, 2, 2) */
}

            

              
                Copy
              
            
          

இந்த விஷயத்தில், முதல் விதி (body #content .article p) (0, 1, 1, 3) என்ற தனித்தன்மையைக் கொண்டுள்ளது, அதே நேரத்தில் இரண்டாவது விதி (.article p.highlight) (0, 0, 2, 2) என்ற தனித்தன்மையைக் கொண்டுள்ளது. முதல் விதி ஒரு ஐடி செலக்டரைக் கொண்டிருப்பதால் அதிக தனித்தன்மை வாய்ந்தது. எனவே, இரண்டு விதிகளும் ஒரே பத்தி எலிமெண்ட்டிற்குப் பொருந்தினால், உரை நீல நிறத்தில் இருக்கும்.

மூல வரிசை

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

உதாரணம்:

            /* style.css */
p {
  color: blue;
}

p {
  color: red;
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், இரண்டாவது விதி மூலக் குறியீட்டில் பின்னர் தோன்றுவதால் பத்தியின் உரை சிவப்பாக இருக்கும்.

CSS அடுக்குகளை அறிமுகப்படுத்துதல் (@layer)

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

அடுக்குகளை அறிவித்தல் மற்றும் பயன்படுத்துதல்

அடுக்குகள் @layer at-rule ஐப் பயன்படுத்தி அறிவிக்கப்படுகின்றன:

            @layer base;
@layer components;
@layer utilities;

            

              
                Copy
              
            
          

நீங்கள் பின்னர் குறிப்பிட்ட அடுக்குகளுக்கு ஸ்டைல்களை ஒதுக்கலாம்:

            @layer base {
  body {
    font-family: sans-serif;
    background-color: #f0f0f0;
  }
}

@layer components {
  .button {
    padding: 10px 20px;
    border: none;
    background-color: blue;
    color: white;
  }
}

            

              
                Copy
              
            
          

மாற்றாக, நீங்கள் ஒரு ஸ்டைல் விதிக்குள் layer() செயல்பாட்டைப் பயன்படுத்தி அதை ஒரு அடுக்கிற்கு ஒதுக்கலாம்:

            .button {
  layer: components;
  padding: 10px 20px;
  border: none;
  background-color: blue;
  color: white;
}

            

              
                Copy
              
            
          

அடுக்கு வரிசையை வரையறுத்தல்

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

            @layer base, components, utilities;

@layer base {
  /* Base styles */
}

@layer components {
  /* Component styles */
}

@layer utilities {
  /* Utility styles */
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், utilities அடுக்கில் உள்ள ஸ்டைல்கள் components அடுக்கில் உள்ள ஸ்டைல்களை மேலெழுதும், இது base அடுக்கில் உள்ள ஸ்டைல்களை மேலெழுதும், தனிப்பட்ட விதிகளின் மூல வரிசை அல்லது அவற்றின் தனித்தன்மையைப் (ஒவ்வொரு அடுக்கிற்குள்ளும்) பொருட்படுத்தாமல்.

அடுக்கு தனித்தன்மை வழிமுறை

CSS அடுக்கு தனித்தன்மை வழிமுறை, அடுக்குகளைக் கணக்கில் கொள்ள பாரம்பரிய கேஸ்கேடை விரிவுபடுத்துகிறது. இந்த வழிமுறையை பின்வருமாறு சுருக்கமாகக் கூறலாம்:

1. தோற்றம் மற்றும் முக்கியத்துவம்: முன்பைப் போலவே, பயனர்-ஏஜென்ட் ஸ்டைல்கள் மிகக் குறைந்த முன்னுரிமையைக் கொண்டுள்ளன, அதைத் தொடர்ந்து பயனர் ஸ்டைல்கள், பின்னர் ஆசிரியர் ஸ்டைல்கள். ஒவ்வொரு மூலத்திற்குள்ளும் உள்ள !important அறிவிப்புகளுக்கு அதிக முன்னுரிமை உண்டு.
2. அடுக்கு வரிசை: அடுக்குகள் அவை அறிவிக்கப்பட்ட வரிசையில் கருதப்படுகின்றன. பின்னர்-அறிவிக்கப்பட்ட அடுக்கில் உள்ள ஸ்டைல்கள், முன்னர்-அறிவிக்கப்பட்ட அடுக்கில் உள்ள ஸ்டைல்களை, *தனித்தன்மையைப் பொருட்படுத்தாமல்* (அந்த அடுக்குகளுக்குள்) மேலெழுதும்.
3. தனித்தன்மை: ஒவ்வொரு அடுக்கிற்குள்ளும், முன்பு விவரிக்கப்பட்டபடி தனித்தன்மை கணக்கிடப்படுகிறது. அதிக தனித்தன்மை கொண்ட விதி வெற்றி பெறுகிறது.
4. மூல வரிசை: ஒரு அடுக்கிற்குள் தனித்தன்மை சமமாக இருந்தால், மூல வரிசையில் பின்னர் தோன்றும் விதி முன்னுரிமை பெறும்.

இதை விளக்க, பின்வரும் உதாரணத்தைக் கருத்தில் கொள்வோம்:

            /* styles.css */
@layer base, components;

@layer base {
  body {
    background-color: #f0f0f0; /* (0, 0, 0, 1) in layer 'base' */
  }
}

@layer components {
  body {
    background-color: #ffffff; /* (0, 0, 0, 1) in layer 'components' */
  }

  #main {
    background-color: lightblue; /* (0, 1, 0, 0) in layer 'components' */
  }
}

body {
  background-color: lightgreen; /* (0, 0, 0, 1) outside of any layer */
}

            

              
                Copy
              
            
          

இந்த விஷயத்தில், body பின்னணி நிறம் வெள்ளையாக இருக்கும். அடுக்குகளுக்கு வெளியே உள்ள விதி (body { background-color: lightgreen; }) மூல வரிசையில் பின்னர் தோன்றினாலும், 'components' அடுக்கு 'base' க்குப் பிறகு அறிவிக்கப்பட்டுள்ளதால், நாம் எந்த அடுக்கிற்கும் வெளியே இல்லாத வரை அதன் விதிகள் முன்னுரிமை பெறும்.

#main எலிமெண்ட்டின் பின்னணி நிறம் லைட் ப்ளூவாக இருக்கும், ஏனெனில் ஐடி செலக்டர் 'components' அடுக்கிற்குள் அதற்கு அதிக தனித்தன்மையை அளிக்கிறது.

இப்போது, அதே உதாரணத்தை ஒரு !important அறிவிப்புடன் கருத்தில் கொள்வோம்:

            /* styles.css */
@layer base, components;

@layer base {
  body {
    background-color: #f0f0f0 !important; /* (0, 0, 0, 1) in layer 'base' with !important */
  }
}

@layer components {
  body {
    background-color: #ffffff; /* (0, 0, 0, 1) in layer 'components' */
  }

  #main {
    background-color: lightblue; /* (0, 1, 0, 0) in layer 'components' */
  }
}

body {
  background-color: lightgreen; /* (0, 0, 0, 1) outside of any layer */
}

            

              
                Copy
              
            
          

இப்போது, body பின்னணி நிறம் #f0f0f0 ஆக இருக்கும், ஏனெனில் 'base' அடுக்கில் உள்ள !important அறிவிப்பு 'components' அடுக்கில் உள்ள விதியை மேலெழுதுகிறது. இருப்பினும், #main எலிமெண்ட்டின் பின்னணி நிறம் லைட் ப்ளூவாகவே இருக்கும், ஏனெனில் அடுக்குகள் `body` இல் அமைக்கப்படும் பண்புகளுடன் மட்டுமே தொடர்பு கொள்கின்றன.

அடுக்கு வரிசை மற்றும் அடுக்கற்ற ஸ்டைல்கள்

எந்த அடுக்கிற்கும் ஒதுக்கப்படாத ஸ்டைல்கள், அறிவிக்கப்பட்ட அனைத்து அடுக்குகளுக்கும் *பிறகு* வரும் ஒரு மறைமுகமான “அடையாளமற்ற” அடுக்கில் இருப்பதாகக் கருதப்படுகின்றன. இதன் பொருள், அடுக்கப்பட்ட ஸ்டைல்கள் !important ஐப் பயன்படுத்தாவிட்டால், அடுக்கற்ற ஸ்டைல்கள் அடுக்குகளுக்குள் உள்ள ஸ்டைல்களை மேலெழுதும்.

முந்தைய உதாரணத்தைப் பயன்படுத்தி:

            /* styles.css */
@layer base, components;

@layer base {
  body {
    background-color: #f0f0f0; /* (0, 0, 0, 1) in layer 'base' */
  }
}

@layer components {
  body {
    background-color: #ffffff; /* (0, 0, 0, 1) in layer 'components' */
  }
}

body {
  background-color: lightgreen; /* (0, 0, 0, 1) outside of any layer */
}

            

              
                Copy
              
            
          

body பின்னணி நிறம் லைட் கிரீன் ஆக இருக்கும், ஏனெனில் அடுக்கற்ற ஸ்டைல் அடுக்கப்பட்ட ஸ்டைல்களை மேலெழுதுகிறது.

இருப்பினும், நாம் அடுக்கப்பட்ட ஸ்டைலுக்கு !important ஐச் சேர்த்தால்:

            /* styles.css */
@layer base, components;

@layer base {
  body {
    background-color: #f0f0f0 !important; /* (0, 0, 0, 1) in layer 'base' with !important */
  }
}

@layer components {
  body {
    background-color: #ffffff; /* (0, 0, 0, 1) in layer 'components' */
  }
}

body {
  background-color: lightgreen; /* (0, 0, 0, 1) outside of any layer */
}

            

              
                Copy
              
            
          

body பின்னணி நிறம் #f0f0f0 ஆக இருக்கும், ஏனெனில் !important அறிவிப்பு அடுக்கற்ற ஸ்டைலை மேலெழுதுகிறது. *இரண்டு* அடுக்கப்பட்ட விதிகளிலும் !important இருந்திருந்தால், மற்றும் components, base-க்குப் பிறகு அறிவிக்கப்பட்டிருந்தால், அப்போது `body` பின்னணி நிறம் #ffffff ஆக இருந்திருக்கும்.

நடைமுறை உதாரணங்கள் மற்றும் பயன்பாட்டு வழக்குகள்

மூன்றாம் தரப்பு நூலகங்களை நிர்வகித்தல்

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

            /* styles.css */
@layer bootstrap, custom;

@layer bootstrap {
  @import "bootstrap.min.css"; /* Assuming bootstrap.min.css contains Bootstrap's styles */
}

@layer custom {
  /* Custom styles to override Bootstrap defaults */
  .btn-primary {
    background-color: #007bff;
  }
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், Bootstrap-ன் ஸ்டைல்கள் 'bootstrap' அடுக்கிலும், தனிப்பயன் ஸ்டைல்கள் 'custom' அடுக்கிலும் வைக்கப்பட்டுள்ளன. 'custom' அடுக்கு 'bootstrap' அடுக்கிற்குப் பிறகு அறிவிக்கப்பட்டுள்ளதால், அதன் ஸ்டைல்கள் Bootstrap-ன் இயல்புநிலைகளை மேலெழுதும், இது உங்கள் பயன்பாட்டின் தோற்றத்தையும் உணர்வையும் Bootstrap-ன் CSS கோப்புகளை நேரடியாக மாற்றாமல் தனிப்பயனாக்க உங்களை அனுமதிக்கிறது.

தீமிங் மற்றும் மாறுபாடுகள்

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

            /* styles.css */
@layer base, theme-light, theme-dark;

@layer base {
  /* Common styles */
  body {
    font-family: sans-serif;
  }
}

@layer theme-light {
  /* Light theme styles */
  body {
    background-color: #ffffff;
    color: #000000;
  }
}

@layer theme-dark {
  /* Dark theme styles */
  body {
    background-color: #000000;
    color: #ffffff;
  }
}

            

              
                Copy
              
            
          

தீம்களுக்கு இடையில் மாற, நீங்கள் அடுக்கு வரிசையை மாற்றினால் போதும்:

            /* Light theme */
@layer base, theme-light, theme-dark;

/* Dark theme */
@layer base, theme-dark, theme-light;

            

              
                Copy
              
            
          

மாடுலர் CSS கட்டமைப்புகள்

BEM (Block, Element, Modifier) அல்லது SMACSS (Scalable and Modular Architecture for CSS) போன்ற நவீன CSS கட்டமைப்புகளுக்கு CSS அடுக்குகள் ஒரு சரியான பொருத்தம். நீங்கள் தொடர்புடைய ஸ்டைல்களை அவற்றின் நோக்கம் அல்லது மாட்யூலின் அடிப்படையில் அடுக்குகளாக தொகுக்கலாம், இது உங்கள் CSS குறியீட்டுத் தளத்தை பராமரிப்பதையும் அளவிடுவதையும் எளிதாக்குகிறது.

உதாரணமாக, நீங்கள் இதற்கான அடுக்குகளைக் கொண்டிருக்கலாம்:

• அடிப்படை (Base): ரீசெட் ஸ்டைல்கள், அச்சுக்கலை மற்றும் உலகளாவிய அமைப்புகள்.
• தளவமைப்பு (Layout): கிரிட் அமைப்புகள், கண்டெய்னர்கள் மற்றும் பக்க அமைப்பு.
• கூறுகள் (Components): பொத்தான்கள், படிவங்கள் மற்றும் வழிசெலுத்தல் மெனுக்கள் போன்ற மீண்டும் பயன்படுத்தக்கூடிய UI கூறுகள்.
• பயன்பாடுகள் (Utilities): இடைவெளி, வண்ணங்கள் மற்றும் அச்சுக்கலைக்கான உதவி கிளாஸ்கள்.

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

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

உலாவி ஆதரவு மற்றும் பாலிஃபில்கள்

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

முடிவுரை

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

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