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

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

Answer 2

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.

Answer 3

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 4

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.

Answer 5

D None of the above

@import ""; // don't need this
p { } // don't need this
ul#footer li { padding: 10px }

• Browsers manufacturers know an awful lot about their technology in particular and about typography and layout in general. A 'reset' is a great way of disposing of all that aggregated experience. Browser default behaviour is a good thing and should only be overwritten in exceptional circumstances. Different browsers do look a bit different. This is not a bad thing. See: http://dowebsitesneedtolookexactlythesameineverybrowser.com/

• A copyright citation is not a paragraph of text. It is probably one among several items in a list of supporting information about the page in question. If not, it is a list of one.