CSS @apply નિયમ: મૂળ મિક્સિનનો ઉદય અને પતન અને આધુનિક વિકલ્પો

વેબ ડેવલપમેન્ટના સતત વિકસતા ક્ષેત્રમાં, સ્વચ્છ, વધુ જાળવણી યોગ્ય અને પુનઃઉપયોગી કોડની શોધ સતત ચાલુ રહે છે. વર્ષોથી, ડેવલપર્સે સ્ટાઈલશીટમાં પ્રોગ્રામિંગની શક્તિ લાવવા માટે Sass અને Less જેવા CSS પ્રીપ્રોસેસર્સનો ઉપયોગ કર્યો છે. આ સાધનોમાંથી સૌથી પ્રિય સુવિધાઓમાંની એક છે મિક્સિન—જે CSS ઘોષણાઓના પુનઃઉપયોગી બ્લોકને વ્યાખ્યાયિત કરવાની એક રીત છે. આનાથી એક સ્વાભાવિક પ્રશ્ન ઊભો થયો: શું આપણે આ શક્તિશાળી સુવિધા મૂળ CSS માં મેળવી શકીએ? થોડા સમય માટે, જવાબ હા લાગતો હતો, અને તેનું નામ હતું @apply.

@apply નિયમ એક આશાસ્પદ પ્રસ્તાવ હતો જેનો હેતુ CSS કસ્ટમ પ્રોપર્ટીઝની શક્તિનો ઉપયોગ કરીને મિક્સિન જેવી કાર્યક્ષમતા સીધી બ્રાઉઝરમાં લાવવાનો હતો. તેણે એવા ભવિષ્યનું વચન આપ્યું હતું જ્યાં આપણે શુદ્ધ CSS માં પુનઃઉપયોગી સ્ટાઇલ સ્નિપેટ્સ વ્યાખ્યાયિત કરી શકીએ અને તેને ગમે ત્યાં લાગુ કરી શકીએ, અને જાવાસ્ક્રિપ્ટ વડે ગતિશીલ રીતે અપડેટ પણ કરી શકીએ. જો કે, જો તમે આજે ડેવલપર છો, તો તમને કોઈપણ સ્થિર બ્રાઉઝરમાં @apply જોવા મળશે નહીં. આ પ્રસ્તાવને આખરે સત્તાવાર CSS સ્પષ્ટીકરણમાંથી પાછો ખેંચી લેવામાં આવ્યો હતો.

આ લેખ CSS @apply નિયમનું વ્યાપક સંશોધન છે. આપણે તે શું હતું, સ્ટાઇલ કમ્પોઝિશન માટે તેમાં રહેલી શક્તિશાળી સંભાવના, તેને રદ કરવાના જટિલ કારણો, અને સૌથી અગત્યનું, આજના ડેવલપમેન્ટ ઇકોસિસ્ટમમાં સમાન સમસ્યાઓનું નિરાકરણ લાવતા આધુનિક, ઉત્પાદન-માટે-તૈયાર વિકલ્પોની સફર કરીશું.

CSS @apply નિયમ શું હતો?

તેના મૂળમાં, @apply નિયમ કસ્ટમ પ્રોપર્ટીમાં સંગ્રહિત CSS ઘોષણાઓના સમૂહને લેવા અને તેને CSS નિયમની અંદર "લાગુ" કરવા માટે બનાવવામાં આવ્યો હતો. આનાથી ડેવલપર્સને "પ્રોપર્ટી બેગ્સ" અથવા "રૂલ સેટ્સ" બનાવવાની મંજૂરી મળી જેનો ઉપયોગ બહુવિધ સિલેક્ટર્સમાં થઈ શકે, જે 'ડોન્ટ રિપીટ યોરસેલ્ફ' (DRY) સિદ્ધાંતને મૂર્તિમંત કરે છે.

આ ખ્યાલ CSS કસ્ટમ પ્રોપર્ટીઝ (જેને ઘણીવાર CSS વેરીએબલ્સ કહેવાય છે) પર આધારિત હતો. જ્યારે આપણે સામાન્ય રીતે રંગ (--brand-color: #3498db;) અથવા કદ (--font-size-md: 16px;) જેવા એકલ મૂલ્યો સંગ્રહવા માટે કસ્ટમ પ્રોપર્ટીઝનો ઉપયોગ કરીએ છીએ, ત્યારે @apply માટેના પ્રસ્તાવમાં તેમની ક્ષમતાને ઘોષણાઓના સંપૂર્ણ બ્લોક્સને પકડી રાખવા માટે વિસ્તૃત કરવામાં આવી હતી.

સૂચિત સિન્ટેક્સ

જે કોઈ પણ CSS થી પરિચિત છે તેમના માટે સિન્ટેક્સ સીધો અને સાહજિક હતો. પ્રથમ, તમે CSS ઘોષણાઓના બ્લોક ધરાવતી કસ્ટમ પ્રોપર્ટીને વ્યાખ્યાયિત કરશો, જે સર્પાકાર કૌંસ {} માં બંધ હોય છે.

            
:root {
  --primary-button-styles: {
    background-color: #007bff;
    color: #ffffff;
    border: 1px solid transparent;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
  };
}

            

              
                Copy
              
            
          

પછી, કોઈપણ CSS નિયમની અંદર, તમે તે શૈલીઓના સંપૂર્ણ બ્લોકને ઇન્જેક્ટ કરવા માટે @apply એટ-રૂલનો ઉપયોગ કરી શકો છો:

            
.btn-primary {
  @apply --primary-button-styles;
}

.form-submit-button {
  @apply --primary-button-styles;
  margin-top: 1rem; /* You could still add other styles */
}

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, .btn-primary અને .form-submit-button બંને --primary-button-styles માં વ્યાખ્યાયિત શૈલીઓના સંપૂર્ણ સમૂહને વારસામાં મેળવશે. આ પ્રમાણભૂત var() ફંક્શનથી નોંધપાત્ર રીતે અલગ હતું, જે ફક્ત એક જ પ્રોપર્ટીમાં એક જ મૂલ્યને બદલી શકે છે.

મુખ્ય ઉદ્દેશિત લાભો

• કોડ પુનઃઉપયોગિતા: સૌથી સ્પષ્ટ લાભ પુનરાવર્તન દૂર કરવાનો હતો. બટન શૈલીઓ, કાર્ડ લેઆઉટ અથવા ચેતવણી બોક્સ જેવી સામાન્ય પેટર્ન એકવાર વ્યાખ્યાયિત કરી શકાય છે અને બધે લાગુ કરી શકાય છે.
• સુધારેલી જાળવણીક્ષમતા: બધા પ્રાથમિક બટનોના દેખાવને અપડેટ કરવા માટે, તમારે ફક્ત --primary-button-styles કસ્ટમ પ્રોપર્ટીને સંપાદિત કરવાની જરૂર પડશે. પછી આ ફેરફાર તે લાગુ થયેલ દરેક તત્વમાં પ્રચારિત થશે.
• ડાયનેમિક થીમિંગ: કારણ કે તે કસ્ટમ પ્રોપર્ટીઝ પર આધારિત હતું, આ મિક્સિન જાવાસ્ક્રિપ્ટ વડે ગતિશીલ રીતે બદલી શકાય છે, જે શક્તિશાળી રનટાઇમ થીમિંગ ક્ષમતાઓ માટે પરવાનગી આપે છે જે પ્રીપ્રોસેસર્સ (જે કમ્પાઇલ સમયે કાર્ય કરે છે) ઓફર કરી શકતા નથી.
• અંતર પૂરવું: તેણે પ્રીપ્રોસેસર વિશ્વની એક ખૂબ જ પ્રિય સુવિધાને મૂળ CSS માં લાવવાનું વચન આપ્યું, જેનાથી આ વિશિષ્ટ કાર્યક્ષમતા માટે બિલ્ડ ટૂલ્સ પરની નિર્ભરતા ઓછી થઈ.

@apply નું વચન: મૂળ મિક્સિન અને સ્ટાઇલ કમ્પોઝિશન

@apply ની સંભાવના સરળ શૈલીના પુનઃઉપયોગથી ઘણી આગળ હતી. તેણે CSS આર્કિટેક્ચર માટે બે શક્તિશાળી ખ્યાલો ખોલ્યા: મૂળ મિક્સિન અને ઘોષણાત્મક શૈલી રચના.

પ્રીપ્રોસેસર મિક્સિનનો મૂળ જવાબ

વર્ષોથી, Sass મિક્સિન માટે સુવર્ણ ધોરણ રહ્યું છે. ચાલો સરખામણી કરીએ કે Sass આ કેવી રીતે પ્રાપ્ત કરે છે તેની સાથે @apply કેવી રીતે કામ કરવાનો હતો.

એક સામાન્ય Sass મિક્સિન:

            
@mixin flexible-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-banner {
  @include flexible-center;
  height: 100vh;
}

.modal-content {
  @include flexible-center;
  flex-direction: column;
}

            

              
                Copy
              
            
          

@apply સાથે સમકક્ષ:

            
:root {
  --flexible-center: {
    display: flex;
    justify-content: center;
    align-items: center;
  };
}

.hero-banner {
  @apply --flexible-center;
  height: 100vh;
}

.modal-content {
  @apply --flexible-center;
  flex-direction: column;
}

            

              
                Copy
              
            
          

સિન્ટેક્સ અને ડેવલપરનો અનુભવ નોંધપાત્ર રીતે સમાન હતો. જોકે, મુખ્ય તફાવત અમલીકરણમાં હતો. Sass @mixin ને બિલ્ડ સ્ટેપ દરમિયાન પ્રોસેસ કરવામાં આવે છે, જે સ્ટેટિક CSS આઉટપુટ કરે છે. @apply નિયમ બ્રાઉઝર દ્વારા રનટાઇમ પર પ્રોસેસ થવાનો હતો. આ તફાવત તેની સૌથી મોટી તાકાત અને, જેમ આપણે જોઈશું, તેનું અંતિમ પતન બંને હતું.

ઘોષણાત્મક સ્ટાઇલ કમ્પોઝિશન

@apply એ ડેવલપર્સને નાના, એકલ-હેતુવાળા સ્ટાઇલ સ્નિપેટ્સ કમ્પોઝ કરીને જટિલ ઘટકો બનાવવામાં સક્ષમ બનાવ્યા હોત. એક UI કમ્પોનન્ટ લાઇબ્રેરી બનાવવાની કલ્પના કરો જ્યાં તમારી પાસે ટાઇપોગ્રાફી, લેઆઉટ અને દેખાવ માટે મૂળભૂત બ્લોક્સ હોય.

            
:root {
  --typography-body: {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
  };

  --card-layout: {
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  };

  --theme-light: {
    background-color: #ffffff;
    border: 1px solid #ddd;
  };

  --theme-dark: {
    background-color: #2c3e50;
    border: 1px solid #444;
    color: #ecf0f1;
  };
}

.article-card {
  @apply --typography-body;
  @apply --card-layout;
  @apply --theme-light;
}

.user-profile-card.dark-mode {
  @apply --typography-body;
  @apply --card-layout;
  @apply --theme-dark;
}

            

              
                Copy
              
            
          

આ અભિગમ અત્યંત ઘોષણાત્મક છે. .article-card માટેનો CSS સ્પષ્ટપણે તેની રચના જણાવે છે: તેમાં બોડી ટાઇપોગ્રાફી, કાર્ડ લેઆઉટ અને લાઇટ થીમ છે. આ કોડને વાંચવા અને સમજવામાં સરળ બનાવે છે.

ડાયનેમિક સુપરપાવર

સૌથી આકર્ષક સુવિધા તેની રનટાઇમ ગતિશીલતા હતી. કારણ કે --card-theme નિયમિત કસ્ટમ પ્રોપર્ટી હોઈ શકે છે, તમે જાવાસ્ક્રિપ્ટ વડે સંપૂર્ણ રૂલ સેટ્સ સ્વેપ કરી શકો છો.

            
/* CSS */
.user-profile-card {
  @apply --typography-body;
  @apply --card-layout;
  @apply var(--card-theme, --theme-light); /* Apply a theme, defaulting to light */
}

/* JavaScript */
const themeToggleButton = document.getElementById('theme-toggle');
themeToggleButton.addEventListener('click', () => {
  const root = document.documentElement;
  const isDarkMode = root.style.getPropertyValue('--card-theme') === '--theme-dark';

  if (isDarkMode) {
    root.style.setProperty('--card-theme', '--theme-light');
  } else {
    root.style.setProperty('--card-theme', '--theme-dark');
  }
});

            

              
                Copy
              
            
          

આ કાલ્પનિક ઉદાહરણ બતાવે છે કે તમે કેવી રીતે એક જ કસ્ટમ પ્રોપર્ટી બદલીને ઘટકને લાઇટ અને ડાર્ક થીમ વચ્ચે ટૉગલ કરી શકો છો. બ્રાઉઝરને પછી @apply નિયમનું પુનઃમૂલ્યાંકન કરવાની અને તરત જ શૈલીઓના મોટા ભાગને બદલવાની જરૂર પડશે. આ એક અત્યંત શક્તિશાળી વિચાર હતો, પરંતુ તે સપાટી નીચે છુપાયેલી અપાર જટિલતા તરફ પણ સંકેત આપતો હતો.

મહાન ચર્ચા: @apply ને CSS સ્પષ્ટીકરણમાંથી શા માટે દૂર કરવામાં આવ્યું?

આટલી આકર્ષક દ્રષ્ટિ હોવા છતાં, @apply શા માટે અદૃશ્ય થઈ ગયું? તેને દૂર કરવાનો નિર્ણય હળવાશથી લેવાયો ન હતો. તે CSS વર્કિંગ ગ્રુપ (CSSWG) અને બ્રાઉઝર વિક્રેતાઓ વચ્ચે લાંબી અને જટિલ ચર્ચાઓનું પરિણામ હતું. કારણો પ્રદર્શન, જટિલતા અને CSS ના મૂળભૂત સિદ્ધાંતો સાથેના નોંધપાત્ર મુદ્દાઓ પર આવીને અટક્યા.

૧. અસ્વીકાર્ય પ્રદર્શન અસરો

આ તેના પતનનું મુખ્ય કારણ હતું. CSS ને અત્યંત ઝડપી અને કાર્યક્ષમ બનાવવા માટે ડિઝાઇન કરવામાં આવ્યું છે. બ્રાઉઝરનું રેન્ડરિંગ એન્જિન સ્ટાઇલશીટ્સને પાર્સ કરી શકે છે, CSSOM (CSS ઓબ્જેક્ટ મોડેલ) બનાવી શકે છે, અને અત્યંત ઑપ્ટિમાઇઝ ક્રમમાં DOM પર શૈલીઓ લાગુ કરી શકે છે. @apply નિયમે આ ઑપ્ટિમાઇઝેશનને તોડી નાખવાની ધમકી આપી.

• પાર્સિંગ અને વેલિડેશન: જ્યારે બ્રાઉઝર --main-color: blue; જેવી કસ્ટમ પ્રોપર્ટીનો સામનો કરે છે, ત્યારે તેને `blue` મૂલ્યને ત્યાં સુધી માન્ય કરવાની જરૂર નથી જ્યાં સુધી તેનો વાસ્તવમાં `color: var(--main-color);` જેવી પ્રોપર્ટીમાં ઉપયોગ ન થાય. જો કે, @apply સાથે, બ્રાઉઝરને કસ્ટમ પ્રોપર્ટીની અંદર મનસ્વી CSS ઘોષણાઓના સંપૂર્ણ બ્લોકને પાર્સ અને માન્ય કરવો પડશે. આ એક ઘણું ભારે કાર્ય છે.
• કાસ્કેડિંગ જટિલતા: સૌથી મોટો પડકાર એ હતો કે @apply કાસ્કેડ સાથે કેવી રીતે ક્રિયાપ્રતિક્રિયા કરશે તે સમજવું. જ્યારે તમે શૈલીઓના બ્લોકને @apply કરો છો, ત્યારે તે શૈલીઓ કાસ્કેડમાં ક્યાં ફિટ થાય છે? શું તેમની વિશિષ્ટતા તે નિયમ જેવી જ છે જેમાં તે છે? જો @apply થયેલ પ્રોપર્ટીને પછીથી બીજી શૈલી દ્વારા ઓવરરાઇડ કરવામાં આવે તો શું થાય? આનાથી "લેટ-બ્રેકિંગ" કાસ્કેડ સમસ્યા ઊભી થઈ જે ગણતરીની દ્રષ્ટિએ ખર્ચાળ અને સુસંગત રીતે વ્યાખ્યાયિત કરવી મુશ્કેલ હતી.
• અનંત લૂપ્સ અને પરિપત્ર અવલંબન: તેણે પરિપત્ર સંદર્ભોની શક્યતા રજૂ કરી. શું થાય જો --mixin-a --mixin-b લાગુ કરે, જે બદલામાં --mixin-a લાગુ કરે? રનટાઇમ પર આ કેસોને શોધી કાઢવા અને હેન્ડલ કરવાથી CSS એન્જિન પર નોંધપાત્ર ઓવરહેડ ઉમેરાશે.

સારમાં, @apply ને બ્રાઉઝરને નોંધપાત્ર પ્રમાણમાં કામ કરવાની જરૂર હતી જે સામાન્ય રીતે બિલ્ડ ટૂલ્સ દ્વારા કમ્પાઇલ સમયે હેન્ડલ કરવામાં આવે છે. દરેક શૈલીની પુનઃગણતરી માટે રનટાઇમ પર આ કાર્ય કુશળતાપૂર્વક કરવું પ્રદર્શનની દ્રષ્ટિએ ખૂબ ખર્ચાળ માનવામાં આવ્યું હતું.

૨. કાસ્કેડની ગેરંટી તોડવી

CSS કાસ્કેડ એક અનુમાનિત, ભલે ક્યારેક જટિલ, સિસ્ટમ છે. ડેવલપર્સ તેમની શૈલીઓ વિશે તર્ક કરવા માટે વિશિષ્ટતા, વારસા અને સ્રોત ક્રમના નિયમો પર આધાર રાખે છે. @apply નિયમે પરોક્ષતાનું એક સ્તર રજૂ કર્યું જેણે આ તર્કને વધુ મુશ્કેલ બનાવ્યો.

આ દૃશ્યનો વિચાર કરો:

            
:root {
  --my-mixin: {
    color: blue;
  };
}

div {
  @apply --my-mixin; /* color is blue */
  color: red;        /* color is now red */
}

            

              
                Copy
              
            
          

આ પૂરતું સરળ લાગે છે. પરંતુ જો ક્રમ ઉલટો હોત તો?

            
div {
  color: red;
  @apply --my-mixin; /* Does this override the red? */
}

            

              
                Copy
              
            
          

CSSWG એ નક્કી કરવાનું હતું: શું @apply શોર્ટહેન્ડ પ્રોપર્ટીની જેમ વર્તે છે જે સ્થાને વિસ્તરે છે, અથવા તે ઘોષણાઓના સમૂહની જેમ વર્તે છે જે તેમના પોતાના સ્રોત ક્રમ સાથે ઇન્જેક્ટ કરવામાં આવે છે? આ અસ્પષ્ટતાએ CSS ની મુખ્ય અનુમાનિતતાને નબળી પાડી. તેને ઘણીવાર "જાદુ" તરીકે વર્ણવવામાં આવતું હતું - એક શબ્દ જે ડેવલપર્સ એવા વર્તન માટે વાપરે છે જે સરળતાથી સમજી શકાતું નથી અથવા ડીબગ કરી શકાતું નથી. CSS ના મૂળમાં આ પ્રકારનો જાદુ દાખલ કરવો એ એક નોંધપાત્ર દાર્શનિક ચિંતા હતી.

૩. સિન્ટેક્સ અને પાર્સિંગ પડકારો

સિન્ટેક્સ પોતે, ભલે સરળ લાગતો હોય, સમસ્યાઓ ઊભી કરતો હતો. કસ્ટમ પ્રોપર્ટી મૂલ્યની અંદર મનસ્વી CSS ને મંજૂરી આપવાનો અર્થ એ હતો કે CSS પાર્સરને વધુ જટિલ બનાવવાની જરૂર પડશે. તેને પ્રોપર્ટીની વ્યાખ્યામાં જ નેસ્ટેડ બ્લોક્સ, ટિપ્પણીઓ અને સંભવિત ભૂલોને હેન્ડલ કરવી પડશે, જે કસ્ટમ પ્રોપર્ટીઝ જે રીતે કામ કરવા માટે ડિઝાઇન કરવામાં આવી હતી (જે અવેજી સુધી અનિવાર્યપણે સ્ટ્રિંગ ધરાવે છે) તેનાથી નોંધપાત્ર રીતે અલગ હતું.

આખરે, સર્વસંમતિ એ હતી કે પ્રદર્શન અને જટિલતાના ખર્ચ વિકાસકર્તાની સુવિધાના ફાયદા કરતાં ઘણા વધારે હતા, ખાસ કરીને જ્યારે અન્ય ઉકેલો પહેલેથી જ અસ્તિત્વમાં હતા અથવા ક્ષિતિજ પર હતા.

@apply નો વારસો: આધુનિક વિકલ્પો અને શ્રેષ્ઠ પદ્ધતિઓ

CSS માં પુનઃઉપયોગી શૈલી સ્નિપેટ્સનું સ્વપ્ન મરી ગયું નથી. @apply જે સમસ્યાઓ હલ કરવાનો હેતુ હતો તે હજી પણ વાસ્તવિક છે, અને વિકાસ સમુદાયે ત્યારથી કેટલાક શક્તિશાળી, ઉત્પાદન-માટે-તૈયાર વિકલ્પો અપનાવ્યા છે. આજે તમારે શું વાપરવું જોઈએ તે અહીં છે.

વિકલ્પ ૧: CSS કસ્ટમ પ્રોપર્ટીઝમાં નિપુણતા મેળવો (ઇચ્છિત રીત)

સૌથી સીધો, મૂળ ઉકેલ CSS કસ્ટમ પ્રોપર્ટીઝનો તેમના મૂળ હેતુ માટે ઉપયોગ કરવાનો છે: એકલ, પુનઃઉપયોગી મૂલ્યોનો સંગ્રહ કરવો. બટન માટે મિક્સિન બનાવવાને બદલે, તમે બટનની થીમ વ્યાખ્યાયિત કરતી કસ્ટમ પ્રોપર્ટીઝનો સમૂહ બનાવો છો. આ અભિગમ શક્તિશાળી, કાર્યક્ષમ છે અને તમામ આધુનિક બ્રાઉઝર્સ દ્વારા સંપૂર્ણપણે સમર્થિત છે.

ઉદાહરણ: કસ્ટમ પ્રોપર્ટીઝ સાથે ઘટક બનાવવું

            
:root {
  --btn-padding-y: 0.5rem;
  --btn-padding-x: 1rem;
  --btn-font-size: 1rem;
  --btn-border-radius: 0.25rem;
  --btn-transition: color .15s ease-in-out, background-color .15s ease-in-out;
}

.btn {
  /* Structural styles */
  display: inline-block;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font-size);
  border-radius: var(--btn-border-radius);
  transition: var(--btn-transition);
  cursor: pointer;
  text-align: center;
  border: 1px solid transparent;
}

.btn-primary {
  /* Theming via custom properties */
  --btn-bg: #007bff;
  --btn-color: #ffffff;
  --btn-hover-bg: #0056b3;

  background-color: var(--btn-bg);
  color: var(--btn-color);
}

.btn-primary:hover {
  background-color: var(--btn-hover-bg);
}

.btn-secondary {
  --btn-bg: #6c757d;
  --btn-color: #ffffff;
  --btn-hover-bg: #5a6268;

  background-color: var(--btn-bg);
  color: var(--btn-color);
}

.btn-secondary:hover {
  background-color: var(--btn-hover-bg);
}

            

              
                Copy
              
            
          

આ અભિગમ તમને મૂળ CSS નો ઉપયોગ કરીને થીમ-સક્ષમ, જાળવણી યોગ્ય ઘટકો આપે છે. માળખું .btn માં વ્યાખ્યાયિત થયેલ છે, અને થીમ (જે ભાગ તમે @apply નિયમમાં મૂક્યો હોત) .btn-primary જેવા મોડિફાયર્સ માટે સ્કોપ કરેલ કસ્ટમ પ્રોપર્ટીઝ દ્વારા નિયંત્રિત થાય છે.

વિકલ્પ ૨: યુટિલિટી-ફર્સ્ટ CSS (દા.ત., Tailwind CSS)

Tailwind CSS જેવા યુટિલિટી-ફર્સ્ટ ફ્રેમવર્ક્સે સ્ટાઇલ કમ્પોઝિશનના ખ્યાલને તેના તાર્કિક નિષ્કર્ષ પર લઈ ગયા છે. CSS માં કમ્પોનન્ટ ક્લાસ બનાવવાને બદલે, તમે નાના, એકલ-હેતુવાળા યુટિલિટી ક્લાસનો ઉપયોગ કરીને સીધા તમારા HTML માં સ્ટાઇલ કમ્પોઝ કરો છો.

રસપ્રદ વાત એ છે કે, Tailwind CSS પાસે પોતાનો @apply નિર્દેશ છે. એ સમજવું નિર્ણાયક છે કે આ મૂળ CSS @apply નથી. Tailwind નો @apply એ બિલ્ડ-ટાઇમ સુવિધા છે જે તેની ઇકોસિસ્ટમમાં કામ કરે છે. તે તમારા યુટિલિટી ક્લાસ વાંચે છે અને તેમને સ્ટેટિક CSS માં કમ્પાઇલ કરે છે, મૂળ પ્રસ્તાવની તમામ રનટાઇમ પ્રદર્શન સમસ્યાઓને ટાળે છે.

ઉદાહરણ: Tailwind ના @apply નો ઉપયોગ કરવો

            
/* In your CSS file processed by Tailwind */
.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700;
}

/* In your HTML */
<button class="btn-primary">
  Primary Button
</button>

            

              
                Copy
              
            
          

અહીં, Tailwind નો @apply યુટિલિટી ક્લાસની સૂચિ લે છે અને એક નવો કમ્પોનન્ટ ક્લાસ, .btn-primary બનાવે છે. આ પુનઃઉપયોગી શૈલીઓના સેટ બનાવવાનો સમાન વિકાસકર્તા અનુભવ પ્રદાન કરે છે પરંતુ તે કમ્પાઇલ સમયે સુરક્ષિત રીતે કરે છે.

વિકલ્પ ૩: CSS-in-JS લાઇબ્રેરીઓ

React, Vue, અથવા Svelte જેવા JavaScript ફ્રેમવર્કમાં કામ કરતા ડેવલપર્સ માટે, CSS-in-JS લાઇબ્રેરીઓ (દા.ત., Styled Components, Emotion) સ્ટાઇલ કમ્પોઝિશન પ્રાપ્ત કરવાની બીજી શક્તિશાળી રીત પ્રદાન કરે છે. તેઓ શૈલીઓ બનાવવા માટે JavaScript ના પોતાના કમ્પોઝિશન મોડેલનો ઉપયોગ કરે છે.

ઉદાહરણ: Styled Components (React) માં મિક્સિન

            
import styled, { css } from 'styled-components';

// Define a mixin using a template literal
const buttonBaseStyles = css`
  background-color: #007bff;
  color: #ffffff;
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
`;

// Create a component and apply the mixin
const PrimaryButton = styled.button`
  ${buttonBaseStyles}

  &:hover {
    background-color: #0056b3;
  }
`;

// Another component reusing the same base styles
const SubmitButton = styled.input.attrs({ type: 'submit' })`
  ${buttonBaseStyles}
  margin-top: 1rem;
`;

            

              
                Copy
              
            
          

આ પુનઃઉપયોગી, ગતિશીલ અને સ્કોપ્ડ શૈલીઓ બનાવવા માટે JavaScript ની સંપૂર્ણ શક્તિનો લાભ લે છે, જે કમ્પોનન્ટ-આધારિત પેરાડાઈમમાં DRY સમસ્યાને હલ કરે છે.

વિકલ્પ ૪: CSS પ્રીપ્રોસેસર્સ (Sass, Less)

ચાલો એ સાધનોને ભૂલી ન જઈએ જેણે આ બધું શરૂ કર્યું. Sass અને Less હજુ પણ અત્યંત શક્તિશાળી અને વ્યાપકપણે ઉપયોગમાં લેવાય છે. તેમની મિક્સિન કાર્યક્ષમતા પરિપક્વ, સુવિધા-સમૃદ્ધ (તેઓ દલીલો સ્વીકારી શકે છે), અને સંપૂર્ણપણે વિશ્વસનીય છે કારણ કે, Tailwind ના @apply ની જેમ, તેઓ કમ્પાઇલ સમયે કાર્ય કરે છે.

ઘણા પ્રોજેક્ટ્સ માટે, ખાસ કરીને જે ભારે JavaScript ફ્રેમવર્ક પર બનેલા નથી, પ્રીપ્રોસેસર હજુ પણ જટિલ, પુનઃઉપયોગી શૈલીઓનું સંચાલન કરવાની સૌથી સરળ અને સૌથી અસરકારક રીત છે.

નિષ્કર્ષ: @apply પ્રયોગમાંથી શીખેલા પાઠ

CSS @apply નિયમની વાર્તા વેબ ધોરણોના ઉત્ક્રાંતિમાં એક રસપ્રદ કેસ સ્ટડી છે. તે એક પ્રિય ડેવલપર સુવિધાને મૂળ પ્લેટફોર્મ પર લાવવાનો એક બોલ્ડ પ્રયાસ રજૂ કરે છે. તેનો અંતિમ પાછો ખેંચાવ એ વિચારની નિષ્ફળતા ન હતી પરંતુ CSS વર્કિંગ ગ્રુપની કામગીરી, અનુમાનિતતા અને ભાષાના લાંબા ગાળાના સ્વાસ્થ્ય પ્રત્યેની પ્રતિબદ્ધતાનું પ્રમાણપત્ર હતું.

આજના ડેવલપર્સ માટે મુખ્ય શીખ છે:

• નિયમ સેટ માટે નહીં, પણ મૂલ્યો માટે CSS કસ્ટમ પ્રોપર્ટીઝ અપનાવો. શક્તિશાળી થીમિંગ સિસ્ટમ્સ બનાવવા અને ડિઝાઇન સુસંગતતા જાળવવા માટે તેનો ઉપયોગ કરો.
• કમ્પોઝિશન માટે યોગ્ય સાધન પસંદ કરો. @apply જે સમસ્યા હલ કરવાનો પ્રયાસ કરતું હતું - સ્ટાઇલ કમ્પોઝિશન - તે બિલ્ડ સમયે કાર્યરત સમર્પિત સાધનો (જેમ કે Tailwind CSS અથવા Sass) અથવા ઘટકના સંદર્ભમાં (જેમ કે CSS-in-JS) દ્વારા શ્રેષ્ઠ રીતે હેન્ડલ કરવામાં આવે છે.
• વેબ ધોરણો પાછળનું "શા માટે" સમજો. @apply જેવી સુવિધા શા માટે નકારી કાઢવામાં આવી તે જાણવું આપણને બ્રાઉઝર એન્જિનિયરિંગની જટિલતાઓ અને CSS ના મૂળભૂત સિદ્ધાંતો, જેમ કે કાસ્કેડ, માટે ઊંડી પ્રશંસા આપે છે.

જ્યારે આપણે કદાચ ક્યારેય CSS માં મૂળ @apply નિયમ ન જોઈ શકીએ, તેની ભાવના જીવંત છે. સ્ટાઇલિંગ માટે વધુ મોડ્યુલર, કમ્પોનન્ટ-આધારિત અને DRY અભિગમની ઇચ્છાએ આધુનિક સાધનો અને શ્રેષ્ઠ પદ્ધતિઓને આકાર આપ્યો છે જેનો આપણે દરરોજ ઉપયોગ કરીએ છીએ. વેબ પ્લેટફોર્મ વિકસિત થતું રહે છે, જેમાં CSS નેસ્ટિંગ, @scope, અને કાસ્કેડ લેયર્સ જેવી સુવિધાઓ વધુ સંગઠિત અને જાળવણી યોગ્ય CSS લખવાની નવી, મૂળ રીતો પ્રદાન કરે છે. વધુ સારા સ્ટાઇલિંગ અનુભવ માટેની યાત્રા ચાલુ છે, અને @apply જેવા પ્રયોગોમાંથી શીખેલા પાઠ જ આગળનો માર્ગ મોકળો કરે છે.