Question: Consider the following three scenarios...

**Scenario A**

```
@import "reset.css";
/* ... */
p {margin:1em 0;}
/* ... */
p#copyright {margin:0; padding:10px;}

```

In Scenario A, a *generic* rule is applied to all `<p>` elements that gives it top and bottom margins, so that the paragraphs are properly spaced when used in the HTML. But, by doing so, this causes cases where a `<p>` element now needs its generic margins removed for decorative purposes, e.g. the Copyright at the foot of the document must have no margins.

**Scenario B**

```
@import "reset.css";
/* ... */
div.content_body p,
div.sidebar_body p {margin:1em 0;}
/* ... */
p#copyright {padding:10px;}

```

In Scenario B, it is assumed that `<p>` elements don't need top and bottom margins unless *explicitly defined*. Here the Content and Sidebar elements will need well-spaced paragraphs

**Scenario C**

```
@import "reset.css";
/* ... */
p.spaced {margin:1em 0;}
/* ... */
p#copyright {padding:10px;}

```

In Scenario C, only `<p>` elements with a class `spaced` will have top and bottom margins applied.

**Questions:**

Which is the better scenario to use, and more importantly why?
What impact does each scenario have on:

* browser CSS performance
* CSS weight and maintainability
* the proliferation of UI defects

If you had to add a new widget that needed flowing paragraphs, which scenario would be better for you?

Thanks!

Answer: 
It totally depends on the design of your site.

If most paragraphs on the site should have margins, but a couple don’t, then the approach in A would require the least code, and would thus probably result in lower CSS weight and more maintainability.

But if only paragraphs within your content and sidebar areas require margins (or there aren’t many outside them that do), then the approach in B is a better idea.

As for the approach in C, my main worry with that would be how the HTML for the site is generated. If it’s generated by a back-end system, that system will have to know which paragraphs should be spaced, and which shouldn’t. That’s extra complexity for the system, or its users, to deal with.

For the specific example of paragraphs, I’ve often ended up with something like B. It’s easy to assume that paragraphs should have some nice, decent styling that would make, say an article nice to read. But if you look at most modern websites, most of what’s on the page isn’t content like that: it’s menus and sidebars and special little things. Now, that may not be great, design-wise, but if you’re implementing a design like that, B is the way to do that with less code, and less code generally means lower weight, easier maintainability, and fewer defects.
Personally I prefer scenario A. I find if you do things this way you can make the most of the cascade. The question you have to ask yourself though is "what is the sensible default?" Meaning is it more likely that a `p` will need spacing, or more likely that it wont. That should help you determine what your blanket defaults should be. Generally speaking the answer to this question is going to put you in line with scenario A.