CSS-in-JS இல்லாமலேயே டைனமிக் தீமிங் (Dynamic Theming)
நான் styled-components-ன் மிகப்பெரிய ரசிகனாக இருந்தேன். அதன் நெகிழ்வுத்தன்மை (flexibility) எனக்கு மிகவும் பிடித்திருந்தது. ஆனால் பிறகு ஒரு சவாலைச் சந்தித்தேன்.
ஒரு திட்டத்தில் (project) runtime எடையைக் குறைக்க வேண்டியிருந்தது. அதனால் நான் CSS Modules மற்றும் native CSS-ஐ முயற்சி செய்ய முடிவு செய்தேன். அதன் முடிவு என்னை ஆச்சரியப்படுத்தியது. எனது திட்டங்களிலிருந்து styled-components, Emotion மற்றும் goober ஆகியவற்றை நீக்கிவிட்டேன். எனக்குத் தேவையான எதையும் நான் இழக்கவில்லை.
இதில் கிடைத்த மிகப்பெரிய வெற்றி வெறும் செயல்திறன் (performance) மட்டுமல்ல. ஸ்டைலிங் சார்ந்த சார்புநிலையை (styling dependency) நீக்கியதுதான் முக்கியம். ஒரு திட்டத்தில், CSS-in-JS runtime ஆனது client bundle-ல் 30% இடத்தைப் பிடித்திருந்தது.
Plain CSS இப்போது மிகவும் முன்னேறிவிட்டது. இந்தத் பணிகளுக்காக நீங்கள் இனி கனமான JS libraries-களைப் பயன்படுத்தத் தேவையில்லை:
• Nesting: native CSS nesting-ஐப் பயன்படுத்தவும். • Color shifts: color-mix() பயன்படுத்தவும். • Specificity control: @layer பயன்படுத்தவும். • Responsive components: container queries பயன்படுத்தவும்.
ஒரே ஒரு கோப்பு மற்றும் custom properties-களைப் பயன்படுத்தி ஒரு தீமை (theme) எவ்வாறு உருவாக்குவது என்பது இதோ:
- ஒரு CSS கோப்பில் tokens-களை வரையறுக்கவும்.
:root {
--color-bg: #ffffff;
--color-text: #1a1a1a;
--color-accent: #3c7dc4;
}
[data-theme="dark"] {
--color-bg: #14161a;
--color-text: #f5f5f0;
--color-accent: #6aa6e8;
}
- அந்த மாறிகளை (variables) உங்கள் components-களில் பயன்படுத்தவும்.
.button {
background: var(--color-accent);
color: var(--color-bg);
}
- ஒரே ஒரு attribute-ஐ மாற்றுவதன் மூலம் தீம்களை (themes) மாற்றலாம்.
function setTheme(theme) {
document.documentElement.dataset.theme = theme;
localStorage.setItem("theme", theme);
}
Components-களுக்கு ThemeProvider தேவையில்லை. அவை மீண்டும் render செய்யப்பட வேண்டிய அவசியமும் இல்லை. பிரவுசர் (browser) cascade மூலம் இந்த மாற்றத்தைக் கையாளுகிறது. இது உங்கள் பயன்பாட்டின் (app) பெரும்பகுதியை Server Components-களாக வைத்திருக்க உதவுகிறது.
பக்கம் ஏற்றப்படும்போது (page load) தவறான தீம் தோன்றும் "flash" சிக்கலைத் தவிர்க்க, உங்கள் HTML head-ல் ஒரு சிறிய inline script-ஐப் பயன்படுத்தவும்:
Runtime-ல் ஸ்டைல்களை உருவாக்க JS-ஐப் பயன்படுத்துவதை நிறுத்துங்கள். உங்கள் tokens-களுக்கு native CSS variables-களைப் பயன்படுத்துங்கள். இது குறைவான குறியீட்டையும் (code), வேகமான லோடிங் நேரத்தையும் வழங்கும்.
Source: https://dev.to/kirill_c_7b35589230/dynamic-theming-without-css-in-js-d7e