Thanks for posting that example. It helped clarify why I dislike that style so much.

Please don't take offense! What works for me doesn't have to be what works for you, OK? :-)

But the insight - if I dare call it that - is that one style leads me to read across each line, where the other style leads me to read down the columns.

In your example, my eyes see an x, a y, a width, a height, a backgroundColor, a color, and so on. And then I see a 3, a 2, a 0, another 0, a 'white', a 'black', etc.

As you can tell, I am reading down the first column, and then reading down the second column. And by then I'm losing track of which thing goes with which.

It's not that I mean to do that, it's just how my eyes are drawn when I see something arranged in columns.

If we reformat this without the column alignment, it looks like this:

  const style = {
      x: 3,
      y: 2,
      width: 0,
      height: 0,
      backgroundColor: 'white',
      color: 'black',
      fontWeight: 'normal',
      shadowStyle: 'none',
      borderStyle: 'round'
      paddingX: 2,
      paddingY: 1,
  }

It's definitely not as nice looking this way! But now I read it completely differently:

We have an x of 3, a y of 2, a width of 0, a height of 0, a backgroundColor of 'white', a color of 'black', etc.

This style leads me to read across each line instead of down each column. I think that may be why it is easier for me to understand.

And to repeat myself, I am truly grateful to you for posting this example. It helped me get some understanding of what goes on in my eyes and brain.