4 ms·

When 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 competito

When 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 ago
I 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.