proper use of spacing classes

[Rick Lowes]

Hi again folks,

Just wanted to ask the group for some advise on the use of the spacing
classes - I am very hesitant to use them as I feel they are a very
granular abstraction that not only adds to my markup, but I forsee
potential issues down the road making overall design changes where I
may have inserted these classes.

Mainly I am using them currently to override default styles on
elements, so if for instance if I am using a <ul> that has default
margin on the bottom, but putting it somewhere I don't like the
margin, I am adding the "mbn" class to remove it. That's just one
example.

I'm trying to use these as sparingly as possible and have setup "smart
defaults" as best I can, however, as always, there are lots of
exceptions in your defaults, and a lot of them tend to be the same -
the main one being that I don't want margin or padding on a particular
element, on one or more sides.

Is this the right approach to using these?

@ricklowes

[Murray Nuttall]

I rarely us the spacing classes.

If I find that I'm having to use them too much, I talk to the designer about the consistency of spacing between elements. I discuss default line-height and margin settings, then most of the time they're happy to go with whatever the stylesheet dictates from that point onwards.

Murray

> --
> You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
> To post to this group, send email to object-or...@googlegroups.com.
> To unsubscribe from this group, send email to object-oriented...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/object-oriented-css?hl=en.
>

[aaron cavano]

Personally I find them extremely helpful in concept, but in practice the recommended use is to customize for sure.

Lately I've been building a ton of responsive web applications and here is my workflow:

1. Add margins and padding to User Interface classes as needed
2. Once most of the UI is mapped out do a search or write a Regular expression to analyze every margin, line-height, and padding instance.
3. Separate these results from the rest of the styles and find repetition and patterns.
4. a. If there are obvious patterns/repetition then refactor in spacing classes.
b. If not you are done, congrats and enjoy that cocktail!

Hope this helps,
Aaron Cavano

[Aeron Glemann]

I think standard spacing makes a lot of sense if you're using SASS or LESS.. personally I use a SASS mixin for spacing increments based on a vertical rhythm:

http://compass-style.org/reference/compass/typography/vertical_rhythm/

The mixin is used like (in this case with a 13px baseline, changing the baseline would affect the generated increments):

@include space(1);

Generates: margin: 0.667em;

@include space(2 1);

Generates: margin: 1.333em 0.667em;

@include space-left(1);

Generates: margin-left: 0.667em;

@include space(1 1 2, padding);

Generates: padding: 0.667em 0.667em 1.333em;

Etc... Using a vertical rhythm makes your text look good. Centralizing all spacing around that rhythm brings that goodness to the rest of your layout.

If you really need something to be spaced 5px, than just code it to be 5px. If you find yourself doing "space(10)" than you really want to be using a grid there.

Anyway, I think standard spacing increments is a really good and valid approach. Hard coded spacing classes in your HTML is not...

[Nicole Sullivan]

The spacing classes are only meant to override sensible default values in case of exceptions. That said, sensible default values are very hard to achieve. I think we need a good test page so that we can try different solutions and evaluate them for browser support, ease of use, reduction in dependence on spacing classes.

Would someone be willing to create a margin test page? This page should contain all the different objects, combined in creative ways. 

It should also include edge cases, like two-unit grid with several paragraphs & headings on one side and a rounded corner box on the other that also contains paragraphs and headings.

Any other suggestions about weird margin edge cases that should be included?

• lists
• figures
• callouts/pullquotes
• tables
• tabs
• etc

Nicole