css tags

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ്

Posted on by Rajesh Odayanchal
ആധുനിക വെബ് ഡെവലപ്‌മെന്റ് രംഗത്ത് ഒരു നിർണായക സ്വാധീനം ചെലുത്തിക്കൊണ്ടിരിക്കുന്ന യൂട്ടിലിറ്റി-ഫസ്റ്റ് സി‌എസ്‌എസ് ഫ്രെയിംവർക്കായ ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിനെക്കുറിച്ച് പറയാമെന്നു കരുതുന്നു. ഇതിന്റെ അടിസ്ഥാന തത്വങ്ങൾ, സവിശേഷതകൾ, ചരിത്രപരമായ വികാസം, വകഭേദങ്ങൾ, ഗുണദോഷങ്ങൾ, മറ്റ് ഫ്രെയിംവർക്കുകളുമായുള്ള താരതമ്യം  തുടങ്ങി ഒട്ടേറെ കാര്യങ്ങൾ ശ്രദ്ധിച്ചാൽ വെബ് ഡവലപ്പ്മെന്റ് രംഗത്ത് ഈ ഒരു ഫ്രെയിംവർക്കിനുള്ള പ്രാധാന്യം മനസ്സിലാവും.

വെബ് ആപ്ലിക്കേഷനുകളുടെ സങ്കീർണ്ണത വർദ്ധിക്കുന്നതിനനുസരിച്ച്, കാര്യക്ഷമവും പുനരുപയോഗിക്കാവുന്നതുമായ സി‌എസ്‌എസ് കോഡ് എഴുതേണ്ടതിന്റെ ആവശ്യകത വർദ്ധിച്ചു. സി‌എസ്‌എസ് ഫ്രെയിംവർക്കുകൾ ഈ വെല്ലുവിളികളെ നേരിടാൻ സഹായിക്കുന്ന, മുൻകൂട്ടി നിർവചിച്ച ശൈലികളും ഘടകങ്ങളും നൽകുന്നു. ഇവ വികസന സമയം കുറയ്ക്കാനും ഡിസൈൻ കൺസിസ്റ്റൻസി ഉറപ്പാക്കാനും സഹായിക്കുന്നു. “യൂട്ടിലിറ്റി-ഫസ്റ്റ്” എന്ന സമീപനത്തിനും “വേഗതയേറിയ വികസനം” എന്നതിനും ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് നൽകുന്ന പ്രാധാന്യം, പരമ്പരാഗത സി‌എസ്‌എസ് രീതികളിലും നിലവിലുള്ള ഘടക-അധിഷ്ഠിത ഫ്രെയിംവർക്കുകളിലും ഉണ്ടായിരുന്ന പരിമിതികൾക്കും കാര്യക്ഷമതയില്ലായ്മകൾക്കും ഒരു നേരിട്ടുള്ള പ്രതികരണമായി ഈ ഫ്രെയിംവർക്ക് ഉയർന്നുവന്നു എന്ന് സൂചിപ്പിക്കുന്നു. ഇത് യൂസർ ഇന്റർഫേസ് (UI) വികസനത്തിൽ കൂടുതൽ സൂക്ഷ്മമായ നിയന്ത്രണവും വേഗതയേറിയ ആവർത്തനവും ആവശ്യപ്പെടുന്ന ഒരു വലിയ വ്യവസായ പ്രവണതയെയാണ് പ്രതിനിധീകരിക്കുന്നത്.  

വിവിധ സി‌എസ്‌എസ് ഫ്രെയിംവർക്കുകളുടെ (ടെയിൽ‌വിൻഡ് പോലുള്ള യൂട്ടിലിറ്റി-ഫസ്റ്റ്, ബൂട്ട്സ്ട്രാപ്പ്/ബുൾമ പോലുള്ള ഘടക-അധിഷ്ഠിത) നിലനിൽപ്പ്, ഫ്രണ്ട്-എൻഡ് വികസനത്തിലെ ഒരു അടിസ്ഥാനപരമായ സംഘർഷത്തെയാണ് സൂചിപ്പിക്കുന്നത്: സജ്ജീകരണത്തിന്റെ വേഗതയും (മുൻകൂട്ടി നിർമ്മിച്ച ഘടകങ്ങൾ) ഡിസൈൻ വഴക്കവും കസ്റ്റമൈസേഷൻ സാധ്യതകളും തമ്മിലുള്ള വിട്ടുവീഴ്ച. ടെയിൽ‌വിൻഡിന്റെ വളർച്ച, ആദ്യകാല പഠനത്തിന് കൂടുതൽ സമയം ആവശ്യമാണെങ്കിൽ പോലും, ഡിസൈൻ വഴക്കത്തിനുള്ള വർദ്ധിച്ചുവരുന്ന മുൻഗണനയെയാണ് കാണിക്കുന്നത്. ഡെവലപ്പർമാർക്ക് സ്വന്തം ഡിസൈനുകൾക്ക് മേൽ പൂർണ്ണ നിയന്ത്രണം ലഭിക്കുന്നതിനായി, മുൻകൂട്ടി നിർവചിച്ച ശൈലികൾ ഓവർറൈഡ് ചെയ്യേണ്ട ബുദ്ധിമുട്ടുകൾ ഒഴിവാക്കാൻ, കൂടുതൽ അറ്റോമിക്, കോമ്പോസബിൾ സ്റ്റൈലിംഗ് സമീപനങ്ങളിലേക്ക് മാറാൻ തയ്യാറാണ്.undefined

എന്താണ് ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ്?

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് ഒരു യൂട്ടിലിറ്റി-ഫസ്റ്റ് സി‌എസ്‌എസ് ഫ്രെയിംവർക്കാണ്. ഇത് ഡെവലപ്പർമാരെ അവരുടെ വെബ്‌സൈറ്റുകൾക്ക് സ്റ്റൈൽ നൽകുന്നതിന്, കോൺസൈസ് യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിച്ച് നേരിട്ട് HTML-ൽ പ്രവർത്തിക്കാൻ അനുവദിക്കുന്നു. ഓരോ ക്ലാസും ഒരു പ്രത്യേക സി‌എസ്‌എസ് പ്രോപ്പർട്ടിക്ക് ഒരു ചെറിയ രൂപം നൽകുന്നു. ഉദാഹരണത്തിന്,  

p-4 എന്നത് padding: 1rem; എന്നതിനെയും text-center എന്നത് text-align: center; എന്നതിനെയും സൂചിപ്പിക്കുന്നു.  

പരമ്പരാഗത സി‌എസ്‌എസിൽ നിന്ന് വ്യത്യസ്തമായി, ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് ഓരോ ഘടകത്തിനും കസ്റ്റം ശൈലികൾ എഴുതേണ്ടതിന്റെ ആവശ്യം ഇല്ലാതാക്കി വേഗതയേറിയ വികസനം പ്രോത്സാഹിപ്പിക്കുന്നു. ബൂട്ട്സ്ട്രാപ്പ് പോലുള്ള ഘടക-അധിഷ്ഠിത ഫ്രെയിംവർക്കുകൾ മുൻകൂട്ടി നിർമ്മിച്ച ഘടകങ്ങൾ (ബട്ടണുകൾ, നാവിഗേഷൻ ബാറുകൾ) നൽകുമ്പോൾ, ടെയിൽ‌വിൻഡ് താഴ്ന്ന തലത്തിലുള്ള യൂട്ടിലിറ്റി ക്ലാസുകൾ നൽകുന്നു, ഇത് ഡെവലപ്പർമാർക്ക് പൂർണ്ണമായ ഡിസൈൻ നിയന്ത്രണം നൽകുന്നു. “യൂട്ടിലിറ്റി-ഫസ്റ്റ്” എന്ന ഈ സമീപനം സി‌എസ്‌എസ് വികസനത്തിന്റെ അടിസ്ഥാനപരമായ ചിന്താ പ്രക്രിയയെ മാറ്റുന്നു. ഇത് “ഈ ഘടകം എന്താണ്?” എന്നതിൽ നിന്ന് “ഈ ഘടകത്തിന് എന്ത് ശൈലികളാണ് വേണ്ടത്?” എന്നതിലേക്ക് മാറുന്നു. ഈ സൂക്ഷ്മമായ നിയന്ത്രണം നിലവിലുള്ള ഫ്രെയിംവർക്കുകളുടെ “അഭിപ്രായങ്ങളോട് പോരാടേണ്ട” അവസ്ഥയെയും “ബൂട്ട്സ്ട്രാപ്പ് ആപ്പ് പോലെ തോന്നിക്കുന്ന” പ്രശ്നങ്ങളെയും നേരിട്ട് അഭിസംബോധന ചെയ്യുന്നു. ഇത് ഡെവലപ്പർമാർക്ക് സമാനതകളില്ലാത്ത ഡിസൈൻ സ്വാതന്ത്ര്യം നൽകുന്നു, കസ്റ്റം സി‌എസ്‌എസ് ഫയലുകൾ എഴുതേണ്ടതിന്റെ ആവശ്യം ഇല്ലാതാക്കുന്നു.  

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് HTML ഫയലുകൾ, ജാവാസ്ക്രിപ്റ്റ് ഘടകങ്ങൾ, മറ്റ് ടെംപ്ലേറ്റുകൾ എന്നിവയിൽ നിന്ന് ക്ലാസ് പേരുകൾ സ്കാൻ ചെയ്ത്, അനുബന്ധ ശൈലികൾ ഒരു സ്റ്റാറ്റിക് സി‌എസ്‌എസ് ഫയലിലേക്ക് സൃഷ്ടിച്ച് എഴുതുന്നു. ഇത് വേഗതയേറിയതും വഴക്കമുള്ളതും വിശ്വസനീയവുമായ ഒരു പരിഹാരമാണ്.  

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ്, Preflight എന്ന പേരിൽ ഒരു കൂട്ടം അടിസ്ഥാന ശൈലികൾ ഉൾക്കൊള്ളുന്നു. വിവിധ ബ്രൗസറുകളിലുടനീളമുള്ള ശൈലിപരമായ പൊരുത്തക്കേടുകൾ പരിഹരിക്കുകയും സ്ഥിരമായ ഒരു അടിസ്ഥാനം നൽകുകയും ചെയ്യുക എന്നതാണ് ഇതിന്റെ ലക്ഷ്യം. ഇത് സാധാരണയായി ഉപയോഗിക്കുന്ന സി‌എസ്‌എസ് പ്രോപ്പർട്ടികൾക്ക് ഒരു സ്ഥിരമായ സ്റ്റാർട്ടിംഗ് പോയിന്റ് നൽകി ഡെവലപ്പർമാർക്ക് ഒരു ക്ലീൻ സ്ലേറ്റ് ഉറപ്പാക്കുന്നു.  

Preflight ഉൾപ്പെടുത്തുന്നത്, ടെയിൽ‌വിൻഡിന്റെ ക്രോസ്-ബ്രൗസർ സ്ഥിരതയോടുള്ള പ്രായോഗിക സമീപനത്തെ വെളിപ്പെടുത്തുന്നു. ഇത് യൂട്ടിലിറ്റി-ഫസ്റ്റ് രീതിയെ പിന്തുണയ്ക്കുമ്പോൾ തന്നെ, ഒരു റീസെറ്റ്/നോർമലൈസ് ലെയറിന്റെ അടിസ്ഥാനപരമായ ആവശ്യകതയെ അംഗീകരിക്കുന്നു. ഇത് പൂർണ്ണമായ നിയന്ത്രണവും ആവശ്യമായ നിലവാരവും തമ്മിലുള്ള ഒരു സന്തുലിതാവസ്ഥയെയാണ് കാണിക്കുന്നത്. ബ്രൗസറുകൾ തമ്മിലുള്ള വ്യത്യാസങ്ങൾ വെബ് വികസനത്തിലെ ഒരു പ്രധാന പ്രശ്നമാണ്. ഒരു അടിസ്ഥാനമില്ലാതെ, ഡെവലപ്പർമാർക്ക് സ്വന്തം യൂട്ടിലിറ്റി ക്ലാസുകൾ പ്രയോഗിക്കുന്നതിന് മുമ്പ് ബ്രൗസറുകളുടെ ഡിഫോൾട്ട് ശൈലികൾ സാധാരണവൽക്കരിക്കാൻ ഗണ്യമായ സമയം ചെലവഴിക്കേണ്ടി വരും. Preflight ഈ പൊതുവായ, ഒഴിവാക്കാനാവാത്ത പ്രശ്നത്തെ അടിസ്ഥാന തലത്തിൽ പരിഹരിക്കുന്നു, ഇത് ഡെവലപ്പർമാരെ ബ്രൗസർ ഡിഫോൾട്ടുകളോട് പോരാടുന്നതിനു പകരം യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിച്ച് ഡിസൈൻ രചനയിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കാൻ അനുവദിക്കുന്നു. ഇത് വികസനത്തിന്റെ തുടക്കം കാര്യക്ഷമമാക്കാനുള്ള ഒരു തന്ത്രപരമായ തീരുമാനമാണ്.

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിന്റെ ഉത്ഭവവും ചരിത്രവും

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിന്റെ സ്രഷ്ടാവ് ആദം വാതൻ ആണ്. ഒരു ഫുൾ-സ്റ്റാക്ക് ഡെവലപ്പറും സംരംഭകനുമായ വാതൻ, നിലവിലുള്ള സി‌എസ്‌എസ് ഫ്രെയിംവർക്കുകളോടുള്ള സ്വന്തം നിരാശയിൽ നിന്നാണ് ഈ ഫ്രെയിംവർക്ക് വികസിപ്പിച്ചത്. “എനിക്ക് നിലവിലുള്ള സി‌എസ്‌എസ് ഫ്രെയിംവർക്കുകളുമായുള്ള എന്റെ സ്വന്തം നിരാശയിൽ നിന്നാണ് ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് പിറന്നത്,” എന്ന് അദ്ദേഹം പറയുന്നു. ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിന്റെ ഉത്ഭവം, ആദം വാതന്റെ സി‌എസ്‌എസ് പരിപാലനക്ഷമതയെക്കുറിച്ചുള്ള വ്യക്തിപരമായ പ്രശ്നങ്ങളിൽ നിന്ന് ഉടലെടുത്തതാണ്. ഇത് സോഫ്റ്റ്‌വെയർ നവീകരണത്തിലെ ഒരു സാധാരണ മാതൃകയെ എടുത്തു കാണിക്കുന്നു: ഡെവലപ്പർമാർ സ്വന്തം പ്രശ്നങ്ങൾ പരിഹരിക്കുമ്പോൾ പലപ്പോഴും പുതിയ പരിഹാരങ്ങൾ ഉയർന്നുവരുന്നു. ഈ “ആകസ്മികമായ ഫ്രെയിംവർക്ക്” എന്ന വിവരണം, അതിന്റെ യൂട്ടിലിറ്റി-ഫസ്റ്റ് സമീപനത്തിന് ആധികാരികതയും വിശ്വാസ്യതയും നൽകുന്നു, കാരണം ഇത് ഒരു പ്രൊഫഷണൽ, പ്രൊഫഷണലുകൾക്കായി രൂപകൽപ്പന ചെയ്തതാണ്.  

2017-ൽ, വാതൻ KiteTail എന്ന ഒരു സൈഡ് പ്രോജക്റ്റിൽ പ്രവർത്തിക്കുമ്പോൾ സി‌എസ്‌എസ് ആർക്കിടെക്ചറിലെ വെല്ലുവിളികളുമായി മല്ലിടുകയായിരുന്നു. “വർഷങ്ങളോളം നിലനിർത്താൻ കഴിയുന്ന ഒരു സി‌എസ്‌എസ് സമീപനം കണ്ടെത്താൻ ഞാൻ ശ്രമിക്കുകയായിരുന്നു,” എന്ന് അദ്ദേഹം വിശദീകരിക്കുന്നു. ഈ അന്വേഷണമാണ് ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിന്റെ ആകസ്മികമായ പിറവിക്ക് കാരണമായത്. 2017-ലെ ഹാലോവീൻ രാത്രിയിലാണ് ഇത് പുറത്തിറങ്ങിയത്. വാതൻ തന്റെ സി‌എസ്‌എസ് പരിപാലന പ്രശ്നങ്ങൾക്ക് ഒരു പരിഹാരം തേടിയതുകൊണ്ടാണ് ടെയിൽ‌വിൻഡ് രൂപകൽപ്പന ചെയ്തത്. ഇത് അദ്ദേഹത്തിന്റെ വ്യക്തിപരമായ പ്രശ്നം പരിഹരിക്കുന്നതിലൂടെ, അതിന്റെ പ്രധാന രൂപകൽപ്പന (യൂട്ടിലിറ്റി-ഫസ്റ്റ്, സൂക്ഷ്മമായ നിയന്ത്രണം) മറ്റ് ഡെവലപ്പർമാരുടെ പൊതുവായ പ്രശ്നങ്ങളെ നേരിട്ട് അഭിസംബോധന ചെയ്യാൻ സഹായിച്ചു. ഇത് അതിന്റെ ദ്രുതഗതിയിലുള്ള സ്വീകാര്യതയ്ക്ക് കാരണമായി, കാരണം മറ്റ് ഡെവലപ്പർമാരും സമാനമായ പ്രശ്നങ്ങളുമായി മല്ലിട്ടിരുന്നു.  

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിന്റെ ചരിത്രത്തിലെ ഒരു പ്രധാന നാഴികക്കല്ലാണ് JIT (Just-In-Time) മോഡിന്റെ ആവിർഭാവം. ഇത് v2.1 പതിപ്പിന്റെ ഭാഗമായി 2021 ഏപ്രിൽ 5-ന് പുറത്തിറങ്ങി. JIT മോഡിന്റെ പ്രധാന സവിശേഷതകൾ താഴെ പറയുന്നവയാണ്:  

  • മിന്നൽ വേഗതയുള്ള ബിൽഡ് ടൈംസ്: വലിയ സി‌എസ്‌എസ് ഫയലുകൾ കൈകാര്യം ചെയ്യുമ്പോൾ വെബ്‌പാക്ക് പോലുള്ള ബിൽഡ് ടൂളുകൾക്ക് 30-45 സെക്കൻഡ് വരെ എടുത്തിരുന്നിടത്ത്, JIT മോഡ് വലിയ പ്രോജക്റ്റുകളെ ഏകദേശം 800ms-ൽ കംപൈൽ ചെയ്യാനും ഇൻക്രിമെന്റൽ റീബിൽഡുകൾ 3ms പോലെ വേഗത്തിലാക്കാനും സഹായിക്കുന്നു.  
  • എല്ലാ വകഭേദങ്ങളും ഡിഫോൾട്ടായി പ്രവർത്തനക്ഷമം: ഫയൽ വലുപ്പം കാരണം സാധാരണയായി പ്രവർത്തനക്ഷമമല്ലാത്ത focus-visible, active, disabled പോലുള്ള വകഭേദങ്ങൾ JIT മോഡിൽ ഓൺ-ഡിമാൻഡ് ശൈലികൾ സൃഷ്ടിക്കുന്നതിനാൽ എളുപ്പത്തിൽ ഉപയോഗിക്കാം. ഇത് വകഭേദങ്ങൾ കോൺഫിഗർ ചെയ്യേണ്ടതിന്റെ ആവശ്യം ഇല്ലാതാക്കുന്നു.  
  • കസ്റ്റം സി‌എസ്‌എസ് എഴുതാതെ തന്നെ ആർബിട്രറി ശൈലികൾ സൃഷ്ടിക്കാനുള്ള കഴിവ്: top-[-113px] പോലുള്ള അൾട്രാ-സ്പെസിഫിക് മൂല്യങ്ങൾ സ്ക്വയർ ബ്രാക്കറ്റ് നൊട്ടേഷൻ ഉപയോഗിച്ച് ഓൺ-ഡിമാൻഡ് യൂട്ടിലിറ്റികളായി സൃഷ്ടിക്കാൻ JIT മോഡ് അനുവദിക്കുന്നു.  
  • ഡെവലപ്‌മെന്റിലും പ്രൊഡക്ഷനിലും ഒരേ സി‌എസ്‌എസ്: ശൈലികൾ ആവശ്യാനുസരണം സൃഷ്ടിക്കപ്പെടുന്നതിനാൽ, പ്രൊഡക്ഷനുവേണ്ടി ഉപയോഗിക്കാത്ത ശൈലികൾ നീക്കം ചെയ്യേണ്ട ആവശ്യമില്ല (PurgeCSS). ഇത് എല്ലാ പരിതസ്ഥിതികളിലും ഒരേ സി‌എസ്‌എസ് ഉറപ്പാക്കുന്നു.  

JIT മോഡിന്റെ ആമുഖം, മുൻപത്തെ ടെയിൽ‌വിൻഡ് പതിപ്പുകളുടെ പ്രധാന പരിമിതികളെ, പ്രത്യേകിച്ച് ബിൽഡ് പ്രകടനത്തെയും വകഭേദങ്ങൾ വ്യക്തമായി കോൺഫിഗർ ചെയ്യേണ്ടതിന്റെ ആവശ്യകതയെയും നേരിട്ട് അഭിസംബോധന ചെയ്യുന്ന ഒരു നിർണായക പരിണാമപരമായ ചുവടുവെപ്പാണ്. എല്ലാ സാധ്യമായ ശൈലികളും മുൻകൂട്ടി സൃഷ്ടിക്കുന്നതിൽ നിന്ന് ആവശ്യാനുസരണം സൃഷ്ടിക്കുന്നതിലേക്കുള്ള ഈ മാറ്റം, ഡെവലപ്പർമാരുടെ പ്രതികരണങ്ങളോടുള്ള സജീവമായ പ്രതികരണത്തെയും ഡെവലപ്പർ അനുഭവവും പ്രകടനവും ഒപ്റ്റിമൈസ് ചെയ്യാനുള്ള പ്രതിബദ്ധതയെയും സൂചിപ്പിക്കുന്നു. JIT-ന് മുമ്പ്, ടെയിൽ‌വിൻഡ് ഉപയോഗിക്കാത്ത യൂട്ടിലിറ്റി ക്ലാസുകളും വകഭേദങ്ങളും ഉൾപ്പെടെയുള്ള ഒരു വലിയ സി‌എസ്‌എസ് ഫയൽ സൃഷ്ടിക്കുമായിരുന്നു. ഇത് കംപൈലേഷൻ സമയത്തെ മന്ദഗതിയിലാക്കുകയും (പ്രത്യേകിച്ച് വെബ്‌പാക്ക് പ്രോജക്റ്റുകളിൽ) വലിയ ഡെവലപ്‌മെന്റ് ബിൽഡുകൾക്ക് കാരണമാവുകയും ചെയ്യുമായിരുന്നു. JIT മോഡിന്റെ “ഓൺ-ഡിമാൻഡ് ജനറേഷൻ” ഈ പ്രശ്നം പരിഹരിച്ചു, ഇത് ഉൽപ്പാദന ബിൽഡുകളിൽ ഉപയോഗിക്കുന്ന ശൈലികൾ മാത്രം ഉൾപ്പെടുത്തുന്നു. ഇത് ഡെവലപ്‌മെന്റ് സമയത്ത് PurgeCSS-ന്റെ ആവശ്യം ഇല്ലാതാക്കുകയും വകഭേദങ്ങളുടെ കോൺഫിഗറേഷൻ ലളിതമാക്കുകയും ബിൽഡ് സമയം ഗണ്യമായി കുറയ്ക്കുകയും ചെയ്യുന്നു.

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് v4.0 ഫ്രെയിംവർക്കിന്റെ ഒരു പുതിയ പതിപ്പാണ്, ഇത് പ്രകടനത്തിനും വഴക്കത്തിനും വേണ്ടി ഒപ്റ്റിമൈസ് ചെയ്തിരിക്കുന്നു. ഇത് വർഷങ്ങളായി പഠിച്ച പാഠങ്ങൾ ഉൾക്കൊണ്ട്, അടിമുടി മാറ്റിയെഴുതിയ (ground-up rewrite) ഒരു പുതിയ ഹൈ-പെർഫോമൻസ് എഞ്ചിനിലാണ് പ്രവർത്തിക്കുന്നത്. ഇതിലെ പ്രധാന മാറ്റങ്ങൾ താഴെ പറയുന്നവയാണ്:  

  • വേഗത: v4.0-ൽ ഫുൾ ബിൽഡുകൾ 5x വരെ വേഗത്തിലാകുന്നു, ഇൻക്രിമെന്റൽ ബിൽഡുകൾ 100x-ൽ അധികം വേഗത്തിലാകുന്നു. ഇത് v3.4-നെ അപേക്ഷിച്ച് ഫുൾ റീബിൽഡുകൾ 3.5x വേഗത്തിലും ഇൻക്രിമെന്റൽ ബിൽഡുകൾ 8x വേഗത്തിലുമാണെന്ന് ബെഞ്ച്മാർക്കുകൾ കാണിക്കുന്നു.  
  • ആധുനിക വെബിനായുള്ള രൂപകൽപ്പന: കാസ്കേഡ് ലെയറുകൾ, @property ഉപയോഗിച്ചുള്ള രജിസ്റ്റർ ചെയ്ത കസ്റ്റം പ്രോപ്പർട്ടികൾ, color-mix() പോലുള്ള ഏറ്റവും പുതിയ സി‌എസ്‌എസ് സവിശേഷതകൾ ഇത് പൂർണ്ണമായി പ്രയോജനപ്പെടുത്തുന്നു.  
  • ലളിതമായ ഇൻസ്റ്റാളേഷൻ: കുറഞ്ഞ ഡിപൻഡൻസികളും സീറോ കോൺഫിഗറേഷനുമായി, സി‌എസ്‌എസ് ഫയലിൽ ഒരു സിംഗിൾ ലൈൻ കോഡ് മാത്രം മതി.  
  • ഓട്ടോമാറ്റിക് കണ്ടന്റ് ഡിറ്റക്ഷൻ: v3.x-ലെ “അലോസരപ്പെടുത്തുന്ന content അറേ” കോൺഫിഗറേഷൻ ആവശ്യമില്ല; എല്ലാ ടെംപ്ലേറ്റ് ഫയലുകളും സ്വയമേവ കണ്ടെത്തുന്നു.  
  • CSS-ഫസ്റ്റ് കോൺഫിഗറേഷൻ: tailwind.config.js ഫയലിന് പകരം @theme ഡയറക്റ്റീവ് ഉപയോഗിച്ച് സി‌എസ്‌എസ് ഫയലിൽ നേരിട്ട് കോൺഫിഗർ ചെയ്യാൻ സാധിക്കുന്നു.  

v4.0-ന്റെ “അടിമുടി മാറ്റിയെഴുതൽ”, പ്രകടനം, ലളിതമായ കോൺഫിഗറേഷൻ, ആധുനിക സി‌എസ്‌എസ് സവിശേഷതകൾ എന്നിവയിലുള്ള ശ്രദ്ധ, വെബ് പ്ലാറ്റ്‌ഫോമിന്റെ കൂടുതൽ ആഴത്തിലുള്ളതും പ്രകടനക്ഷമവുമായ ഭാഗമായി മാറുന്നതിനുള്ള ടെയിൽ‌വിൻഡിന്റെ തന്ത്രപരമായ പരിണാമത്തെ സൂചിപ്പിക്കുന്നു. JavaScript-കേന്ദ്രീകൃത കോൺഫിഗറേഷനിൽ (tailwind.config.js) നിന്ന് CSS-ഫസ്റ്റ് (@theme) കോൺഫിഗറേഷനിലേക്കുള്ള ഈ മാറ്റം ഒരു പ്രധാന തത്ത്വചിന്താപരമായ മാറ്റമാണ്, ഇത് കൂടുതൽ തടസ്സമില്ലായ്മയും കൂടുതൽ നേറ്റീവ് അനുഭവവും ലക്ഷ്യമിടുന്നു. വെബ് പ്ലാറ്റ്‌ഫോം നിരന്തരം വികസിച്ചുകൊണ്ടിരിക്കുന്നു. v4.0-ന്റെ കാസ്കേഡ് ലെയറുകളും @property പോലുള്ള സവിശേഷതകളും സ്വീകരിക്കുന്നത്, പ്ലാറ്റ്‌ഫോമിന്റെ നേറ്റീവ് കഴിവുകൾ കൂടുതൽ നേരിട്ട് പ്രയോജനപ്പെടുത്തുന്നതിലേക്കുള്ള ഒരു നീക്കത്തെ സൂചിപ്പിക്കുന്നു.

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് വെബ് ഡിസൈനിംഗിന്റെ രീതിയെ മാറ്റിമറിച്ചു, യൂട്ടിലിറ്റി-ഫസ്റ്റ് സമീപനം വെബ് ഡെവലപ്‌മെന്റ് കമ്മ്യൂണിറ്റിയിൽ വ്യാപകമായി സ്വീകരിക്കപ്പെട്ടു. GitHub-ൽ 8,000-ത്തിലധികം സ്റ്റാറുകൾ, 1,100-ലധികം അംഗങ്ങളുള്ള സ്ലാക്ക് കമ്മ്യൂണിറ്റി, 10,000-ത്തിലധികം ട്വിറ്റർ ഫോളോവേഴ്‌സ്, 700,000-ത്തോളം npm ഇൻസ്റ്റാളേഷനുകൾ എന്നിവ ആദ്യ വർഷത്തിനുള്ളിൽ തന്നെ നേടി.

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിന്റെ പ്രധാന സവിശേഷതകൾ

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് നിരവധി സവിശേഷതകൾ വാഗ്ദാനം ചെയ്യുന്നു, ഇത് ആധുനിക വെബ് വികസനത്തിൽ അതിനെ ഒരു ശക്തമായ ഉപകരണമാക്കി മാറ്റുന്നു.

വേഗതയേറിയതും കാര്യക്ഷമവുമായ വികസനം

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിന്റെ യൂട്ടിലിറ്റി-ഫസ്റ്റ് സമീപനം ഡെവലപ്പർമാരെ ഓരോ ഘടകത്തിനും കസ്റ്റം സി‌എസ്‌എസ് എഴുതാതെ തന്നെ വേഗത്തിൽ സ്റ്റൈൽ ചെയ്യാൻ അനുവദിക്കുന്നു. ഇത് പ്രോട്ടോടൈപ്പിംഗിനും വെബ്സൈറ്റുകൾ നിർമ്മിക്കുന്നതിനും ആവശ്യമായ സമയം ഗണ്യമായി കുറയ്ക്കുന്നു. ഈ കാര്യക്ഷമത ഡെവലപ്പർമാരെ ഡിസൈൻ മാറ്റങ്ങൾ വരുത്തുന്നതിന് ബാഹ്യ സി‌എസ്‌എസ് ഫയലുകൾ മാറ്റാതെ തന്നെ യൂട്ടിലിറ്റി ക്ലാസുകൾ ചേർക്കുകയോ നീക്കം ചെയ്യുകയോ ചെയ്താൽ മതിയാകും.  

അതിരുകളില്ലാത്ത കസ്റ്റമൈസേഷൻ സാധ്യതകൾ

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് ഒരു tailwind.config.js ഫയൽ വഴി ഉയർന്ന തലത്തിൽ കസ്റ്റമൈസ് ചെയ്യാവുന്നതാണ്. നിറങ്ങൾ, സ്പേസിംഗ്, ബ്രേക്ക്പോയിന്റുകൾ, ഫോണ്ടുകൾ എന്നിവയുൾപ്പെടെ എല്ലാം നിങ്ങളുടെ ആവശ്യങ്ങൾക്കനുസരിച്ച് ക്രമീകരിക്കാൻ കഴിയും. ഇത് ഒരു പ്രത്യേക തീം ഇല്ലാതെ തന്നെ ഓരോ പ്രോജക്റ്റിനും തനതായ രൂപം നൽകാൻ സഹായിക്കുന്നു. ടെയിൽ‌വിൻഡിന്റെ ഈ “അതിരുകളില്ലാത്ത കസ്റ്റമൈസേഷൻ” എന്നത്, ബൂട്ട്സ്ട്രാപ്പ് പോലുള്ള ഘടക-അധിഷ്ഠിത ഫ്രെയിംവർക്കുകളോടുള്ള “അഭിപ്രായമുള്ള” അല്ലെങ്കിൽ “കസ്റ്റമൈസ് ചെയ്യാൻ ബുദ്ധിമുട്ടുള്ള” വിമർശനങ്ങളെ നേരിട്ട് പ്രതിരോധിക്കുന്ന ഒരു ബോധപൂർവമായ രൂപകൽപ്പനയാണ്. ഈ വഴക്കം ഒരു പ്രധാന വ്യത്യാസമാണ്, കൂടാതെ തനതായ ബ്രാൻഡിംഗ് ആവശ്യമുള്ള പ്രോജക്റ്റുകളിൽ ഇത് വ്യാപകമായി സ്വീകരിക്കപ്പെടാനുള്ള ഒരു പ്രധാന കാരണവുമാണ്.  

മൊബൈൽ-ഫസ്റ്റ് റെസ്പോൺസീവ് ഡിസൈൻ

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് മൊബൈൽ-ഫസ്റ്റ് സമീപനത്തെ പിന്തുണയ്ക്കുന്നു. ഇത് ബിൽറ്റ്-ഇൻ യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിച്ച് വിവിധ സ്ക്രീൻ വലുപ്പങ്ങളിലേക്ക് തടസ്സമില്ലാതെ മാറുന്ന റെസ്പോൺസീവ് ലേഔട്ടുകൾ നിർമ്മിക്കുന്നത് ലളിതമാക്കുന്നു. ഡെവലപ്പർമാർക്ക് മീഡിയ ക്വറികൾ എഴുതാതെ തന്നെ ബ്രേക്ക്പോയിന്റുകൾ ഉപയോഗിച്ച് HTML-ൽ നേരിട്ട് റെസ്പോൺസീവ് ശൈലികൾ പ്രയോഗിക്കാൻ കഴിയും.  

പർജ്സി‌എസ്‌എസ് ഉപയോഗിച്ചുള്ള കോഡ് ഒപ്റ്റിമൈസേഷൻ

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് PurgeCSS പോലുള്ള ടൂളുകളുമായി സംയോജിപ്പിച്ചിരിക്കുന്നു, ഇത് ഉപയോഗിക്കാത്ത സി‌എസ്‌എസ് ശൈലികൾ സ്വയമേവ നീക്കംചെയ്യുന്നു. ഇത് അന്തിമ സി‌എസ്‌എസ് ഫയലിന്റെ വലുപ്പം കുറയ്ക്കുകയും വെബ്സൈറ്റിന്റെ പ്രകടനം മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.  

PurgeCSS (അല്ലെങ്കിൽ പുതിയ പതിപ്പുകളിലെ JIT മോഡ്) സംയോജിപ്പിക്കുന്നത്, യൂട്ടിലിറ്റി-ഫസ്റ്റ് ഫ്രെയിംവർക്കിൽ ഉണ്ടാകാൻ സാധ്യതയുള്ള “സി‌എസ്‌എസ് ബ്ലോട്ട്” കുറയ്ക്കുന്നതിന് നിർണായകമാണ്. ഈ സവിശേഷത ഒരു സാധ്യതയുള്ള പോരായ്മയെ (വലിയ പ്രാരംഭ സി‌എസ്‌എസ്) ഒരു പ്രധാന നേട്ടമാക്കി (ചെറിയ ഉൽപ്പാദന സി‌എസ്‌എസ്) മാറ്റുന്നു, ഇത് വെബ്സൈറ്റിന്റെ പ്രകടനത്തെയും സെർച്ച് എഞ്ചിൻ ഒപ്റ്റിമൈസേഷനെയും നേരിട്ട് സ്വാധീനിക്കുന്നു.

ഗ്രാനുലാർ കൺട്രോളും യൂട്ടിലിറ്റി ക്ലാസുകളുടെ വ്യാപ്തിയും

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് ഡിസൈനിന്റെ ഓരോ വശത്തും ആറ്റോമിക് തലത്തിൽ നിയന്ത്രണം നൽകുന്നു. ഇത് ലേഔട്ട്, സ്പേസിംഗ്, ടൈപ്പോഗ്രഫി, പശ്ചാത്തലങ്ങൾ, ബോർഡറുകൾ, ഷാഡോകൾ, ട്രാൻസിഷനുകൾ, ട്രാൻസ്ഫോമുകൾ, ആനിമേഷനുകൾ, ഇന്ററാക്റ്റിവിറ്റി, ഫിൽട്ടറുകൾ എന്നിവയുൾപ്പെടെ നിരവധി യൂട്ടിലിറ്റി ക്ലാസുകൾ നൽകുന്നു.  

  • ലേഔട്ട്, സ്പേസിംഗ്, ടൈപ്പോഗ്രഫി: display, position, overflow, z-index, padding, margin, space-between, font-size, font-weight, text-align, line-height, letter-spacing തുടങ്ങിയവയ്ക്കുള്ള യൂട്ടിലിറ്റികൾ.  
  • ഫ്ലെക്സ്ബോക്സ്, ഗ്രിഡ് സിസ്റ്റങ്ങൾ: ഫ്ലെക്സ് ഡയറക്ഷൻ, ഫ്ലെക്സ് റാപ്പ്, ഫ്ലെക്സ് ഗ്രോ, ഫ്ലെക്സ് ഷ്രിങ്ക്, ഓർഡർ, ഗ്രിഡ് ടെംപ്ലേറ്റ് കോളങ്ങൾ/വരികൾ, ഗ്രിഡ് ഗ്യാപ്പ് തുടങ്ങിയവയ്ക്കുള്ള ക്ലാസുകൾ.  
  • ബാക്ക്ഗ്രൗണ്ടുകൾ, ബോർഡറുകൾ, ഷാഡോകൾ: പശ്ചാത്തല ചിത്രങ്ങൾ, നിറങ്ങൾ, ഗ്രേഡിയന്റുകൾ, ബോർഡർ വീതി, നിറം, ബോർഡർ റേഡിയസ്, ബോക്സ് ഷാഡോ, ഒപാസിറ്റി തുടങ്ങിയവ നിയന്ത്രിക്കാൻ.  
  • ട്രാൻസിഷനുകൾ, ട്രാൻസ്ഫോമുകൾ, ആനിമേഷനുകൾ: UI ഘടകങ്ങളിൽ സുഗമമായ ട്രാൻസിഷനുകളും ആനിമേഷനുകളും ചേർക്കാൻ.  
  • ഇന്ററാക്റ്റിവിറ്റി, ഫിൽട്ടറുകൾ: കഴ്സർ ശൈലി, പോയിന്റർ ഇവന്റുകൾ, ബ്ലർ, ബ്രൈറ്റ്നെസ്, കോൺട്രാസ്റ്റ് പോലുള്ള ഫിൽട്ടർ ഇഫക്റ്റുകൾ.  

 

ഡയറക്റ്റീവുകളും ബിൽഡ്-ടൈം ഫംഗ്ഷനുകളും (@apply, @theme, @import, etc.)

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് പ്രോജക്റ്റുകളിൽ പ്രത്യേക പ്രവർത്തനക്ഷമത വാഗ്ദാനം ചെയ്യുന്ന കസ്റ്റം @-റൂളുകളാണ് ഡയറക്റ്റീവുകൾ.  

  • @import: സി‌എസ്‌എസ് ഫയലുകൾ ഇൻലൈൻ ഇറക്കുമതി ചെയ്യാൻ.  
  • @theme: പ്രോജക്റ്റിന്റെ കസ്റ്റം ഡിസൈൻ ടോക്കണുകൾ (ഫോണ്ടുകൾ, നിറങ്ങൾ, ബ്രേക്ക്പോയിന്റുകൾ) നിർവചിക്കാൻ.  
  • @apply: നിലവിലുള്ള യൂട്ടിലിറ്റി ക്ലാസുകൾ നിങ്ങളുടെ സ്വന്തം കസ്റ്റം സി‌എസ്‌എസിലേക്ക് ഇൻലൈൻ ചെയ്യാൻ. ഇത് മൂന്നാം കക്ഷി ലൈബ്രറികളിലെ ശൈലികൾ ഓവർറൈഡ് ചെയ്യേണ്ടിവരുമ്പോൾ ഉപയോഗപ്രദമാണ്.  
  • @utility, @variant, @custom-variant, @source, @reference എന്നിവയും ലഭ്യമാണ്.  

@apply, @theme, @import പോലുള്ള ഡയറക്റ്റീവുകളുടെ ലഭ്യത, യൂട്ടിലിറ്റി-ഫസ്റ്റ് സമീപനമാണ് പ്രാഥമികമെങ്കിലും, പരമ്പരാഗത സി‌എസ്‌എസ് മാതൃകകളോ കൂടുതൽ അബ്സ്ട്രാക്റ്റഡ് ഡിസൈൻ ടോക്കണുകളോ ആവശ്യമായ സാഹചര്യങ്ങൾ ഇപ്പോഴുമുണ്ടെന്ന് ടെയിൽ‌വിൻഡ് തിരിച്ചറിയുന്നുവെന്ന് കാണിക്കുന്നു. ഈ വഴക്കം ഡെവലപ്പർമാരെ ആവശ്യമുള്ളപ്പോൾ “യൂട്ടിലിറ്റി-മാത്രം” എന്ന പരിമിതിയിൽ നിന്ന് പുറത്തുകടക്കാൻ അനുവദിക്കുന്നു, ഇത് അറ്റോമിക് സ്റ്റൈലിംഗും കൂടുതൽ പരമ്പരാഗത സി‌എസ്‌എസ് ആർക്കിടെക്ചറും തമ്മിലുള്ള വിടവ് നികത്തുന്നു. @apply പോലുള്ളവ, HTML-ന്റെ ദൈർഘ്യം കുറയ്ക്കുന്നതിനോ നിലവിലുള്ള സി‌എസ്‌എസുമായി സംയോജിപ്പിക്കുന്നതിനോ ഒരു മാർഗ്ഗം നൽകുന്നു. @theme ഡിസൈൻ സിസ്റ്റം വേരിയബിളുകളെ കേന്ദ്രീകരിക്കുന്നു, ഇത് കസ്റ്റമൈസേഷൻ കൂടുതൽ കൈകാര്യം ചെയ്യാവുന്നതും സ്ഥിരതയുള്ളതുമാക്കുന്നു.

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിലെ വകഭേദങ്ങൾ

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിൽ, വകഭേദങ്ങൾ ഒരു ക്ലാസ് നാമത്തിന്റെ തുടക്കത്തിൽ ചേർത്ത്, വ്യത്യസ്ത അവസ്ഥകളിലോ സാഹചര്യങ്ങളിലോ യൂട്ടിലിറ്റി ക്ലാസുകൾ വ്യവസ്ഥാപിതമായി പ്രയോഗിക്കാൻ ഉപയോഗിക്കുന്നു. പരമ്പരാഗത സി‌എസ്‌എസിൽ ഒരു ക്ലാസിന് വ്യത്യസ്ത അവസ്ഥകളിൽ വ്യത്യസ്ത ശൈലികൾ ഉണ്ടാകുമെങ്കിൽ, ടെയിൽ‌വിൻഡ് ഡിഫോൾട്ട് അവസ്ഥകൾക്കും വ്യവസ്ഥാപിത അവസ്ഥകൾക്കുമായി പ്രത്യേക ക്ലാസുകൾ ഉപയോഗിക്കുന്നു. ഉദാഹരണത്തിന്,  

hover:bg-sky-700 എന്നത് ഹോവർ ചെയ്യുമ്പോൾ മാത്രമേ bg-sky-700 എന്ന ബാക്ക്ഗ്രൗണ്ട് കളർ പ്രയോഗിക്കൂ.  

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് വിവിധതരം വകഭേദങ്ങൾ ഉൾക്കൊള്ളുന്നു, അവ ഘടകങ്ങളുടെ ഇന്ററാക്ടീവ് അല്ലെങ്കിൽ ഘടനാപരമായ അവസ്ഥകൾ, വ്യൂപോർട്ട് സ്വഭാവസവിശേഷതകൾ, ബ്രൗസർ ഫീച്ചർ പിന്തുണ, HTML ആട്രിബ്യൂട്ടുകൾ എന്നിവയെ അടിസ്ഥാനമാക്കി ശൈലികൾ പ്രയോഗിക്കാൻ സഹായിക്കുന്നു.  

  • സ്യൂഡോ-ക്ലാസുകൾ:
    • :hover, :focus, :active: ഉപയോക്താവ് ഹോവർ ചെയ്യുമ്പോൾ, ഫോക്കസ് ചെയ്യുമ്പോൾ, അല്ലെങ്കിൽ അമർത്തുമ്പോൾ ഘടകങ്ങൾക്ക് സ്റ്റൈൽ നൽകാൻ.  
    • :first, :last, :odd, :even: ഒരു പാരന്റ് ഘടകത്തിനുള്ളിലെ ഒരു ചൈൽഡിന്റെ സ്ഥാനത്തെ അടിസ്ഥാനമാക്കി സ്റ്റൈൽ ചെയ്യാൻ.  
    • :has(), :not(): സ്യൂഡോ-ക്ലാസുകൾ, ഡാറ്റാ ആട്രിബ്യൂട്ടുകൾ, അല്ലെങ്കിൽ എലമെന്റ് സെലക്ടറുകൾ എന്നിവയെ അടിസ്ഥാനമാക്കി ഒരു ഘടകത്തിന്റെ സ്റ്റൈലിംഗിൽ വ്യത്യാസം വരുത്താൻ.  
    • group-*, peer-*: പാരന്റ് അല്ലെങ്കിൽ സഹോദര ഘടകങ്ങളുടെ അവസ്ഥയെ അടിസ്ഥാനമാക്കി ചൈൽഡ് ഘടകങ്ങൾക്ക് സ്റ്റൈൽ നൽകാൻ.  
  • സ്യൂഡോ-എലമെന്റുകൾ: ::before, ::after, ::placeholder, ::selection, ::file, ::marker, ::first-line, ::first-letter, ::backdrop എന്നിവയ്ക്ക് സ്റ്റൈൽ നൽകാൻ.  
  • മീഡിയ, ഫീച്ചർ ക്വറികൾ:
    • റെസ്പോൺസീവ് ബ്രേക്ക്പോയിന്റുകൾ (sm, md, lg, xl, 2xl): വിവിധ വ്യൂപോർട്ട് വീതികളിൽ ശൈലികൾ പ്രയോഗിക്കാൻ.  
    • ഡാർക്ക് മോഡ് (dark): ഉപയോക്താവിന്റെ ഇഷ്ടപ്പെട്ട കളർ സ്കീം അനുസരിച്ച് ശൈലികൾ പ്രയോഗിക്കാൻ.  
    • prefers-reduced-motion (motion-reduce, motion-safe), prefers-contrast, forced-colors, inverted-colors, pointer, orientation, scripting, print, @supports (supports-[...], not-supports-[...]), @starting-style എന്നിവയും ഉൾപ്പെടുന്നു.  
  • ആട്രിബ്യൂട്ട് സെലക്ടറുകൾ: ARIA സ്റ്റേറ്റുകൾ (aria-*), ഡാറ്റാ ആട്രിബ്യൂട്ടുകൾ (data-*), RTL/LTR പിന്തുണ (rtl, ltr), open സ്റ്റേറ്റ്, inert എലമെന്റുകൾ എന്നിവയെ അടിസ്ഥാനമാക്കി ശൈലികൾ പ്രയോഗിക്കാൻ.  
  • ചൈൽഡ് സെലക്ടറുകൾ: * (ഡയറക്റ്റ് ചൈൽഡുകൾക്ക്), ** (എല്ലാ ഡിസെൻഡന്റുകൾക്കും) എന്നിവ ഉപയോഗിച്ച് ശൈലികൾ പ്രയോഗിക്കാൻ.  

ടെയിൽ‌വിൻഡ് കൂടുതൽ നിർദ്ദിഷ്ട അല്ലെങ്കിൽ പുനരുപയോഗിക്കാവുന്ന സാഹചര്യങ്ങൾക്കായി കസ്റ്റം വകഭേദങ്ങൾ നിർമ്മിക്കാൻ അനുവദിക്കുന്നു. സ്ക്വയർ ബ്രാക്കറ്റ് നൊട്ടേഷൻ ഉപയോഗിച്ച് HTML-ൽ നേരിട്ട് കസ്റ്റം സെലക്ടർ വകഭേദങ്ങൾ എഴുതാം (  

[&.is-dragging]:cursor-grabbing) അല്ലെങ്കിൽ @custom-variant ഡയറക്റ്റീവ് ഉപയോഗിച്ച് CSS-ൽ പുനരുപയോഗിക്കാവുന്ന കസ്റ്റം വകഭേദങ്ങൾ നിർവചിക്കാം.  

tailwind-variants പോലുള്ള ലൈബ്രറികൾ ടൈപ്പ്-സേഫ്റ്റിയും കോൺഫ്ലിക്റ്റ് മെർജിംഗും വാഗ്ദാനം ചെയ്യുന്നു.  

വകഭേദങ്ങൾ ഒരുമിച്ച് ഉപയോഗിക്കാൻ കഴിയും (stacking), ഇത് കൂടുതൽ നിർദ്ദിഷ്ട സാഹചര്യങ്ങളെ ലക്ഷ്യമിടാൻ സഹായിക്കുന്നു. ഉദാഹരണത്തിന്, dark:md:hover:bg-fuchsia-600 എന്നത് ഡാർക്ക് മോഡിൽ, മീഡിയം ബ്രേക്ക്പോയിന്റിൽ, ഹോവർ ചെയ്യുമ്പോൾ ഒരു പശ്ചാത്തല നിറം പ്രയോഗിക്കുന്നു. ടെയിൽ‌വിൻഡ് വകഭേദങ്ങളുടെ വിപുലവും സ്റ്റാക്ക് ചെയ്യാവുന്നതുമായ സ്വഭാവം അതിന്റെ യൂട്ടിലിറ്റി-ഫസ്റ്റ് തത്ത്വചിന്തയുടെ നേരിട്ടുള്ള ഫലമാണ്. ഇത് ഡെവലപ്പർമാരെ സങ്കീർണ്ണമായ കണ്ടീഷണൽ സ്റ്റൈലിംഗ് HTML-ൽ നേരിട്ട് പ്രകടിപ്പിക്കാൻ അനുവദിക്കുന്നു, ഇത് സി‌എസ്‌എസ് ലോജിക് ഘടക മാർക്കപ്പിനോട് അടുപ്പിക്കുന്നു. ഇത് സ്റ്റൈലിംഗ് ക്രമീകരണങ്ങൾക്കായി HTML, സി‌എസ്‌എസ് ഫയലുകൾക്കിടയിൽ മാറേണ്ടതിന്റെ ആവശ്യം കുറയ്ക്കുന്നു, ഇത് വേഗതയേറിയ ആവർത്തനത്തിന് കാരണമാകുന്നു, എന്നാൽ HTML-ന്റെ ദൈർഘ്യം വർദ്ധിപ്പിക്കാനും സാധ്യതയുണ്ട്.  

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിന്റെ ഗുണങ്ങളും ദോഷങ്ങളും

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് വെബ് വികസനത്തിന് നിരവധി നേട്ടങ്ങൾ നൽകുമ്പോൾ, ചില പോരായ്മകളും ഇതിനുണ്ട്.

ഗുണങ്ങൾ

  • വേഗതയേറിയ പ്രോട്ടോടൈപ്പിംഗും വികസനവും: യൂട്ടിലിറ്റി-ഫസ്റ്റ് സമീപനം, കസ്റ്റം സി‌എസ്‌എസ് എഴുതേണ്ടതിന്റെ ആവശ്യം ഇല്ലാതാക്കി, ഡിസൈനുകൾ വേഗത്തിൽ നിർമ്മിക്കാൻ സഹായിക്കുന്നു. ഇത് പ്രോട്ടോടൈപ്പിംഗിന് വളരെ മികച്ചതാണ്.  
  • കോഡ് ക്ലീൻലിനസും പരിപാലനക്ഷമതയും: യൂട്ടിലിറ്റി ക്ലാസുകൾ ഉപയോഗിക്കുന്നത് പ്രോജക്റ്റിലുടനീളം സ്ഥിരമായ ഡിസൈൻ പ്രോത്സാഹിപ്പിക്കുന്നു, ഇത് പരിപാലനം എളുപ്പമാക്കുന്നു. ഓരോ യൂട്ടിലിറ്റി ക്ലാസും ഒരു കാര്യം മാത്രം ചെയ്യുന്നതിനാൽ, ഡീബഗ്ഗിംഗ് എളുപ്പമാണ്.  
  • ഡിസൈൻ കൺസിസ്റ്റൻസിയും ബ്രാൻഡ് ഐഡന്റിറ്റിയും: ടെയിൽ‌വിൻഡിന്റെ യൂട്ടിലിറ്റി ക്ലാസുകൾ ഒരു സ്ഥിരമായ ഡിസൈൻ സിസ്റ്റം നടപ്പിലാക്കാൻ സഹായിക്കുന്നു, ഇത് പ്രോജക്റ്റിലുടനീളം ഡിസൈൻ സ്ഥിരത ഉറപ്പാക്കുന്നു. ഇത് ഒരു ബ്രാൻഡിന് തനതായ ദൃശ്യാനുഭവം നൽകാൻ സഹായിക്കുന്നു.  
  • ഒപ്റ്റിമൈസ് ചെയ്ത ഫയൽ വലുപ്പം: PurgeCSS (അല്ലെങ്കിൽ JIT മോഡ്) ഉപയോഗിച്ച് ഉപയോഗിക്കാത്ത ശൈലികൾ നീക്കംചെയ്യുന്നതിലൂടെ, അന്തിമ സി‌എസ്‌എസ് ഫയൽ വലുപ്പം ചെറുതും ഒപ്റ്റിമൈസ് ചെയ്തതുമായിരിക്കും, ഇത് വെബ്സൈറ്റിന്റെ പ്രകടനം മെച്ചപ്പെടുത്തുന്നു.  

ദോഷങ്ങൾ

  • പഠന വക്രം: ടെയിൽ‌വിൻഡിന്റെ വിപുലമായ യൂട്ടിലിറ്റി ക്ലാസുകളും കോൺഫിഗറേഷൻ ഓപ്ഷനുകളും പുതിയ ഉപയോക്താക്കൾക്ക് ഒരു പഠന വക്രത ഉണ്ടാക്കിയേക്കാം.  
  • HTML ഫയലുകളിലെ ക്ലാസുകളുടെ ആധിക്യം (“ക്ലാസ് സൂപ്പ്”): യൂട്ടിലിറ്റി-ഫസ്റ്റ് സമീപനം HTML-ൽ ധാരാളം ക്ലാസുകൾ ഉപയോഗിക്കാൻ ഇടയാക്കും, ഇത് HTML ഫയലുകൾ വലുതും വായിക്കാൻ ബുദ്ധിമുട്ടുള്ളതുമാക്കും. ഇത് “ക്ലാസ് സൂപ്പ്” എന്ന് വിശേഷിപ്പിക്കപ്പെടുന്നു. “ബ്ലോട്ടഡ് HTML” എന്ന വിമർശനം ടെയിൽ‌വിൻഡിന്റെ യൂട്ടിലിറ്റി-ഫസ്റ്റ് സമീപനത്തിന്റെ നേരിട്ടുള്ളതും ഒഴിവാക്കാനാവാത്തതുമായ ഫലമാണ്. HTML-ൽ ശൈലികൾ നിലനിർത്തുന്നതിലൂടെ ഇത് സൂക്ഷ്മമായ നിയന്ത്രണവും വേഗതയേറിയ വികസനവും നൽകുമ്പോൾ, HTML-ന്റെ വായനാക്ഷമതയെ ഇത് ത്യജിക്കുന്നു.  
  • കോഡ് ഡ്യൂപ്ലിക്കേഷൻ സാധ്യത: യൂട്ടിലിറ്റി ക്ലാസുകൾ പുനരുപയോഗിക്കാവുന്ന ഘടകങ്ങളായി സംയോജിപ്പിക്കാതെ നേരിട്ട് ഉപയോഗിക്കുമ്പോൾ, ഒരേ ശൈലികൾ പലയിടത്തും ആവർത്തിക്കാൻ സാധ്യതയുണ്ട്.  
  • സിന്റാക്സ് ഹൈലൈറ്റിംഗിന്റെയും എക്സ്പ്രസ്സീവ്നെസ്സിന്റെയും വെല്ലുവിളികൾ: ടെയിൽ‌വിൻഡ് ക്ലാസ് പേരുകൾ സാധാരണയായി സ്ട്രിംഗുകളായി മാത്രം പ്രദർശിപ്പിക്കപ്പെടുന്നു, ഇത് സിന്റാക്സ് ഹൈലൈറ്റിംഗ് ഇല്ലാത്തതിനാൽ വായിക്കാൻ ബുദ്ധിമുട്ടാണ്. ചുരുക്കപ്പേരുകൾ പൂർണ്ണ സി‌എസ്‌എസ് പ്രോപ്പർട്ടികളേക്കാൾ കുറഞ്ഞ വിവരണാത്മകമാണ്.  
  • @apply ഡയറക്റ്റീവിനെക്കുറിച്ചുള്ള വിമർശനങ്ങൾ: @apply ഡയറക്റ്റീവ് ടെയിൽ‌വിൻഡിന്റെ പ്രധാന തത്വങ്ങൾക്ക് വിരുദ്ധമാണെന്നും ഒരു “പ്രയോജനമില്ലാത്ത അബ്സ്ട്രാക്ഷൻ” ആണെന്നും വിമർശിക്കപ്പെടുന്നു. ഇത് കസ്റ്റം സി‌എസ്‌എസ് ഫയലിന്റെ ആവശ്യകത നിലനിർത്തുകയും സാധാരണ സി‌എസ്‌എസ് ക്ലാസുകളുടെ ഒരു മിനിഫൈഡ് പതിപ്പ് എഴുതുന്നതിന് തുല്യമാവുകയും ചെയ്യുന്നു.   @apply നെക്കുറിച്ചുള്ള ചർച്ചകൾ ഈ സംഘർഷത്തെ കൂടുതൽ വ്യക്തമാക്കുന്നു: ഇത് ദൈർഘ്യം കുറയ്ക്കാനുള്ള ഒരു ശ്രമമാണ്, എന്നാൽ വിമർശകർ ഇത് പ്രധാന തത്ത്വചിന്തയെ ദുർബലപ്പെടുത്തുന്നു എന്ന് വാദിക്കുന്നു, ഇത് രൂപകൽപ്പനയിലെ ഒരു വിട്ടുവീഴ്ചയെ വെളിപ്പെടുത്തുന്നു.

മറ്റ് സി‌എസ്‌എസ് ഫ്രെയിംവർക്കുകളുമായുള്ള താരതമ്യം

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ്, ബൂട്ട്സ്ട്രാപ്പ്, ബുൾമ എന്നിവയെല്ലാം വെബ് UI വികസനം ലളിതമാക്കാൻ ലക്ഷ്യമിടുന്നു, എന്നാൽ ഓരോന്നിനും അടിസ്ഥാനപരമായി വ്യത്യസ്തമായ സമീപനങ്ങളുണ്ട്.  

  • ബൂട്ട്സ്ട്രാപ്പ്: ഘടക-അധിഷ്ഠിത ഫ്രെയിംവർക്കാണ്, ഇത് മുൻകൂട്ടി നിർമ്മിച്ച ഘടകങ്ങളും UI കിറ്റുകളും നൽകുന്നു. ഇത് വേഗത്തിൽ ഒരു UI പ്രവർത്തനക്ഷമമാക്കാൻ സഹായിക്കുന്നു, എന്നാൽ കസ്റ്റമൈസേഷൻ സങ്കീർണ്ണമാക്കാം.  
  • ബുൾമ: സാസ്, ഫ്ലെക്സ്ബോക്സ് സിസ്റ്റം എന്നിവയിൽ നിർമ്മിച്ച ഒരു ഫ്രീ, ഓപ്പൺ സോഴ്സ് സി‌എസ്‌എസ് ഫ്രെയിംവർക്കാണ്. ഇത് ബൂട്ട്സ്ട്രാപ്പിന് സമാനമായി മുൻകൂട്ടി നിർമ്മിച്ച ഘടകങ്ങൾ നൽകുന്നു, എന്നാൽ കൂടുതൽ മൊഡ്യൂലാർ ഘടനയും കസ്റ്റമൈസേഷൻ വഴക്കവും വാഗ്ദാനം ചെയ്യുന്നു. ഇതിന് ജാവാസ്ക്രിപ്റ്റ് ഘടകങ്ങൾ ഉൾപ്പെടുന്നില്ല.  
  • ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ്: ഒരു യൂട്ടിലിറ്റി-ഫസ്റ്റ് ഫ്രെയിംവർക്കാണ്, ഇത് മുൻകൂട്ടി നിർമ്മിച്ച ഘടകങ്ങളോ UI കിറ്റുകളോ നൽകുന്നില്ല. പകരം, ഡെവലപ്പർമാർക്ക് എല്ലാ ഘടകങ്ങളും ലേഔട്ടുകളും ആദ്യം മുതൽ നിർമ്മിക്കാൻ ആവശ്യമായ ടൂളുകൾ നൽകുന്നു. ഇത് ഡിസൈൻ നിയന്ത്രണത്തിൽ ഉയർന്ന വഴക്കം നൽകുന്നു.  

താഴെ പറയുന്ന പട്ടിക, ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ്, ബൂട്ട്സ്ട്രാപ്പ്, ബുൾമ എന്നിവയുടെ പ്രധാന സവിശേഷതകളെ താരതമ്യം ചെയ്യുന്നു:

സവിശേഷത ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് ബൂട്ട്സ്ട്രാപ്പ് ബുൾമ
പ്രധാന സമീപനം യൂട്ടിലിറ്റി-ഫസ്റ്റ്; HTML-ൽ നേരിട്ട് സ്റ്റൈലിംഗ് ഘടക-അധിഷ്ഠിത; മുൻകൂട്ടി നിർമ്മിച്ച ഘടകങ്ങൾ ഘടക-അധിഷ്ഠിത; മുൻകൂട്ടി നിർമ്മിച്ച ഘടകങ്ങൾ
കസ്റ്റമൈസേഷൻ tailwind.config.js വഴി ഉയർന്ന തലത്തിൽ കസ്റ്റമൈസ് ചെയ്യാവുന്നത്; പൂർണ്ണ ഡിസൈൻ സ്വാതന്ത്ര്യം   ഡിഫോൾട്ട് സ്റ്റൈലുകൾ ഓവർറൈഡ് ചെയ്യേണ്ടി വരുന്നു; വലിയ പ്രോജക്റ്റുകളിൽ ബുദ്ധിമുട്ടാകാം   സാസ് വഴി നല്ല വഴക്കം; ബൂട്ട്സ്ട്രാപ്പിനേക്കാൾ കൂടുതൽ നിയന്ത്രണം  
മുൻകൂട്ടി നിർമ്മിച്ച ഘടകങ്ങൾ/UI കിറ്റുകൾ ഇല്ല   ഉണ്ട്   ഉണ്ട്  
സാധാരണ ഫയൽ വലുപ്പം (ഒപ്റ്റിമൈസ് ചെയ്തത്) ചെറുത് (~27KB)   വലുത് (~300KB)   വലുത്  
പഠന വക്രം കൂടുതൽ (യൂട്ടിലിറ്റി ക്ലാസുകൾ പഠിക്കണം)   മിതമായത് മിതമായത് (ബൂട്ട്സ്ട്രാപ്പ് പശ്ചാത്തലമുള്ളവർക്ക് എളുപ്പം)  
ഡിസൈൻ നിയന്ത്രണം ഉയർന്നത്   പരിമിതം (അഭിപ്രായമുള്ളത്)   മിതമായത്
JS/jQuery ഉൾപ്പെടുന്നു ഇല്ല   ഉണ്ട്   ഇല്ല (സി‌എസ്‌എസ് മാത്രം)  

ഈ താരതമ്യം ടെയിൽ‌വിൻഡിന്റെ അതുല്യമായ സ്ഥാനത്തെ വ്യക്തമാക്കുന്നു. ഇത് കസ്റ്റം ഡിസൈനുകൾക്കും ഡിസൈൻ സിസ്റ്റങ്ങൾക്കും ഉയർന്ന വഴക്കം നൽകുന്നു, അതേസമയം പ്രകടനത്തിനായി ഫയൽ വലുപ്പം ഒപ്റ്റിമൈസ് ചെയ്യുന്നു. മറ്റ് ഫ്രെയിംവർക്കുകൾ വേഗതയേറിയ സജ്ജീകരണത്തിന് മുൻഗണന നൽകുമ്പോൾ, ടെയിൽ‌വിൻഡ് ഡെവലപ്പർമാർക്ക് അവരുടെ ഡിസൈനുകളിൽ പൂർണ്ണ നിയന്ത്രണം നൽകുന്നു, ഇത് “ബൂട്ട്സ്ട്രാപ്പ് ആപ്പ് പോലെ” തോന്നിക്കുന്ന പ്രശ്നം ഒഴിവാക്കുന്നു.  

കമ്മ്യൂണിറ്റിയും വിഭവങ്ങളും

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിന് ശക്തമായ ഒരു കമ്മ്യൂണിറ്റി പിന്തുണയുണ്ട്, ഇത് നിരവധി പ്ലഗിനുകൾ, ടൂളുകൾ, ലൈബ്രറികൾ എന്നിവ വാഗ്ദാനം ചെയ്യുന്നു. ഈ സഹായകരമായ അന്തരീക്ഷം “പഠന വക്രം” എന്ന പോരായ്മയെ നേരിട്ട് അഭിസംബോധന ചെയ്യുന്നു , കൂടാതെ ഫ്രെയിംവർക്കിന്റെ കഴിവുകൾ അതിന്റെ പ്രധാന യൂട്ടിലിറ്റി ക്ലാസുകൾക്കപ്പുറത്തേക്ക് വ്യാപിപ്പിക്കുകയും ചെയ്യുന്നു.  

  • UI ഘടക ലൈബ്രറികൾ: Flowbite (52+ സൗജന്യവും പ്രീമിയം പ്ലഗിനുകളും) , Tailwind UI (600+ ഔദ്യോഗിക UI ഘടകങ്ങൾ) , Headless UI (സ്റ്റൈലില്ലാത്തതും ആക്സസ് ചെയ്യാവുന്നതുമായ UI ഘടകങ്ങൾ).  
  • ഡിസൈൻ ടൂളുകൾ: Figma, Sketch, Adobe XD എന്നിവയ്ക്കുള്ള ഡിസൈൻ സിസ്റ്റങ്ങൾ.  
  • സഹായക ടൂളുകൾ: Tailwind CSS Cheat Sheet, CSS to Tailwind CSS Converter, Tailwind CSS Shades Generator, Tailwind CSS Gradient Generator.  
  • ഇന്റഗ്രേഷൻ ടൂളുകൾ: Gatsby, Vite, WordPress, Next.js, React, Vue.js, Svelte, Nuxt, Remix, Angular എന്നിവയുമായുള്ള ഇന്റഗ്രേഷനുകൾ.  

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് ഉപയോഗിച്ച് ഡിസൈൻ സിസ്റ്റങ്ങൾ നിർമ്മിക്കുന്നത് എളുപ്പമാണ്. Figma, Sketch, Adobe XD എന്നിവയ്ക്കുള്ള ഡിസൈൻ കിറ്റുകൾ ഇത് വാഗ്ദാനം ചെയ്യുന്നു, ഇത് UI പ്രോട്ടോടൈപ്പിംഗ് വേഗത്തിലാക്കുന്നു.  

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസിന് ഒരു സജീവ കമ്മ്യൂണിറ്റിയുണ്ട്, ഇത് ചോദ്യോത്തരങ്ങൾ, ഗൈഡുകൾ, ട്യൂട്ടോറിയലുകൾ, ഷോക്കേസ് പ്രോജക്റ്റുകൾ എന്നിവ നൽകുന്നു. ഇത് പഠന വക്രതയെ ലഘൂകരിക്കാൻ സഹായിക്കുന്നു. സമഗ്രമായ ഡോക്യുമെന്റേഷൻ, ചീറ്റ് ഷീറ്റുകൾ, കൺവെർട്ടറുകൾ എന്നിവ പഠന വക്രതയെ ലഘൂകരിക്കാൻ നേരിട്ട് സഹായിക്കുന്നു. Flowbite, Tailwind UI പോലുള്ള ലൈബ്രറികൾ, ടെയിൽ‌വിൻഡിന്റെ പ്രധാന തത്ത്വചിന്തയിൽ ഒഴിവാക്കിയിരുന്ന “മുൻകൂട്ടി നിർമ്മിച്ച ഘടകങ്ങൾ” ഫലപ്രദമായി നൽകുന്നു. ഇത് ഡെവലപ്പർമാർക്ക് രണ്ട് ലോകങ്ങളിലെയും നേട്ടങ്ങൾ ലഭിക്കുന്നു എന്ന് ഉറപ്പാക്കുന്നു: കസ്റ്റം ഡിസൈനുകൾക്ക് സൂക്ഷ്മമായ നിയന്ത്രണവും സാധാരണ UI പാറ്റേണുകൾക്ക് തയ്യാറായ ഘടകങ്ങളും.  

ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് ആധുനിക വെബ് ഡെവലപ്‌മെന്റിൽ ഒരു പ്രധാന ശക്തിയായി തുടരും. JIT മോഡിന്റെയും v4.0-ന്റെ പുതിയ എഞ്ചിന്റെയും ആവിർഭാവം അതിന്റെ പ്രകടനം, ഉപയോഗക്ഷമത, വെബ് പ്ലാറ്റ്‌ഫോമുമായുള്ള സംയോജനം എന്നിവ മെച്ചപ്പെടുത്തിയിട്ടുണ്ട്. ഇത് കൂടുതൽ കാര്യക്ഷമവും വഴക്കമുള്ളതുമായ സി‌എസ്‌എസ് വികസനത്തിനുള്ള വ്യവസായത്തിന്റെ ആവശ്യകതയെ പ്രതിഫലിക്കുന്നു.  

വിവിധ പ്രോജക്റ്റ് ആവശ്യകതകൾക്ക് ടെയിൽ‌വിൻഡ് സി‌എസ്‌എസ് എത്രത്തോളം അനുയോജ്യമാണ് എന്നതിനെക്കുറിച്ചുള്ള ശുപാർശകൾ താഴെ നൽകുന്നു:

അനുയോജ്യമായ സാഹചര്യങ്ങൾ:

  • കസ്റ്റം ഡിസൈനുകൾ ആവശ്യമുള്ള പ്രോജക്റ്റുകൾ: ബ്രാൻഡ് ഐഡന്റിറ്റിക്ക് ഊന്നൽ നൽകുന്ന, തനതായ ദൃശ്യാനുഭവം ആവശ്യമുള്ള വെബ് ആപ്ലിക്കേഷനുകൾ, വെബ്സൈറ്റുകൾ, ലാൻഡിംഗ് പേജുകൾ എന്നിവയ്ക്ക് ഇത് അനുയോജ്യമാണ്.  
  • വേഗതയേറിയ പ്രോട്ടോടൈപ്പിംഗ്: ഡിസൈനുകൾ വേഗത്തിൽ പരീക്ഷിക്കാനും ആവർത്തിക്കാനും ആഗ്രഹിക്കുന്ന ഡെവലപ്പർമാർക്ക് ഇത് മികച്ചതാണ്.  
  • ഡിസൈൻ സിസ്റ്റങ്ങൾ നടപ്പിലാക്കുന്ന പ്രോജക്റ്റുകൾ: ഒരു സ്ഥിരമായ ഡിസൈൻ സിസ്റ്റം നടപ്പിലാക്കാനും പരിപാലിക്കാനും ഇത് സഹായിക്കുന്നു.  
  • റിയാക്റ്റ്, വൂ, സ്വെൽറ്റ് പോലുള്ള ഫ്രണ്ട്-എൻഡ് ഫ്രെയിംവർക്കുകൾക്കൊപ്പം ഉപയോഗിക്കുമ്പോൾ: ഘടകങ്ങളെ പുനരുപയോഗിക്കാനും HTML-ലെ ക്ലാസുകളുടെ ആധിക്യം കുറയ്ക്കാനും ഇത് സഹായിക്കുന്നു.  

പരിഗണനകൾ:

  • ചെറിയ പ്രോജക്റ്റുകൾ അല്ലെങ്കിൽ ലളിതമായ UI-കൾ: വളരെ ലളിതമായ UI-കൾക്ക്, പിക്കോ സി‌എസ്‌എസ് പോലുള്ള ക്ലാസ്ലെസ് ഫ്രെയിംവർക്കുകൾ കൂടുതൽ ലളിതമായ സജ്ജീകരണം നൽകിയേക്കാം.  
  • പഠന വക്രം: ടീമിലെ അംഗങ്ങൾക്ക് ടെയിൽ‌വിൻഡിൽ പരിചയമില്ലെങ്കിൽ, പഠനത്തിനായി സമയം നീക്കിവെക്കേണ്ടത് അത്യാവശ്യമാണ്.  
  • HTML വെർബോസിറ്റി: വലിയ HTML ഫയലുകൾ അല്ലെങ്കിൽ “ക്ലാസ് സൂപ്പ്” ഒരു ആശങ്കയാണെങ്കിൽ, ഘടക-അധിഷ്ഠിത സമീപനങ്ങളോ @apply ഡയറക്റ്റീവിന്റെ വിവേകപൂർണ്ണമായ ഉപയോഗമോ പരിഗണിക്കാവുന്നതാണ്.  

ടെയിൽ‌വിൻഡിന്റെ അനുയോജ്യതയെക്കുറിച്ചുള്ള ഈ ശുപാർശകൾ, പ്രത്യേകിച്ച് “കസ്റ്റം ഡിസൈനുകൾക്കും” “ഡിസൈൻ സിസ്റ്റങ്ങൾക്കും” ഇത് എത്രത്തോളം ശക്തമാണെന്നും, “ചെറിയ പ്രോജക്റ്റുകൾക്കോ” “ലളിതമായ UI-കൾക്കോ” ഉള്ള അതിന്റെ സാധ്യതയുള്ള പോരായ്മകളും എടുത്തുപറയുന്നു. ഇത് ഫ്രെയിംവർക്ക് തിരഞ്ഞെടുക്കുന്നത് പ്രോജക്റ്റിന്റെ വ്യാപ്തി, ടീമിന്റെ വൈദഗ്ദ്ധ്യം, ഡിസൈൻ ആവശ്യകതകൾ എന്നിവയെ അടിസ്ഥാനമാക്കിയുള്ള ഒരു തന്ത്രപരമായ തീരുമാനമാണെന്ന് ഊന്നിപ്പറയുന്നു. ടെയിൽ‌വിൻഡിന്റെ യൂട്ടിലിറ്റി-ഫസ്റ്റ് സ്വഭാവം, തനതായ ഡിസൈനും ഒരു ഡിസൈൻ സിസ്റ്റത്തിന്റെ സ്ഥിരമായ പ്രയോഗവും പ്രധാനമാകുന്നിടത്ത് മികവ് പുലർത്തുന്നു. എന്നിരുന്നാലും, ലളിതമായ സൈറ്റുകൾക്കോ ഈ മാതൃകയിൽ പുതിയ ടീമുകൾക്കോ, പ്രാരംഭ സജ്ജീകരണവും ദൈർഘ്യവും അധിക ഭാരമായേക്കാം. React/Vue പോലുള്ള ഫ്രെയിംവർക്കുകളോടൊപ്പം ഇത് ഉപയോഗിക്കുന്നത്, “ക്ലാസ് സൂപ്പ്” പുനരുപയോഗിക്കാവുന്ന ഘടകങ്ങളായി ഉൾക്കൊള്ളാൻ അനുവദിക്കുന്നതിലൂടെ ദൈർഘ്യം കുറയ്ക്കുന്നു. ഇത് ഫ്രണ്ട്-എൻഡ് വികസനം കൂടുതൽ മോഡുലാർ ആവുകയും, ഡെവലപ്പർമാർക്ക് പ്രത്യേക ടൂളുകൾ (സ്റ്റൈലിംഗിനായി ഒരു യൂട്ടിലിറ്റി ഫ്രെയിംവർക്ക്, ഘടനയ്ക്കായി ഒരു ഘടക ഫ്രെയിംവർക്ക്) തിരഞ്ഞെടുത്ത് സംയോജിപ്പിക്കാൻ കഴിയുന്ന ഒരു ഭാവിയിലേക്ക് വിരൽ ചൂണ്ടുന്നു.

CSS3 new attribute selectors

Posted on by Rajesh Odayanchal

CSS3 introduce 3 new selectors for the sub-string or matching attributes. they are [att^=val], [att$=val] and [att*=val]. these selectors coming under Sub-string Matching Attribute Selectors section.

[att^=val]

This is the “begins with” selector. This selector allows for the selection of elements where a specified attribute begins with a specified string. example:

<pre>a[alt~=”Kerala”] { color:#00aa00; font-size:14px; border:1px solid #00aa00; padding:3px 10px; font-family:Arial, Helvetica, sans-serif;  text-decoration:none; margin:2px; background:#afa }</pre>

<code>a[alt~=”Karnataka”] { color:#0000aa; font-size:14px; border:1px solid #0000aa; padding:3px 10px; font-family:Arial, Helvetica, sans-serif; text-decoration:none; margin:2px; background:#aaf }</code>

CSS Positioning

Posted on by Rajesh Odayanchal
Position:Static

The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.
Normally you wouldn’t specify this unless you needed to override a positioning that had been previously set.

#div-1 {   
position:static;  }

 

Position:Relative

If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

Let’s move div-1 down 20 pixels, and to the left 40 pixels:

#div-1 {   
position:relative;
top:20px;
left:-40px;  }

Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. The next element (div-after) did not move when we moved div-1. That’s because div-1 still occupies that original space in the document, even though we have moved it.

It appears that position:relative is not very useful, but it will perform an important task later in this tutorial.

Position:Absolute

When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

Let’s move div-1a to the top right of the page:

#div-1a {   
position:absolute;   
top:0;   
right:0;   
width:200px;  }

Notice that this time, since div-1a was removed from the document, the other elements on the page were positioned differently: div-1b, div-1c, and div-after moved up since div-1a was no longer there.

Also notice that div-1a was positioned in the top right corner of the page. It’s nice to be able to position things directly the page, but it’s of limited value.

What I really want is to position div-1a relative to div-1. And that’s where relative position comes back into play.

Footnotes
  • There is a bug in the Windows IE browser: if you specify a relative width (like “width:50%”) then the width will be based on the parent element instead of on the positioning element.
Position:Relative + Position:Absolute

If we set relative positioning on div-1, any elements within div-1 will be positioned relative to div-1. Then if we set absolute positioning on div-1a, we can move it to the top right of div-1:

#div-1 {   
position:relative;  }  


#div-1a {   
position:absolute;   
top:0;   
right:0;   
width:200px;  }
Two Column Absolute

Now we can make a two-column layout using relative and absolute positioning!

#div-1 {   
position:relative;  }  


#div-1a {   
position:absolute;  
 top:0;   
right:0;   
width:200px;  } 


 #div-1b {   
position:absolute;  
 top:0;   
left:0;   
width:200px;  }

One advantage to using absolute positioning is that we can position the elements in any order on the page, regardless of the order they appear in the HTML. So I put div-1b before div-1a.

But wait – what happened to the other elements? They are being obscured by the absolutely positioned elements. What can we do about that?

 

float

For variable height columns, absolute positioning does not work, so let’s come up with another solution.

We can “float” an element to push it as far as possible to the right or to the left, and allow text to wrap around it. This is typically used for images, but we will use it for more complex layout tasks (because it’s the only tool we have).

#div-1a {   
float:left;  
 width:200px;  }
float columns

If we float one column to the left, then also float the second column to the left, they will push up against each other.

#div-1a {  
float:left;   
width:150px;  }  


#div-1b {   
float:left;   
width:150px;  }

float columns with clear

Then after the floating elements we can “clear” the floats to push down the rest of the content.

#div-1a {   
float:left;  
 width:190px;  }  


#div-1b {   
float:left;  
width:190px;  }  


#div-1c {   
clear:both;  }

Efficient CSS with shorthand properties

Posted on by Rajesh Odayanchal

Efficient CSS with shorthand properties

I get a lot of questions about CSS from people who aren’t crazy enough to have spent the thousands of hours working with CSS that I have. Sometimes I’m asked to take a look at something they’re working on to see if I can figure out why it doesn’t work as expected. When I look at their CSS I often find that it’s both bloated and unorganised.

One of the reasons for using CSS to layout websites is to reduce the amount of HTML sent to site visitors. To avoid just moving the bloat from HTML to CSS, you should try to keep the size of your CSS files down as well, and I thought I’d explain my favourite CSS efficiency trick: shorthand properties. Most people know about and use some shorthand, but many don’t make full use of these space saving properties.

Some background

Shorthand properties can be used to set several properties at once, in a single declaration, instead of using a separate declaration for each individual property. As you’ll see, this can save a lot of space in your CSS file.

Quite a few shorthand properties are available – for details I suggest the W3C CSS specifications of the background, border, border-color, border-style, border sides (border-top, border-right, border-bottom, border-left), border-width, font, list-style, margin, outline, and paddingproperties.

Colours

The most common way of specifying a colour in CSS is to use hexadecimal notation: an octothorpe (#) followed by six digits. You can also use keywords and RBG notation, but I always use hexadecimal. One great shortcut that many don’t know about is that when a colour consists of three pairs of hexadecimal digits, you can omit one digit from each pair:

#000000 becomes #000, #336699 becomes #369.

Box dimensions

The properties that affect box dimensions share the same syntax: the shorthand property followed by one to four space separated values:

  • property:value1;

  • property:value1 value2;

  • property:value1 value2 value3;

  • property:value1 value2 value3 value4;

Which sides of the box the values affect depends on how many values you specify. Here’s how it works:

  • One value: all sides

  • Two values: top and bottom, right and left

  • Three values: top, right and left, bottom

  • Four values: top, right, bottom, left

Thinking of the face of a clock is an easy way of remembering which side each value affects. Start at 12 o’clock (top), then 3 (right), 6 (bottom), and 9 (left). You can also think of the TRouBLe you’ll be in if you don’t remember the correct order – I first saw this in Eric Meyer’s excellent book Eric Meyer on CSS.

Margin and padding

Using shorthand for these properties can save a lot of space. For example, to specify different margins for all sides of a box, you could use this:

  1. margin-top:1em;

  2. margin-right:0;

  3. margin-bottom:2em;

  4. margin-left:0.5em;

But this is much more efficient:

  1. margin:1em 0 2em 0.5em;

The same syntax is used for the padding property.

Borders

Borders are slightly more complicated since they can also have a style and a colour. To give an element a one pixel solid black border on all sides, you could use the following CSS:

  1. border-width:1px;

  2. border-style:solid;

  3. border-color:#000;

A more compact way would be to use the border shorthand:

  1. border:1px solid #000;

I always specify border values in that order:

  1. border:width style color;

Most browsers don’t care about the order, and according to the specification they shouldn’t, but I don’t see a reason for not using the same order as the W3C does in the specification. There’s always the chance of a browser being very strict about the order of shorthand values.

The same syntax can be used with the border-top, border-right, border-bottom, and border-left shorthand properties to define the border of any single side of a box.

You don’t have to specify all three values. Any omitted values are set to their initial values. The initial values are medium for width, none for style, and the value of the element’s color property for color.

How wide a medium border is depends on the user agent.

Note that since the initial value for style is none you do need to specify a style if you want the border to be visible.

The border-width, border-style, and border-color properties used in the first border example above are themselves shorthand properties. Their longhand alternatives are very rarely used, but they do exist:

  1. border-width:1px 2px 3px 4px;

is shorthand for

  1. border-top-width:1px;

  2. border-right-width:2px;

  3. border-bottom-width:3px;

  4. border-left-width:4px;

The border-style and border-color shorthands use the same syntax as border-width: the box dimensions syntax described above.

Using the various border shorthands can also save some typing when you want to give an element’s border different properties on different sides. These declarations will make an element’s right and bottom borders solid, black, and one pixel wide:

  1. border-right:1px solid #000;

  2. border-bottom:1px solid #000;

And so will these:

  1. border:1px solid #000;

  2. border-width:0 1px 1px 0;

First the borders on all sides are styled identically, and then the different widths are specified.

Backgrounds

Another very useful shorthand property is background. Instead of using background-color, background-image, background-repeat, background-attachment, and background-position to specify an element’s background, you can use just background:

  1. background-color:#f00;

  2. background-image:url(background.gif);

  3. background-repeat:no-repeat;

  4. background-attachment:fixed;

  5. background-position:0 0;

can be condensed to

  1. background:#f00 url(background.gif) no-repeat fixed 0 0;

Like with the border shorthands the order of the values isn’t supposed to matter, but I’ve seen reports of early versions of Safari having problems when the values aren’t listed in the order used in the W3C specification, which is this:

  1. background:color image repeat attachment position;

Remember that when you give two values for position, they have to appear together. When using length or percentage values, put the horizontal value first.

As with the border and border sides properties, you don’t have to specify all values. If a value is omitted, its initial value is used. The initial values for the individual background properties are as follows:

  • color: transparent

  • image: none

  • repeat: repeat

  • attachment: scroll

  • position: 0% 0%

This means that it’s pointless to use the background shorthand without giving a value for either color or image – doing so would make the background transparent.

I almost always use the background shorthand to specify background colours for elements, since background:#f00; is the same as background-color:#f00;.

Remember that this will remove any background image specified by a previous rule. Consider these rules:

  1. p {

  2. background:#f00 url(image.gif) no-repeat;

  3. }

  4. div p {

  5. background:#0f0;

  6. }

All paragraphs not in a div element will have a background image and be red where the image doesn’t cover the background. Any paragraph that is in a div will have a green background, and no background image.

Fonts

As with the background property, font can be used to combine several individual properties:

  1. font-style:italic;

  2. font-variant:small-caps;

  3. font-weight:bold;

  4. font-size:1em;

  5. line-height:140%;

  6. font-family:"Lucida Grande",sans-serif;

Can be combined into

  1. font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

Again, when it comes to the order of the values, I see no reason not to use the order given by the W3C. Better safe than sorry.

When using the font shorthand you can omit any values except font-size and font-family – you always need to give values for those, and in that order. The initial values for the individual font properties are these:

  • font-style: normal

  • font-variant: normal

  • font-weight: normal

  • font-size: medium

  • line-height: normal

  • font-family: depends on the user agent

Lists

The shorthand property for ordered and unordered lists is list-style. I personally only use it to set the list-style-type property to none, which removes any bullets or numbering from the list:

  1. list-style:none;

instead of

  1. list-style-type:none;

You can also use it to set the list-style-position and list-style-image properties, so to specify that unordered lists should render their list item markers inside each list item, use an image for the list item markers, and use squares if that image is not available, the following two rules would do the same thing:

  1. list-style:square inside url(image.gif);

is shorthand for

  1. list-style-type:square;

  2. list-style-position:inside;

  3. list-style-image:url(image.gif);

Outlines

The outline property is very rarely used, mainly because of its current poor browser support – as far as I know only Safari, OmniWeb and Opera currently support it. Anyway, using the individual properties you can define an outline like this:

  1. outline-color:#f00;

  2. outline-style:solid;

  3. outline-width:2px;

or like this:

  1. outline:#f00 solid 2px;

Outlines have some interesting characteristics that make them useful: unlike borders, they do not take up any space and are always drawn on top of a box. This means that hiding or showing outlines doesn’t cause reflow, and they don’t influence the position or size of the element they are applied to or that of any other boxes. Outlines may also be non-rectangular.

Referred from : http://www.456bereastreet.com

Selector syntax

Posted on by Rajesh Odayanchal

A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order. The simple selector matches if all of its components match.

A selector is a chain of one or more simple selectors separated by combinators. Combinators are: whitespace, “>”, and “+”. Whitespace may appear between a combinator and the simple selectors around it.

The elements of the document tree that match a selector are called subjects of the selector. A selector consisting of a single simple selector matches any element satisfying its requirements. Prepending a simple selector and combinator to a chain imposes additional matching constraints, so the subjects of a selector are always a subset of the elements matching the rightmost simple selector.

One pseudo-element may be appended to the last simple selector in a chain, in which case the style information applies to a subpart of each subject.

The Complete CSS Tags

Posted on by Rajesh Odayanchal

Text and Fonts

font

Colours and Backgrounds

The Box Model – dimensions, padding, margin and borders

Positioning and Display

Lists

Tables

Generated Content

Paged Media

Misc.

The Whole Shebang

Rounded Corners

Posted on by Rajesh Odayanchal

When New WordPress started using this i though you know Internet Explorer is definitely out now when i’m doing some css work that needs rounded corners I’m mostly using only this technique because buyers are ok with it although it’s just for FireFox and Safari. And since most of people still don’t know about this i figured it’s good thing to share.

Of course i’m talking about Border-radius property for FireFox and Safari 3 (only). And here are some nice examples how to use it.

#box { background: #eee; border: 1px solid #ccc; padding: 15px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }

And of course you don’t have to make all corners rounded, it can be just top left etc, so the code goes like this (small not, for example you can’t make rounded corners on images and stuff like that)

* -moz-border-radius-topleft and -webkit-border-top-left-radius
* -moz-border-radius-topright and -webkit-border-top-right-radius
* -moz-border-radius-bottomleft and -webkit-border-bottom-left-radius
* -moz-border-radius-bottomright and -webkit-border-bottom-right-radius

100% height model css?

Posted on by Rajesh Odayanchal

I had been looking around for a way to accomplish fixed header and footer on a website when scrolling, and somehow i haven’t got it right with background attachment: fixed, neither i got it with absolute position…

I have a main Div called wrapper, inside there are three main Divs: header, content and footer, and each one of them has sub Divs inside for the content of each one. So the structure goes something like this in general terms:

body[

[ Div:wrapper
Div:Header
Div:top-banner
Div:Menu
Div:Buttons
]
[Div:Content]

[Div:Footer
Div:bottom-banner
]
]

is there any way to accomplish that the header and footer remain “locked” at the top and bottom of the browser window and only the content scrolls down.

See Here is the proper solution:

html, body {
height: 100%;
}

body {
any other styles;
}

#container {
min-height: 100%;
other styles;
}
* html #container {height: 100%;}/*IE6*/

this way, your page start out 100% but can grow bigger as content demands.

CSS font shorthand rule

Posted on by Rajesh Odayanchal

When styling fonts with CSS you may be doing this:
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;

There’s no need though as you can use this CSS shorthand property:
font: 1em/1.5em bold italic small-caps verdana,serif

Much better! Just a couple of words of warning: This CSS shorthand version will only work if you’re specifying both the font-size and the font-family. Also, if you don’t specify the font-weight, font-style, or font-varient then these values will automatically default to a value of normal, so do bear this in mind too.