3 ms·

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 i

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

yurishimo 3y ago
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.
- cantSpellSober 3y ago
  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...
willsmith72 3y ago
e.g. using mui sx. the downside is the runtime performance cost https://mui.com/system/getting-started/usage/#performance-tradeoffs 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
- cantSpellSober 3y ago
  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 https://news.ycombinator.com/item?id=38540629 The docs here mention the downsides though.
  - willsmith72 3y ago
    > 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.
    - cantSpellSober 3y ago
      Ohh I see, I honestly didn't click the first time. You meant sx in MUI, not StyleX. We're gonna need more names.
Zababa 3y ago
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 https://en.wikipedia.org/wiki/Spaced_repetition) to remember them way more easily. I use Anki (https://apps.ankiweb.net/ 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 https://borretti.me/article/effective-spaced-repetition to be really helpful.

yurishimo 3y ago

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.

cantSpellSober 3y ago
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...

willsmith72 3y ago

e.g. using mui sx. the downside is the runtime performance cost https://mui.com/system/getting-started/usage/#performance-tradeoffs 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

cantSpellSober 3y ago
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 https://news.ycombinator.com/item?id=38540629 The docs here mention the downsides though.
- willsmith72 3y ago
  > 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.
  - cantSpellSober 3y ago
    Ohh I see, I honestly didn't click the first time. You meant sx in MUI, not StyleX. We're gonna need more names.

Zababa 3y ago

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 https://en.wikipedia.org/wiki/Spaced_repetition) to remember them way more easily. I use Anki (https://apps.ankiweb.net/ 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 https://borretti.me/article/effective-spaced-repetition to be really helpful.