CSS Variables or Context
We are currently using SCSS. If we are doing theming (light, dark, white labeling) of our product, should we be using React Context or CSS variables?
Additionally: should our CSS variables be var(--primary-blue-500) and referencing a color value directly or should we be doing something liike var(--combobox-border-color) and reference the values all per component CSS property?
2 Replies
css variables are better
via context you will get annoyed by bad hydration
and for the naming
--primary-blue-500 is more composable than --combobox-border-color
both should work, but semantic naming most of the time is annoying to reason withespecially if you later decide that you want something else to use the same colour, and have to either define another variable for that item, or have it using the wrong named variable, both leading to confusion down the road.