അടിസ്ഥാന CSS-ൻ്റെ തത്വങ്ങൾ പഠിക്കുമ്പോൾ, പരിപാലനക്ഷമത ഉറപ്പാക്കാൻ മോഡുലാർ, പുനരുപയോഗിക്കാവുന്ന, വിവരണാത്മക ശൈലികൾ എഴുതാൻ ഒരാളെ പഠിപ്പിക്കുന്നു. എന്നാൽ ഡെവലപ്പർമാർ യഥാർത്ഥ-ലോക ആപ്ലിക്കേഷനുകളുമായി ഇടപഴകുമ്പോൾ, ഉദ്ദേശിക്കാത്ത മേഖലകളിലേക്ക് ശൈലികൾ ചോരാതെ UI സവിശേഷതകൾ ചേർക്കുന്നത് അസാധ്യമാണെന്ന് തോന്നുന്നു. ഈ പ്രശ്നം പലപ്പോഴും സ്നോബോൾ സ്വയം പൂർത്തീകരിക്കുന്ന ലൂപ്പിലേക്ക് മാറുന്നു; ഒരു ഘടകത്തിലേക്കോ ക്ലാസിലേക്കോ സൈദ്ധാന്തികമായി സ്കോപ്പ് ചെയ്തിരിക്കുന്ന ശൈലികൾ അവ ഉൾപ്പെടാത്ത ഇടം കാണിക്കാൻ തുടങ്ങുന്നു. ചോർന്ന ശൈലികൾ അസാധുവാക്കാൻ കൂടുതൽ നിർദ്ദിഷ്ട സെലക്ടറുകൾ സൃഷ്ടിക്കാൻ ഇത് ഡെവലപ്പറെ പ്രേരിപ്പിക്കുന്നു, അത് ആഗോള ശൈലികളെ ആകസ്മികമായി അസാധുവാക്കുന്നു. BEM പോലുള്ള കർശനമായ ക്ലാസ് നാമ കൺവെൻഷനുകൾ ഈ പ്രശ്നത്തിനുള്ള ഒരു സൈദ്ധാന്തിക പരിഹാരമാണ്. BEM (ബ്ലോക്ക്, എലമെൻ്റ്, മോഡിഫയർ) മെത്തഡോളജി എന്നത് CSS ഫയലുകൾക്കുള്ളിൽ പുനരുപയോഗക്ഷമതയും ഘടനയും ഉറപ്പാക്കുന്നതിന് CSS ക്ലാസുകൾക്ക് പേരിടുന്നതിനുള്ള ഒരു ചിട്ടയായ മാർഗമാണ്. മൂലകങ്ങളെയും അവയുടെ അവസ്ഥയെയും വിവരിക്കുന്നതിന് ഡൊമെയ്ൻ ഭാഷ പ്രയോജനപ്പെടുത്തുന്നതിലൂടെ ഇതുപോലുള്ള കൺവെൻഷനുകൾക്ക് കോഗ്നിറ്റീവ് ലോഡ് കുറയ്ക്കാൻ കഴിയും, ശരിയായി നടപ്പിലാക്കുകയാണെങ്കിൽ, വലിയ ആപ്ലിക്കേഷനുകൾക്കുള്ള ശൈലികൾ പരിപാലിക്കുന്നത് എളുപ്പമാക്കാം. എന്നിരുന്നാലും, യഥാർത്ഥ ലോകത്ത്, ഇത് എല്ലായ്പ്പോഴും അങ്ങനെ പ്രവർത്തിക്കില്ല. മുൻഗണനകൾ മാറാം, മാറ്റത്തിനൊപ്പം, നടപ്പാക്കൽ അസ്ഥിരമാകും. HTML ഘടനയിലെ ചെറിയ മാറ്റങ്ങൾക്ക് നിരവധി CSS ക്ലാസ് നാമ പുനരവലോകനങ്ങൾ ആവശ്യമായി വന്നേക്കാം. വളരെ ഇൻ്ററാക്ടീവ് ഫ്രണ്ട്-എൻഡ് ആപ്ലിക്കേഷനുകൾ ഉപയോഗിച്ച്, BEM പാറ്റേൺ പിന്തുടരുന്ന ക്ലാസ് പേരുകൾ ദൈർഘ്യമേറിയതും അനിയന്ത്രിതവുമാകാം (ഉദാ., ആപ്പ്-ഉപയോക്തൃ-അവലോകനം__സ്റ്റാറ്റസ്--ആധികാരികമാണ്), കൂടാതെ പേരിടൽ നിയമങ്ങൾ പൂർണ്ണമായി പാലിക്കാത്തത് സിസ്റ്റത്തിൻ്റെ ഘടനയെ തകർക്കുകയും അതുവഴി അതിൻ്റെ ഗുണങ്ങൾ നിഷേധിക്കുകയും ചെയ്യുന്നു. ഈ വെല്ലുവിളികൾ കണക്കിലെടുക്കുമ്പോൾ, ഡെവലപ്പർമാർ ചട്ടക്കൂടുകളിലേക്ക് തിരിഞ്ഞതിൽ അതിശയിക്കാനില്ല, ടെയിൽവിൻഡ് ഏറ്റവും ജനപ്രിയമായ CSS ചട്ടക്കൂടാണ്. ശൈലികൾക്കിടയിൽ വിജയിക്കാനാവാത്ത സ്പെസിഫിറ്റി യുദ്ധം പോലെ തോന്നുന്നതിനെ ചെറുക്കാൻ ശ്രമിക്കുന്നതിനുപകരം, CSS കാസ്കേഡ് ഉപേക്ഷിച്ച് പൂർണ്ണമായ ഒറ്റപ്പെടൽ ഉറപ്പ് നൽകുന്ന ടൂളുകൾ ഉപയോഗിക്കുന്നത് എളുപ്പമാണ്. ഡവലപ്പർമാർ യൂട്ടിലിറ്റികളിൽ കൂടുതൽ ആശ്രയിക്കുന്നു ചില ഡെവലപ്പർമാർ കാസ്കേഡ് ശൈലികൾ ഒഴിവാക്കാൻ താൽപ്പര്യപ്പെടുന്നുണ്ടെന്ന് നമുക്ക് എങ്ങനെ അറിയാം? CSS-in-JS ഫ്രെയിംവർക്കുകൾ പോലെ - ആ ആവശ്യത്തിനായി പ്രത്യേകം രൂപകൽപ്പന ചെയ്ത "ആധുനിക" ഫ്രണ്ട്-എൻഡ് ടൂളിങ്ങിൻ്റെ ഉയർച്ചയാണിത്. നിർദ്ദിഷ്ട ഘടകങ്ങളിലേക്ക് കർശനമായി സ്കോപ് ചെയ്തിരിക്കുന്ന ഒറ്റപ്പെട്ട ശൈലികളിൽ പ്രവർത്തിക്കുന്നത് ശുദ്ധവായു ശ്വസിക്കുന്നതുപോലെ തോന്നാം. കാര്യങ്ങൾക്ക് പേരിടേണ്ടതിൻ്റെ ആവശ്യകത ഇത് നീക്കംചെയ്യുന്നു - ഇപ്പോഴും ഏറ്റവും വെറുക്കപ്പെടുന്നതും സമയമെടുക്കുന്നതുമായ ഫ്രണ്ട്-എൻഡ് ടാസ്ക്കുകളിൽ ഒന്നാണ് - കൂടാതെ CSS പൈതൃകത്തിൻ്റെ നേട്ടങ്ങൾ പൂർണ്ണമായി മനസ്സിലാക്കുകയോ പ്രയോജനപ്പെടുത്തുകയോ ചെയ്യാതെ ഡെവലപ്പർമാരെ ഉൽപ്പാദനക്ഷമമാക്കാൻ അനുവദിക്കുന്നു. എന്നാൽ CSS കാസ്കേഡ് ഒഴിവാക്കുന്നത് അതിൻ്റേതായ പ്രശ്നങ്ങളോടെയാണ്. ഉദാഹരണത്തിന്, JavaScript-ൽ ശൈലികൾ രചിക്കുന്നതിന് കനത്ത ബിൽഡ് കോൺഫിഗറേഷനുകൾ ആവശ്യമാണ്, പലപ്പോഴും ഘടക മാർക്ക്അപ്പ് അല്ലെങ്കിൽ HTML എന്നിവയുമായി വിചിത്രമായി ഇടകലരുന്ന ശൈലികളിലേക്ക് നയിക്കുന്നു. പേരിടൽ കൺവെൻഷനുകൾ ശ്രദ്ധാപൂർവം പരിഗണിക്കുന്നതിനുപകരം, സെലക്ടറുകളും ഐഡൻ്റിഫയറുകളും സ്വയമേവ സൃഷ്ടിക്കാൻ ഞങ്ങൾ ബിൽഡ് ടൂളുകളെ അനുവദിക്കുന്നു (ഉദാ., .jsx-3130221066), ഡവലപ്പർമാർ അതിൽത്തന്നെ മറ്റൊരു കപട ഭാഷയും നിലനിർത്തേണ്ടതുണ്ട്. (നിങ്ങളുടെ എല്ലാ ഘടകങ്ങളുടെ ഉപയോഗഫലങ്ങളും എന്താണ് ചെയ്യുന്നതെന്ന് മനസിലാക്കാനുള്ള വൈജ്ഞാനിക ഭാരം ഇതിനകം മതിയാകാത്തതുപോലെ!) ഡെവലപ്പർ ടൂളുകൾ പോലുള്ള തത്സമയ ഡീബഗ്ഗിംഗിനെ പിന്തുണയ്ക്കുന്ന നേറ്റീവ് ബ്രൗസർ സവിശേഷതകൾ പ്രയോജനപ്പെടുത്തുന്നതിനുപകരം, അടിസ്ഥാന ഡീബഗ്ഗിംഗ് പലപ്പോഴും വികസനത്തിനായി സമാഹരിച്ച നിർദ്ദിഷ്ട ആപ്ലിക്കേഷൻ പതിപ്പുകളിലേക്ക് പരിമിതപ്പെടുത്തിയിരിക്കുന്നു എന്നാണ് അർത്ഥമാക്കുന്നത്. സാധാരണ CSS എഴുതുന്നതിലെ "വേദനയിൽ" നിന്ന് ഓടിപ്പോവാൻ വേണ്ടി - വെബ് ഇതിനകം നൽകുന്നതിനെ സംഗ്രഹിക്കാൻ ഞങ്ങൾ ഉപയോഗിക്കുന്ന ടൂളുകൾ ഡീബഗ് ചെയ്യാനുള്ള ടൂളുകൾ വികസിപ്പിക്കേണ്ടത് ഏതാണ്ട് പോലെയാണ്. ഭാഗ്യവശാൽ, ആധുനിക CSS സവിശേഷതകൾ എഴുത്ത് സ്റ്റാൻഡേർഡ് CSS കൂടുതൽ അയവുള്ളതാക്കുക മാത്രമല്ല, ഞങ്ങളെപ്പോലുള്ള ഡവലപ്പർമാർക്ക് കാസ്കേഡ് കൈകാര്യം ചെയ്യാനും അത് ഞങ്ങൾക്ക് വേണ്ടി പ്രവർത്തിക്കാനും കൂടുതൽ ശക്തി നൽകുന്നു. CSS കാസ്കേഡ് ലെയറുകൾ ഒരു മികച്ച ഉദാഹരണമാണ്, എന്നാൽ ആശ്ചര്യപ്പെടുത്തുന്ന ശ്രദ്ധക്കുറവ് ലഭിക്കുന്ന മറ്റൊരു സവിശേഷതയുണ്ട് - അത് അടുത്തിടെ ബേസ്ലൈൻ അനുയോജ്യമായി മാറിയതിനാൽ ഇപ്പോൾ അത് മാറിക്കൊണ്ടിരിക്കുകയാണ്. CSS @സ്കോപ്പ് അറ്റ്-റൂൾ ഞങ്ങൾ കവർ ചെയ്തിരിക്കുന്ന സ്റ്റൈൽ-ലീക്ക്-ഇൻഡ്യൂസ്ഡ് ഉത്കണ്ഠയ്ക്കുള്ള ഒരു പ്രതിവിധിയായി ഞാൻ CSS @scope at-rule കണക്കാക്കുന്നു, അബ്സ്ട്രാക്ഷനുകൾക്കും അധിക ബിൽഡ് ടൂളിംഗിനുമായി നേറ്റീവ് വെബ് നേട്ടങ്ങളിൽ വിട്ടുവീഴ്ച ചെയ്യാൻ ഞങ്ങളെ നിർബന്ധിക്കാത്ത ഒന്ന്. "നിർദ്ദിഷ്ട DOM സബ്ട്രീകളിലെ ഘടകങ്ങൾ തിരഞ്ഞെടുക്കാൻ @scope CSS അറ്റ്-റൂൾ നിങ്ങളെ പ്രാപ്തമാക്കുന്നു, അസാധുവാക്കാൻ പ്രയാസമുള്ള അമിത-നിർദ്ദിഷ്ട സെലക്ടറുകൾ എഴുതാതെയും നിങ്ങളുടെ സെലക്ടർമാരെ DOM ഘടനയുമായി വളരെ കർശനമായി ബന്ധിപ്പിക്കാതെയും ഘടകങ്ങൾ കൃത്യമായി ടാർഗെറ്റുചെയ്യുന്നു."- MDN
മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, അനന്തരാവകാശം, കാസ്കേഡിംഗ് അല്ലെങ്കിൽ ആശങ്കകളുടെ അടിസ്ഥാനപരമായ വേർതിരിവ് പോലും ത്യജിക്കാതെ, പ്രത്യേക സന്ദർഭങ്ങളിൽ ഒറ്റപ്പെട്ട ശൈലികളിൽ നമുക്ക് പ്രവർത്തിക്കാൻ കഴിയും.ഫ്രണ്ട് എൻഡ് വികസനത്തിൻ്റെ ദീർഘകാല മാർഗ്ഗനിർദ്ദേശ തത്വമാണ് അത്. കൂടാതെ, ഇതിന് മികച്ച ബ്രൗസർ കവറേജ് ഉണ്ട്. വാസ്തവത്തിൽ, ഫയർഫോക്സ് 146 ഡിസംബറിൽ @സ്കോപ്പിനുള്ള പിന്തുണ ചേർത്തു, ഇത് ആദ്യമായി ബേസ്ലൈൻ അനുയോജ്യമാക്കുന്നു. ബിഇഎം പാറ്റേൺ ഉപയോഗിക്കുന്ന ബട്ടണും @സ്കോപ്പ് റൂളും തമ്മിലുള്ള ലളിതമായ താരതമ്യം ഇതാ:
<ശൈലി> .button .button__text { /* ബട്ടൺ ടെക്സ്റ്റ് ശൈലികൾ */} .button .button__icon { /* ബട്ടൺ ഐക്കൺ ശൈലികൾ */} .button--primary {primary button styles */}
<ശൈലി> @സ്കോപ്പ് (.primary-button) { span:fist-child { /* ബട്ടൺ ടെക്സ്റ്റ് ശൈലികൾ */} span:last-child { /* ബട്ടൺ ഐക്കൺ ശൈലികൾ */} }
@സ്കോപ്പ് റൂൾ കുറച്ച് സങ്കീർണ്ണതയോടെ കൃത്യത അനുവദിക്കുന്നു. ഡെവലപ്പർക്ക് ഇനി ക്ലാസ് നാമങ്ങൾ ഉപയോഗിച്ച് അതിരുകൾ സൃഷ്ടിക്കേണ്ടതില്ല, അതാകട്ടെ, നേറ്റീവ് HTML ഘടകങ്ങളെ അടിസ്ഥാനമാക്കി സെലക്ടറുകൾ എഴുതാൻ അവരെ അനുവദിക്കുന്നു, അതുവഴി പ്രിസ്ക്രിപ്റ്റീവ് CSS ക്ലാസ് നെയിം പാറ്റേണുകളുടെ ആവശ്യകത ഇല്ലാതാക്കുന്നു. ക്ലാസ് നെയിം മാനേജ്മെൻ്റിൻ്റെ ആവശ്യം നീക്കം ചെയ്യുന്നതിലൂടെ, വലിയ പ്രോജക്റ്റുകളിൽ CSS-മായി ബന്ധപ്പെട്ട ഭയം ഇല്ലാതാക്കാൻ @scope-ന് കഴിയും.
അടിസ്ഥാന ഉപയോഗം
ആരംഭിക്കുന്നതിന്, നിങ്ങളുടെ CSS-ലേക്ക് @സ്കോപ്പ് റൂൾ ചേർക്കുകയും സ്റ്റൈലുകൾ സ്കോപ്പ് ചെയ്യേണ്ട ഒരു റൂട്ട് സെലക്ടർ ചേർക്കുകയും ചെയ്യുക:
@scope (
അതിനാൽ, ഉദാഹരണത്തിന്, ഞങ്ങൾ ഒരു
@സ്കോപ്പ് (നാവ്) { nav സ്കോപ്പിനുള്ളിലെ ഒരു { /* ലിങ്ക് ശൈലികൾ */}
a:സജീവമായ { /* സജീവ ലിങ്ക് ശൈലികൾ */}
a:active:: മുമ്പേ { /* അധിക സ്റ്റൈലിങ്ങിനായി വ്യാജ ഘടകത്തോടുകൂടിയ സജീവ ലിങ്ക് */}
@media (പരമാവധി വീതി: 768px) { ഒരു { /* പ്രതികരണ ക്രമീകരണങ്ങൾ */} } }
ഇത്, സ്വന്തം നിലയിൽ, ഒരു തകർപ്പൻ സവിശേഷതയല്ല. എന്നിരുന്നാലും, സ്കോപ്പിൻ്റെ ആരംഭ, അവസാന പോയിൻ്റുകൾ ഫലപ്രദമായി നിർവചിച്ച് താഴ്ന്ന അതിർത്തി സൃഷ്ടിക്കുന്നതിന് സ്കോപ്പിലേക്ക് രണ്ടാമത്തെ ആർഗ്യുമെൻ്റ് ചേർക്കാം.
/* ul ഉള്ളിലെ ഏതെങ്കിലും ഘടകത്തിന് ശൈലികൾ പ്രയോഗിക്കില്ല */ @സ്കോപ്പ് (നാവ്) മുതൽ (ഉൾ) { ഒരു { ഫോണ്ട് വലുപ്പം: 14px; } }
ഈ സമ്പ്രദായത്തെ ഡോനട്ട് സ്കോപ്പിംഗ് എന്ന് വിളിക്കുന്നു, കൂടാതെ DOM ഘടനയുമായി ദൃഢമായി ഘടിപ്പിച്ചിരിക്കുന്ന സമാനമായ, വളരെ നിർദ്ദിഷ്ട സെലക്ടറുകളുടെ ഒരു പരമ്പര, ഒരു :അല്ല കപട-സെലക്ടർ, അല്ലെങ്കിൽ വ്യത്യസ്തമായ CSS കൈകാര്യം ചെയ്യുന്നതിനായി ഘടകങ്ങൾക്ക് നിർദ്ദിഷ്ട ക്ലാസ് പേരുകൾ നൽകുന്നത് ഉൾപ്പെടെ നിരവധി സമീപനങ്ങളുണ്ട്. മറ്റ് സമീപനങ്ങൾ പരിഗണിക്കാതെ തന്നെ, @സ്കോപ്പ് രീതി കൂടുതൽ സംക്ഷിപ്തമാണ്. കൂടുതൽ പ്രധാനമായി, ക്ലാസ് നാമങ്ങൾ മാറുകയോ ദുരുപയോഗം ചെയ്യുകയോ അല്ലെങ്കിൽ HTML ഘടന പരിഷ്കരിക്കുകയോ ചെയ്താൽ തകർന്ന ശൈലികളുടെ അപകടസാധ്യത ഇത് തടയുന്നു. ഇപ്പോൾ @സ്കോപ്പ് ബേസ്ലൈൻ അനുയോജ്യമാണ്, ഞങ്ങൾക്ക് ഇനി പരിഹാരങ്ങൾ ആവശ്യമില്ല! "സ്റ്റൈൽ ഫിഗർ എട്ട്" സൃഷ്ടിക്കുന്നതിന് ഒന്നിലധികം അന്തിമ അതിരുകൾ ഉപയോഗിച്ച് നമുക്ക് ഈ ആശയം മുന്നോട്ട് കൊണ്ടുപോകാം:
ഉപസംഹാരം Tailwind പോലുള്ള യൂട്ടിലിറ്റി-ആദ്യ CSS ചട്ടക്കൂടുകൾ, പ്രോട്ടോടൈപ്പിംഗിനും ചെറിയ പ്രോജക്ടുകൾക്കും നന്നായി പ്രവർത്തിക്കുന്നു. എന്നിരുന്നാലും, ഒന്നിലധികം ഡവലപ്പർമാർ ഉൾപ്പെടുന്ന വലിയ പ്രോജക്റ്റുകളിൽ ഉപയോഗിക്കുമ്പോൾ അവയുടെ പ്രയോജനങ്ങൾ പെട്ടെന്ന് കുറയുന്നു. ഫ്രണ്ട് എൻഡ് വികസനം കഴിഞ്ഞ കുറച്ച് വർഷങ്ങളായി കൂടുതൽ സങ്കീർണ്ണമായിരിക്കുന്നു, കൂടാതെ CSS ഒരു അപവാദമല്ല. @സ്കോപ്പ് റൂൾ ഒരു പ്രതിവിധി അല്ലെങ്കിലും, സങ്കീർണ്ണമായ ഉപകരണങ്ങളുടെ ആവശ്യകത കുറയ്ക്കാൻ ഇതിന് കഴിയും. സ്ട്രാറ്റജിക് ക്ലാസ് നാമകരണത്തിന് പകരം അല്ലെങ്കിൽ അതിനോടൊപ്പം ഉപയോഗിക്കുമ്പോൾ, പരിപാലിക്കാൻ കഴിയുന്ന CSS എഴുതുന്നത് എളുപ്പവും രസകരവുമാക്കാൻ @scope-ന് കഴിയും. കൂടുതൽ വായന
CSS @scope (MDN) “CSS @സ്കോപ്പ്”, ജുവാൻ ഡീഗോ റോഡ്രിഗസ് (CSS-തന്ത്രങ്ങൾ) ഫയർഫോക്സ് 146 റിലീസ് നോട്ടുകൾ (ഫയർഫോക്സ്) ബ്രൗസർ പിന്തുണ (CanIUse) ജനപ്രിയ CSS ചട്ടക്കൂടുകൾ (CSS 2024-ൻ്റെ അവസ്ഥ) CSS-ലെ "C": കാസ്കേഡ്", തോമസ് യിപ്പ് (CSS-തന്ത്രങ്ങൾ) BEM ആമുഖം (BEM നേടുക)
