Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

StyleX – Meta's styling library

stylexjs.com

Post reply on HN
Print view View original

71–80 of 86 posts

Re: StyleX – Meta's styling library

#71

Post by Zababa »

cantSpellSober wrote: post #23
willsmith72 wrote: post #7

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

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.

Re: StyleX – Meta's styling library

#72

Post by willsmith72 »

cantSpellSober wrote: post #66
willsmith72 wrote: post #51

Earlier quoted context omitted.

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.

Re: StyleX – Meta's styling library

#73

Post by willsmith72 »

naman34 wrote: post #54
willsmith72 wrote: post #7

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

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

Re: StyleX – Meta's styling library

#74

Post by joshmanders »

danr4 wrote: post #63
joshmanders wrote: post #58

Earlier quoted context omitted.

No, I worked on internal facing stuff that was only accessible by dealers

Sounds like simple crud apps that barely need styling and can use existing component libraries.

Ah yes, a 5 year, hundreds of engineers, multi-million dollar project to take 1980's terminal computer ordering system for millions of Deere dealerships and bring it to the modern ages through a web app is just a simple crud app that barely needs styling.

Do you ever just re-read your replies and think "I'm being ridiculous" and decide NOT to post it? You should do that more often.

Re: StyleX – Meta's styling library

#75

Post by nojvek »

CSS in JS is really a great concept to keep component logic colocated.

Although I’m really in love with @emotion/css where I can still write and copy paste css-snippets instead of translating into js object syntax.

Re: StyleX – Meta's styling library

#76

Post by blsapologist42 »

nwienert wrote: post #59
naman34 wrote: post #53

Earlier quoted context omitted.

Hey! We support dynamic styles, too. We're continuing to work on optimisations for StyleX, and I'll be looking at Tamagui for inspiration!

I got the impression it was not dynamic values? Just that you can combine static objects dynamically. If I’m wrong I’ll re read the docs but someone else pointed that out to me and linked part of the docs that seemed to indicate that.

It does support dynamic values.

Re: StyleX – Meta's styling library

#77

Post by cantSpellSober »

willsmith72 wrote: post #72
cantSpellSober wrote: post #66

Earlier quoted context omitted.

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.

Re: StyleX – Meta's styling library

#78

Post by mdhb »

paranoidxprod wrote: post #67
_fcs wrote: post #62

Earlier quoted context omitted.

Could you share some resources that you have found useful to renew basic CSS knowledge?

This and the rest of his content were very useful resources imo. https://www.joshwcomeau.com/css/interactive-guide-to-flexbox...

I think Flexbox specifically is around about the time a lot of people last looked at CSS and it’s actually everything after that that I was referring to.

I think this resource is pretty well put together from the Chrome dev rel folks https://web.dev/learn/css it obviously goes from 0 so you can pick and choose what parts make sense for you but based on both my own experience and after having talked to many others in the same scenario, if you feel like you never really “got” CSS with any sense of confidence I’d say start at maybe reviewing the box model and going on from there precisely because so much has changed all over the place since then.

How we think about layout is totally different, how we think about positioning is different, how we measure things is new, even things like colour have totally changed in big ways.

But more concretely I think a lot of the reasons that people had particularly bad experiences with CSS in the past that drove them towards things like this or Tailwind for example are now solved problems and that both this and Tailwind are kind of obsolete in many senses.

Keep in mind that this system while it was released publicly today is actually rather old technology and was built around solving a problem in a very specific way that makes a lot less sense now because it was solving problems that now have native CSS solutions with great cross browser support.

Re: StyleX – Meta's styling library

#79

Post by lucas_codes »

dmalik wrote: post #69

This looks interesting and I'll play around with it. It will be tough to replace CSS modules and plain CSS for my React apps though. CSS is so much better now. Did you know you can nest in CSS natively now? https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting

You can, but your CSS won't work properly for nearly 20% of users

Re: StyleX – Meta's styling library

#80

Post by agos »

ryanar wrote: post #39
swyx wrote: post #10

Earlier quoted context omitted.

it was exciting at launch, but took forever to ship, and now Tailwind has run away with that problem.

Announced at React Conf 2018, I was so hyped for it back then! I did not expect it to take 5 years. https://youtu.be/9JZHodNR184?t=270

We should keep this in mind and adapt our expectations about forget, the compiler that they announced like one year ago
Post reply on HN