[ookblah]

padding 48, on small screens vertical padding 32 and horizontal padding 24, center styled? try doing that inline....

i always see this and never understand the pushback, or have people never worked on large apps spanning hundreds/thousands of components and have to maintain it.

it's a godsend when working on older components and i don't have to dig thru some other css file and figure out exactly how and why i named it. inline css doesn't allow to do transitions, animations, responsive breakpoints, etc. everything is there is contextual and i never break flow going from design to implementation. you still can have global styles or can have a master design guide.

[hunterb123]

> 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.

[likeclockwork]

> 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?

[hunterb123]

> 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...