2 ms·
What’s the advantage of this over they style attribute given that you are already in JS land.
by quickthrower2 6y ago
What’s the advantage of this over they style attribute given that you are already in JS land.
- gustavnikolaj 6y agoWhen you say "style"-attribute, I assume that you mean JSX. If you use JSX, you already have at least a transpiler, and some framework. This is not a competitor to inline-styling via style-attributes, but more of an alternative to styled-components [1] or css-modules [2]. The big benefit with a solution like this is that it will work in browsers with no tooling at all. No transpiling or other code needed. [1]: https://styled-components.com/ https://styled-components.com/ [2]: https://github.com/css-modules/css-modules https://github.com/css-modules/css-modules
- quickthrower2 6y agoI didn't mean JSX. Here is an example: import { css, classes, } from "https://unpkg.com/stylewars@1.6.0/dist/bundle.esm.min.js"; const buttonStyles = css` & { border-radius: 4px; background: #587894; color: white; border: none; padding: 0.5em 2em; } &:hover { background: #89a2b9; } `; document.getElementById('root').classList.add(buttonStyles); VERSUS const buttonStyles = { borderRadius: '4px', background: '#587894', color: 'white', border: 'none', padding: '0.5em 2em' } Object.assign(document.getElementById('root').style,buttonStyles); Admittedly I don't know how to cover hover but I'm sure it could be figured out, or just use JS events.