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: 
I try to follow the principle that unadorned selectors (like "p" by itself) should provide reasonable defaults, and then use more specific selectors to override those defaults. I think this is best represented by **Scenarios A and B**. 

If the markup is simple, and there exists a good, global default, then my stylesheets look like Scenario A.

If the markup is less simple, or global defaults are hard to define, then my stylesheets look more like Scenario B.

I try to **avoid Scenario C if possible**. I want it to be super easy for me (or someone else) to add new content 6 months later. I find that:

1. The *fewer* specialized classes there are, the easier it is to "fall into the pit of success" because the simplest thing you write (`<p>Whatever</p>`) will just work.
2. The *more* specialized classes there are, the greater the chance that you'll need to practice copy/paste programming to maintain consistent markup usage.
3. CSS works better when classes are **semantic** and describe what a piece of content *is* than when they are **presentational** and describe how content should be *displayed*. Scenario C is an example of presentational styling, which is only marginally better than inline styles.
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.