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.
Generic first because it's better to allow all first and then block fews later. :)