CSS @layer ஸ்பெசிஃபிசிட்டி மேலெழுதல்: லேயர் முன்னுரிமை கையாளுதல்

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

CSS கேஸ்கேட் மற்றும் ஸ்பெசிஃபிசிட்டியைப் புரிந்துகொள்ளுதல்

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

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

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

CSS @layer அறிமுகம்: லேயர்களை அறிவித்தல் மற்றும் வரிசைப்படுத்துதல்

@layer at-rule ஆனது CSS ஸ்டைல்களின் பெயரிடப்பட்ட லேயர்களை வரையறுக்க உங்களை அனுமதிக்கிறது. இந்த லேயர்கள் கேஸ்கேடிற்குள் ஒரு புதிய அமைப்பு நிலையை உருவாக்குகின்றன, இது ஸ்டைல்கள் பயன்படுத்தப்படும் வரிசையைக் கட்டுப்படுத்த உதவுகிறது. இதை உங்கள் CSS விதிகளுக்கு தனித்துவமான வகைகளை உருவாக்கி, பின்னர் அந்த வகைகளை ஒரு குறிப்பிட்ட முன்னுரிமை வரிசையில் ஏற்பாடு செய்வதாக நினைத்துப் பாருங்கள்.

லேயர்களை அறிவித்தல்: நீங்கள் இரண்டு வழிகளில் லேயர்களை அறிவிக்கலாம்:

1. வெளிப்படையான அறிவிப்பு:

               @layer base, components, utilities;
               
   
                 
                   Copy
                 
               
             

   இது base, components, மற்றும் utilities என்ற பெயரில் மூன்று லேயர்களை குறிப்பிட்ட வரிசையில் அறிவிக்கிறது. அறிவிப்பின் வரிசை முக்கியமானது; முன்னதாக அறிவிக்கப்பட்ட லேயர்கள் பின்னர் அறிவிக்கப்பட்டவற்றை விட குறைந்த முன்னுரிமையைக் கொண்டுள்ளன.

2. மறைமுக அறிவிப்பு:

               @layer base {
     body {
       font-family: sans-serif;
       margin: 0;
     }
   }
               
   
                 
                   Copy
                 
               
             

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

லேயர் வரிசை மற்றும் முன்னுரிமை: லேயர்கள் அறிவிக்கப்படும் வரிசை கேஸ்கேடில் அவற்றின் முன்னுரிமையை தீர்மானிக்கிறது. முன்னதாக அறிவிக்கப்பட்ட லேயர்கள் குறைந்த முன்னுரிமையைக் கொண்டுள்ளன, அதாவது ஒரு முரண்பாடு ஏற்பட்டால் பிந்தைய லேயர்களில் உள்ள ஸ்டைல்கள் முந்தைய லேயர்களில் உள்ள ஸ்டைல்களை மேலெழுதும். ஸ்பெசிஃபிசிட்டி மேலெழுதலுக்காக @layer-ஐப் பயன்படுத்துவதன் பின்னணியில் உள்ள முக்கிய கருத்து இதுவாகும்.

@layer-இன் நடைமுறை எடுத்துக்காட்டுகள்

@layer வெவ்வேறு சூழ்நிலைகளில் எவ்வாறு பயன்படுத்தப்படலாம் என்பதை விளக்குவோம்:

எடுத்துக்காட்டு 1: பேஸ் ஸ்டைல்கள், காம்போனென்ட்கள், மற்றும் யூட்டிலிட்டிகள்

CSS-ஐ base, components, மற்றும் utilities லேயர்களாக ஒழுங்கமைப்பது ஒரு பொதுவான வடிவமாகும்.

            @layer base, components, utilities;

@layer base {
  body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    color: #333;
  }
  
h1, h2, h3 {
    margin-bottom: 1rem;
  }
}

@layer components {
  .button {
    padding: 0.5rem 1rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
}

@layer utilities {
  .margin-top-lg {
    margin-top: 2rem;
  }
  
  .text-center {
    text-align: center;
  }
}
            

              
                Copy
              
            
          

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

எடுத்துக்காட்டு 2: தீம் மேலெழுதுதல்

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

            @layer base, theme;

@layer base {
  body {
    background-color: #f0f0f0;
    color: #333;
  }

  .card {
    background-color: white;
    border: 1px solid #ccc;
  }
}

@layer theme {
  body {
    background-color: #222;
    color: #eee;
  }

  .card {
    background-color: #333;
    border: 1px solid #555;
    color: #eee;
  }
}
            

              
                Copy
              
            
          

இங்கே, theme லேயர் ஒரு டார்க் தீமை வழங்க base ஸ்டைல்களை மேலெழுதும். நீங்கள் theme லேயரை இயக்குவதன் மூலம் அல்லது முடக்குவதன் மூலம் எளிதாக தீம்களுக்கு இடையில் மாறலாம் (எ.கா., <html> எலிமெண்ட்டில் ஒரு கிளாஸை மாற்ற ஜாவாஸ்கிரிப்ட் மற்றும் நிபந்தனை CSS-ஐப் பயன்படுத்துதல்).

எடுத்துக்காட்டு 3: மூன்றாம் தரப்பு லைப்ரரிகள்

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

            @layer reset, library, components, utilities;

@layer reset {
  /* CSS Reset or Normalize */
  html, body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
}

@layer library {
  /* Styles from a third-party library (e.g., Bootstrap) */
  .bootstrap-button {
    /* Bootstrap button styles */
  }
}

@layer components {
  /* Your component styles */
  .my-button {
    /* Your button styles */
  }
}

@layer utilities {
  /* Your utility classes */
}
            

              
                Copy
              
            
          

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

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

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

மறுவரிசைப்படுத்தலுடன் layer()-ஐப் பயன்படுத்துதல்:

            @layer base, components, utilities;

@layer utilities {
  .override {
    color: red !important; /* Example utility */
  }
}

@layer components {
  .button {
    color: blue;
  }
}

/* Reorder the layers: utilities should be applied before components */
@layer components, utilities; /* IMPORTANT: Declaration order matters */



            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், ஆரம்பத்தில், utilities லேயர் components-க்கு பிறகு அறிவிக்கப்படுகிறது. இருப்பினும், அடுத்தடுத்த @layer components, utilities; அறிக்கை லேயர்களை மறுவரிசைப்படுத்துகிறது. இதன் பொருள் components லேயரில் உள்ள ஸ்டைல்கள் இப்போது utilities லேயரில் உள்ள ஸ்டைல்களை மேலெழுதும், utilities லேயரில் !important இருந்தாலும் கூட. மறுவரிசைப்படுத்துதல் கேஸ்கேட் முன்னுரிமையை நிர்வகிக்க மிகவும் சக்திவாய்ந்த வழியை உங்களுக்கு வழங்குகிறது.

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

நெஸ்டிங் லேயர்கள்

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

            @layer theme {
  @layer light, dark;

  @layer light {
    body {
      background-color: #fff;
      color: #333;
    }
  }

  @layer dark {
    body {
      background-color: #222;
      color: #eee;
    }
  }
}

            

              
                Copy
              
            
          

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

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

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

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

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

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

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

முடிவுரை

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