𝗗𝘆𝗻𝗮𝗺𝗶𝗰 𝗧𝗵𝗲𝗺𝗶𝗻𝗴 𝗪𝗶𝘁𝗵𝗼𝘂𝘁 𝗖𝗦𝗦-𝗶𝗻-𝗝𝗦
ਮੈਂ styled-components ਦਾ ਬਹੁਤ ਵੱਡਾ ਪ੍ਰਸ਼ੰਸਕ ਸੀ। ਮੈਨੂੰ ਇਸਦੀ ਲਚਕਤਾ (flexibility) ਬਹੁਤ ਪਸੰਦ ਸੀ। ਫਿਰ ਮੈਂ ਇੱਕ ਰੁਕਾਵਟ ਦਾ ਸਾਹਮਣਾ ਕੀਤਾ।
ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ runtime weight ਘਟਾਉਣ ਦੀ ਲੋੜ ਸੀ। ਮੈਂ 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 ਨੂੰ define ਕਰੋ।
: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 ਨੂੰ switch ਕਰੋ।
function setTheme(theme) { document.documentElement.dataset.theme = theme; localStorage.setItem("theme", theme); }
Components ਨੂੰ ThemeProvider ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਉਹਨਾਂ ਨੂੰ re-render ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। Browser cascade ਰਾਹੀਂ update ਨੂੰ ਸੰਭਾਲ ਲੈਂਦਾ ਹੈ। ਇਹ ਤੁਹਾਡੀ ਐਪ ਦੇ ਜ਼ਿਆਦਾਤਰ ਹਿੱਸੇ ਨੂੰ Server Components ਵਿੱਚ ਰੱਖਦਾ ਹੈ।
ਪੇਜ ਲੋਡ ਹੋਣ ਸਮੇਂ ਗਲਤ theme ਦੇ "flash" ਤੋਂ ਬਚਣ ਲਈ, ਆਪਣੇ HTML head ਵਿੱਚ ਇੱਕ ਛੋਟਾ ਜਿਹਾ inline script ਵਰਤੋ:
Runtime 'ਤੇ styles ਬਣਾਉਣ ਲਈ JS ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਬੰਦ ਕਰੋ। ਆਪਣੇ tokens ਲਈ native CSS variables ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਸ ਨਾਲ ਕੋਡ ਘੱਟ ਹੁੰਦਾ ਹੈ ਅਤੇ load times ਤੇਜ਼ ਹੁੰਦੇ ਹਨ।
ਸਰੋਤ: https://dev.to/kirill_c_7b35589230/dynamic-theming-without-css-in-js-d7e