Comment by bsimpson | Hacker News Reader

Comment by bsimpson | Hacker News Reader

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

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

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

But why would you want to write CSS like that?

Better off learning CSS and using it more effectively rather than single attributes

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.

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.

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

> You’re going to use CSS anyway because that’s how things are styled

I am speaking in principle. Im am not even sure if inline styles are correctly referred to as CSS, as there is no cascading and no sheet. Aren’t they just styles?

With templates/components, I do not find myself writing a lot of style code at all, plus they remain more composable. The segregation into CSS, despite its inevitable coupling to the structure of the document, has no value to me.

I also do not buy the adaptation argument. I can adapt in code just fine, in fact it is necessary because proper adaptation needs more than just styling.

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

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.

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

Looks like the same guy made Chakra and Panda.

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"

Reply on news.ycombinator.com