Uwekaji Mandhari wa Kidinamiki Bila CSS-in-JS

Nilikuwa shabiki mkubwa wa styled-components. Nilipenda uwezo wake wa kubadilika. Kisha nikakwama.

Mradi mmoja ulihitaji kupunguza uzito wa runtime. Niliamua kujaribu CSS Modules na CSS asilia. Matokeo yalinishangaza. Nilifuta styled-components, Emotion, na goober kutoka kwenye miradi yangu. Sikupoteza kitu chochote ambacho nilikuwa nakihitaji kweli.

Ushindi mkubwa haukuwa ufanisi tu. Ulikuwa ni kuondoa utegemezi wa styling. Katika mradi mmoja, runtime ya CSS-in-JS ilichukua 30% ya client bundle.

CSS ya kawaida imekua. Hutaji tena maktaba nzito za JS kwa kazi hizi:

• Nesting: Tumia native CSS nesting. • Color shifts: Tumia color-mix(). • Specificity control: Tumia @layer. • Responsive components: Tumia container queries.

Hivi ndivyo unavyounda mandhari (theme) ukitumia faili moja tu na custom properties.

  1. Bainisha token kwenye faili ya CSS.
:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-accent: #3c7dc4;
}

[data-theme="dark"] {
  --color-bg: #14161a;
  --color-text: #f5f5f0;
  --color-accent: #6aa6e8;
}
  1. Tumia variable hizo kwenye vipengele vyako.
.button {
  background: var(--color-accent);
  color: var(--color-bg);
}
  1. Badilisha mandhari kwa kubadilisha attribute moja tu.
function setTheme(theme) {
  document.documentElement.dataset.theme = theme;
  localStorage.setItem("theme", theme);
}

Vipengele (Components) havihitaji ThemeProvider. Havihitaji ku-re-render. Kivinjari hushughulikia mabadiliko kupitia cascade. Hii huweka sehemu kubwa ya programu yako kwenye Server Components.

Ili kuepuka "flash" ya mandhari isiyo sahihi wakati ukurasa unapofunguka, tumia inline script ndogo kwenye HTML head yako:

<script>
  const t = localStorage.getItem("theme") || 
  (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  document.documentElement.dataset.theme = t;
</script>

Acha kutumia JS kutengeneza styling wakati wa runtime. Tumia native CSS variables kwa token zako. Inasababisha msimbo mdogo na muda wa kupakia wa haraka zaidi.

Chanzo: https://dev.to/kirill_c_7b35589230/dynamic-theming-without-css-in-js-d7e