Hacker News new | ask | show | jobs
by hunterb123 1729 days ago
> try doing that inline....

My point was the end result is the same as inline, yes it's less verbose than inline but it's more obscure unless you have all the shorthand class names memorized. It's just a messy string, can you even make that type safe?

> and i don't have to dig thru some other css file

That's a separate issue solved via CSS-in-JS in general. I believe your styles should be isolated to your component, preferably in the same file, not global. That doesn't mean we have to shove styling in the className string attribute.
1 comments
likeclockwork 1729 days ago
> My point was the end result is the same as inline, yes it's less verbose than inline but it's more obscure unless you have all the shorthand class names memorized.

It's not the same as inline styles because it expresses things that inline styles fundamentally cannot. Inline styles don't have media queries or selectors.

> It's just a messy string, can you even make that type safe?

WTF? Is any other HTML class string typesafe?

link
hunterb123 1729 days ago
> It's not the same as inline styles because it expresses things that inline styles fundamentally cannot. Inline styles don't have media queries or selectors.

Okay, it's as if you added media queries and selectors to inline styles. It's still a nightmare to read like inline styles. It's terse, but as a result it's also more cryptic. It leads to long strings of near gibberish until you carefully read it out.

> WTF? Is any other HTML class string typesafe?

My point is a className string is not typesafe, my styles are fully typed, because it's normal TypeScript. Shoving styles into a string would remove that feature.

I get autocomplete and type checking for the component styles, for example, if it's a view component then it only gets view styles, trying to apply "color" will result in a error.

It's incredibly useful to have autocomplete and type checking for your styles because there are so many combinations of properties. You don't want to supply a number when a string is expected for a font weight, you don't want to supply a value that isn't supported, you don't want to apply a text property that will have no effect on a view element.

Example: https://codesandbox.io/s/dazzling-leaf-rjv7v?file=/src/app/u...

link