Confusing naming for theme spacing variables

[craigcook]

tl;dr: Change h-grid-* to column-space-* and v-grid-* to row-space-* for better clarity.

There are theme variables for spacing between elements, prefixed v for vertical and h for horizontal. But the current variable names also include the word "grid" which (for me at least) adds confusion about where that unit of spacing should actually be applied.

When I think of "vertical grid" I think of the vertical lines in a grid layout, i.e. invisible lines running up and down a page that define where things should align vertically. Which means, at least the way my brain works, I want to use something prefixed v-grid to set horizontal spacing to align with those vertical grid lines. To me, v-grid-md should be a medium amount of spacing between vertical lines.

And vice versa: I want to use h-grid to set vertical spacing (that is, above or below an element) so it aligns across a horizontal grid line. h-grid-md should be a medium amount of space between horizontal lines.

But I think these variables are currently named the opposite of how my brain works. v-grid is meant to apply vertical (top and bottom) spacing between rows, and h-grid is meant to apply horizontal (left and right) spacing between columns. That's probably something that is easily learned, but for me it wasn't intuitive from the naming alone and I was very confused trying to use these variables. They're named to describe the space, not named for how they affect the grid. Which makes "grid" a confusing word to include in the name. Maybe it's just a me problem.

Aaaanyway... I propose renaming these variables to be more self explanatory and less ambiguous, and use the terms "column" and "row" instead of "v-grid" and "h-grid": column-space-md and row-space-md for example. To me that seems clear at a glance that column spacing is for use between columns (horizontal space between vertical grid lines) and row spacing is for use between rows (vertical space between horizontal grid lines).

[slightlyoffbeat]

FWIW, as I read this I was thinking we should switch to column/row and that's exactly what you recommended at the end. It would make a lot more sense to me as well.

[craigcook]

Suppose I should add a tl;dr for my stream-of-conscious rambling...

[stephaniehobson]

FWIW I've always had trouble remembering if column properties refer to stuff you want to apply in the column or stuff you want to apply between columns.

Alternatively, we could move towards the CSS logical properties block/inline naming convention. I also have trouble wrapping my brain around that but at least it is a common standard for people who write CSS.

So h-grid-* → inline-space-* etc.

[craigcook]

Oh, that's a good idea. I think at one time I considered top-and-bottom-space-* and left-and-right-space-* but that's a mouthful. Naming things is hard.

How I finally got it straight in my head was to decide it was describing the space and not the items being spaced apart. And because we use the size modifier I could remember it was the space itself being named. E.g. v-grid-md is a medium amount of space applied to the top and bottom of vertically stacked items. But I still have to think about it every time.

I do like block and inline as a more standard CSS convention.

[stephaniehobson]

We'll move forward with block and inline.