Hacker News Reader

Comment by willsmith72 | Hacker News Reader

I hate having to give everything a name like people do in react native stylesheets. Give me an inline performant style prop any day

View on HN

Hey! I'm the maintainer of StyleX and I just wanted to say that you would probably like PandaCSS or Tamagui.

We don't think the Tailwind way of styling is readable in the long term, but we see the value is being able to author that way. We're looking into a VS Code plugin, that would let you author your styles inline and extract them out when you save.

Fair enough, that would be a good start. I just see such a smooth workflow in being able to do styles for elements with only a few custom styles inline.

I mentioned below, I do this with mui sx right now when <= 4 styles

E.g. sx={{ alignSelf: 'flex-end' }}

I think the reason it works so well is the same reason people love tailwind (it's all in one place), so the plugin would be helpful but still take away from that workflow when it comes to reading and maintaining.

You already have to name your CSS classes, and atomic CSS libraries are chock full of names you must learn.

What do you mean "inline style prop," writing CSS in the HTML style attribute? That's a nightmare to manage across large apps, not composable or reusable, and this library compiles to performant styling (according to the authors/examples).

To anyone for which learning lots of names of things that you use semi-frequently is a bottleneck: you can use spaced repetition (https://en.wikipedia.org/wiki/Spaced_repetition) to remember them way more easily. I use Anki (https://apps.ankiweb.net/), SuperMemo is another option (with other features, and lots of interesting articles on their website).

For example, I've been using it to remember shell commands and options. Now whenever I have to search for an option that I think will be useful in the future, for example `-M/--max-columns` for ripgrep, I put it in Anki (question: "Ripgrep: Search for 'clukay' and don't print columns longer than 200 bytes", answer: "rg -M/--max-columns 200 clukay"). Each day I review my cards (~5/10 minutes at most). I used to not be able to remember an option like that that I use once a week, but now I can.

For more info on how to use it effectively, I've found https://borretti.me/article/effective-spaced-repetition to be really helpful.

Nitpick, but most atomic css libraries name things fairly consistently. In addition, you only have to memorize the names once. After that learning curve, you never have to think of a class name again.

In addition, with robust IDE support, you can type the css attribute and get autocomplete suggestions for the relevant utility.

So we're told every time. Is it "2xl" or "xxl" for the breakpoint again? It depends on the library (hopefully you didn't customize it!). Was it Tachyons or Bulma that has "ns" for "not small?"

> you only have to memorize the names once

Yep! After that it's as simple as dark:hover:md:motion-reduce:text-base/7

> you never have to think of a class name again

Unless you're using Tailwind's custom themes, arbitrary groups, peers...

e.g. using mui sx. the downside is the runtime performance cost

https://mui.com/system/getting-started/usage/#performance-tr...

i don't want to reuse or compose my styles, i just want to add alignSelf: 'flex-end' and then easily be able to change it and see the styles in one place, without leaving the component definition. the reusability and composition is at the component level

Thanks! Great reason this beats MUI.

Not trying to hate on atomic CSS, composable classes and style tokens are good. Even one of the devs on this project commented on them here:

> We don't think the Tailwind way of styling is readable in the long term, but we see the value is being able to author that way

https://news.ycombinator.com/item?id=38540629

The docs here mention the downsides though.

> Great reason this beats MUI.

Not at all, mui gives you the option to do either.

I don't want my style library being opinionated about my coding style.

Ohh I see, I honestly didn't click the first time. You meant sx in MUI, not StyleX. We're gonna need more names.

Inline styles by themselves don't support a lot of necessary CSS things like media and child selectors. You lose the "cascading" part of CSS...

Try out Tamagui which solves this - child and media selectors, even container queries and stuff like container + pseudo.

Unclear if they mean inline styles as in "the HTML attribute" or a React prop. Tamagui doesn't solve the former.

Reply on news.ycombinator.com