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