4 ms·

I sometimes feel like the one weirdo using jsxstyle (originally by Pete Hunt of React 1.0), but it's been great for me. It's a really simple concept - exposing

I sometimes feel like the one weirdo using jsxstyle (originally by Pete Hunt of React 1.0), but it's been great for me. It's a really simple concept - exposing CSS keys as props: <Block backgroundColor = 'red' hoverBackgroundColor = 'blue' marginH = { 4 } marginV = { 12 } padding = { 16 } Works in both React and Preact. It's designed to support generating styles at build time, but I've never bothered. For the sorts of things I work on, being able to quickly bang out a component is more important than golfing the bundle size or maintaining a design system. jsxstyle feels like I can sculpt in code. It's really satisfying to hammer out some props and see a component come to life, especially when you've got hot module replacement working. Based on a quick perusal of linked page, Panda seems like perhaps a more mature version of jsxstyle, but also more fidgety. As an army of one, I'm happy to optimize for iteration speed, but if I needed to maintain a system, maybe I'd consider switching to Panda. https://www.npmjs.com/package/jsxstyle https://www.npmjs.com/package/jsxstyle

nwienert 3y ago
I wrote Tamagui by forking the jsxstyle compiler because I really love that model.
tuan 3y ago
> It's really satisfying to hammer out some props and see a component come to life, especially when you've got hot module replacement working. Can you just use inline style in this case ?
- bsimpson 3y ago
  It sounds silly, but it feels much nicer to skip the `style = {{}}`. Plus, they all get their own class names, so it's a bit more efficient than the naked style prop, and if you edit one in DevTools, all its siblings are updated to match.
lioeters 3y ago
A similar concept exists in UnoCSS called "attributify". It converts HTML/JSX attributes to Tailwind-like utility classes. <button bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600" text="sm white" font="mono light" p="y-2 x-4" border="2 rounded blue-200" > https://unocss.dev/presets/attributify https://unocss.dev/presets/attributify
- youngtaff 3y ago
  But why would you want to write CSS like that? Better off learning CSS and using it more effectively rather than single attributes
  - tuyiown 3y ago
    I've been doing front for 18 years and I've sill not figure out how to maintain code with the HTML dom structure and CSS rules coupling. Touch either side, you have to understand the entire codependencies, inheritance rules and edges cases to make any predictions on what will actually happen. You always can do edit/fix fast cycles, but it always ends up complicating initial code while eroding overall quality. Good practices to make to whole thing predictable generally fails on edges cases. Long story short, having each attributes defined, used and moved around independently really really simplify the whole experience, without leaving much things to regret.
  - incrudible 3y ago
    I have the opposite question: If you are already using templating/components, why would you want to use something like CSS in the first place? I do not find it to be an effective tool, at all. It is an optimization on dimensions that do not really matter to me, and a pessimization on the dimensions that do matter, a lot.
    - youngtaff 3y ago
      You’re going to use CSS anyway because that’s how things are styled Essentially the discussion is around how should you use it - define it as inline attributes on individual elements - use some thing like Andy Bell’s CUBE approach to define styles for layout and components With something like Andy’s approach you’ll end up with far less CSS, it’ll adapt to devices and you won’t actually have to write much CSS for new components
willsmith72 3y ago
i dont mind that way either, and far prefer it to a react native stylesheet approach where the styles are all at the bottom of the file but since using tailwind, i far prefer this class="bg-red-500 hover:bg-blue-500 mx-4 my-12 p-4"
3523582908 3y ago
I didn't know this had a name! This was by far my favorite property of ChakraUI. Thanks!
- bsimpson 3y ago
  Looks like the same guy made Chakra and Panda.

nwienert 3y ago

I wrote Tamagui by forking the jsxstyle compiler because I really love that model.

tuan 3y ago

> It's really satisfying to hammer out some props and see a component come to life, especially when you've got hot module replacement working. Can you just use inline style in this case ?

bsimpson 3y ago
It sounds silly, but it feels much nicer to skip the `style = {{}}`. Plus, they all get their own class names, so it's a bit more efficient than the naked style prop, and if you edit one in DevTools, all its siblings are updated to match.

lioeters 3y ago

A similar concept exists in UnoCSS called "attributify". It converts HTML/JSX attributes to Tailwind-like utility classes. <button bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600" text="sm white" font="mono light" p="y-2 x-4" border="2 rounded blue-200" > https://unocss.dev/presets/attributify https://unocss.dev/presets/attributify

youngtaff 3y ago
But why would you want to write CSS like that? Better off learning CSS and using it more effectively rather than single attributes
- tuyiown 3y ago
  I've been doing front for 18 years and I've sill not figure out how to maintain code with the HTML dom structure and CSS rules coupling. Touch either side, you have to understand the entire codependencies, inheritance rules and edges cases to make any predictions on what will actually happen. You always can do edit/fix fast cycles, but it always ends up complicating initial code while eroding overall quality. Good practices to make to whole thing predictable generally fails on edges cases. Long story short, having each attributes defined, used and moved around independently really really simplify the whole experience, without leaving much things to regret.
- incrudible 3y ago
  I have the opposite question: If you are already using templating/components, why would you want to use something like CSS in the first place? I do not find it to be an effective tool, at all. It is an optimization on dimensions that do not really matter to me, and a pessimization on the dimensions that do matter, a lot.
  - youngtaff 3y ago
    You’re going to use CSS anyway because that’s how things are styled Essentially the discussion is around how should you use it - define it as inline attributes on individual elements - use some thing like Andy Bell’s CUBE approach to define styles for layout and components With something like Andy’s approach you’ll end up with far less CSS, it’ll adapt to devices and you won’t actually have to write much CSS for new components

willsmith72 3y ago

i dont mind that way either, and far prefer it to a react native stylesheet approach where the styles are all at the bottom of the file but since using tailwind, i far prefer this class="bg-red-500 hover:bg-blue-500 mx-4 my-12 p-4"

3523582908 3y ago

I didn't know this had a name! This was by far my favorite property of ChakraUI. Thanks!

bsimpson 3y ago
Looks like the same guy made Chakra and Panda.