4 ms·

> I don't have some `colors.scss` with a bunch of constants, and then redefine those same constants in my .js anywhere -- I have a .js file with my palette. Th

> I don't have some `colors.scss` with a bunch of constants, and then redefine those same constants in my .js anywhere -- I have a .js file with my palette. Thank you for your reply. Do you have an example repo of using this pattern? I'm afraid I'm not terribly familiar with _not_ having any css files and instead defining it in a js file. create-react-app maintained by facebook doesn't seem to follow this pattern (unless I'm misunderstanding).

jkoudys 8y ago
[emotion](https://github.com/emotion-js/emotion https://github.com/emotion-js/emotion) is the main lib doing it now -- it's pretty popular among the React crowd, and sits at 5k stars right now. It's a nice, gradual transition, since it mostly follows scss-like syntax, and the docs all use tagged templates. e.g. `const className = css\`p { font-size: 16px; }\`;`, but `const className = css({ p: { fontSize: '16px' } });` works fine too. What's cool is you can use the same obj conventions for the CSS as a React component's `style` prop, or a regular Node's style. e.g. if I have `const headerColor = { color: '#ff0000', backgroundColor: '#00ff00' };`, I can say `<div style={headerColor}>`, or `Object.assign(document.querySelector('p').style, headerColor)` too.