Naming on spacing-responsive

[mhauken]

I find the naming on spacing-responsive a bit weird now that widths-responsive have switched from .desk-1/2 to .u-1/2-desk. I'm sure we'll see the change to .u--mb0-lap and .u-mb++-desk soon.

I loved the simplicity of .mb+ etc. I've also experienced the huge benefits of namespacing. But combining this with responsive settings leads to some weird naming problems. Take the class .u-mb--desk. Here I get confused by the dashes meaning minus in one instance and then a seperator in the next.

I have three ideas that could solve some of the problems. Both with it's own pros and cons:

1. .u-mb-@desk .u--mb-@desk Pros: Using @desk is logical and easy to read in the code and clearly relates to the breakpoints. Also easy adaptable to widths: 1/3@desk, 1/2@lap Cons: we still get the dash-or-minus-problem on minusmargin
2. .u-mb--small, .u-mmb--small, .u-mb--small-desk Pros: More in line with rest of inuit like .box, .btn., solves the dash-or-minus-problem Cons: Longer to write, might crash with breakpoint-naming (small, large)
3. .u-margin-bottom--small, .u-minusmargin-bottom--small Pros: Easier to read for everyone in the team to comprehend, solves the dash-or-minus-problem Cons: Very long to write.

What do you think? Any other suggestions/thoughts?

[csswizardry]

Hey! We actually have an open discussion about this over here: https://github.com/inuitcss/trumps.spacing/issues/8

Feel free to join in—I need all the feedback I can get :)

Thanks,
H

[mhauken]

Haha, great! Looked around and couldn't find anything.. It's not always easy to know where to publish things when this affects both spacing, spacing responsive and widths-responsive..

[csswizardry]

That’s a problem that inuitcss’ super distributed nature has brought about: I checked two other repos before I found that issue!