Hacker News new | ask | show | jobs
by quickthrower2 2023 days ago
What’s the advantage of this over they style attribute given that you are already in JS land.
1 comments
gustavnikolaj 2023 days ago
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/

[2]: https://github.com/css-modules/css-modules

link
quickthrower2 2022 days 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.
link