Scoping margins
I asked a question on Twitter today:
Do you put any margins on the "bare" heading elements in your CSS, or strictly scope it to class names?
To elaborate on what I meant by that, I was wondering if you do like this with your heading styles:
h2 { /* ...or h1, or h3 etc */
font-size: 3em;
line-height: 1.25em;
margin: 1em 0 0.25em;
}
...and then remove that margin as you happen upon places where you want an h2
but stray from the standard margin, or if you set margin: 0;
on all of ’em, and then add that back using either classes on the h2
itself or surrounding elements.
A bunch of smart people replied, and I thought I’d kill 2 birds with one post—get the blog engine revving again, and write down which approach I like and why.
My personal preference right now is the latter, and the same as Robin’s: I set the margin to `0`, and then add it back in strategic places.
Harry advocated the "Single-direction margin" approach, to later adjust.
It’s not a huge deal for your CSS either way, I suspect, but I do have some thoughts on the matter.
A lot of the stuff on a highly text-driven site, like a blog or a newspaper etc, comes from a CMS. Sometimes it comes from markdown, wysiwyg fields etc, where the author has some freedom to use a range of HTML elements to communicate. In these instances, we need to have our default styles ready to go, with good and sensible margins on all elements. But these situations as components on the page are known: we can scope rules to them.
Because of that, I usually end up with a "scoping" class like this:
.flow h2 {
margin: 1em 0 0.25em;
}
.flow p {
margin-bottom: 1.5em;
}
/* etc etc */
Anything matching inside .flow
is given nice sensible defaults, go-nuts-with-the-vertical-rhythm kinda stuff. But elsewhere I tend to use these elements for other "UI" components, where the spacing can be completely unrelated to the flow content, and spacing can be done with either margin or padding depending on the context. I have a feeling that I’ve spent a lot of time being grumpy about setting default margins on elements like headings and then having to negate or re-negotiate them further along the project, so this feels like a more predictable approach to me.