Generic vs. specific element styles - for maintainability

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 1

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.

Answer 2

Generic first because it's better to allow all first and then block fews later. :)