What's the advantage of css in js as opposed to just plain css?
StyleX – Meta's styling library
31–40 of 86 posts
Re: StyleX – Meta's styling library
#32Re: StyleX – Meta's styling library
#33What's the advantage of css in js as opposed to just plain css?
Styling based on js, eg striking through if an item becomes deleted, etc
Re: StyleX – Meta's styling library
#34Earlier quoted context omitted.
0 runtime is the argument over emotion (and therefore MUI right now)
thanks for pointing this out. I hope they extend their `thinking in stylex` page with this info.
They do, albeit it's a bit confusing
https://stylexjs.com/docs/learn/thinking-in-stylex/
> There is no runtime overhead here
Specifically
> No runtime style injection.
There's still a runtime though
> Optimized runtime for merging class names.
Re: StyleX – Meta's styling library
#35What's the advantage of css in js as opposed to just plain css?
- Styles colocated with markup/logic (I consider this an advantage with a component library like React, others may not)
- No global styles stomping on each other, styles scoped to a single module unless explicitly exported/imported
- Type safety, if using TypeScript
The main downside is often performance, though
Re: StyleX – Meta's styling library
#36What's the advantage of css in js as opposed to just plain css?
Refactoring and knowing where styles are used. In css sometimes the btn class does something and sometimes not. With stylex it is explicit.
Re: StyleX – Meta's styling library
#37I 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).
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.
Re: StyleX – Meta's styling library
#38It was React Conf 2018 in Nevada when they first talked about StyleX and said they planned to open source it. Though I thought it was going to come much sooner than 5 years, I am so glad it has been released! 2018 was peak css-in-js era and StyleX approach of deduping classes and remove runtime JS was a really performant approach and it sounded like the DX was nice as well.
Re: StyleX – Meta's styling library
#39Just at a cursory glance, this looks pretty verbose and clunky. Existing React ecosystem styling solutions are many, so it’s not immediately evident to me when you would accept the trade offs introduced by this tool over any existing ones that seem much nicer to not only integrate, but also have to work with day to day.
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.
Re: StyleX – Meta's styling library
#40It always surprises me the lengths people are willing to go to avoid writing CSS. If organization is the issue, there's BEM (https://getbem.com/). This just looks like another layer of complexity on top of an already convoluted front-end stack that just slows everything it touches to a crawl and only works moderately well on the developers beefed up latest MacBook Pro's, and sucks horribly on any regular person's computer.