Why don't people write rule-based CSS instead of class, id, or element based CSS

HTML & CSS
1

(I searched the forums to an extent, but could not get such a discussion, as basic as it may seem …)
I’ve found that most web templates and sites with CSS are written in a class-, id- or selector- centered way, for example:
Sample #1:

h1{
  font-size: 18pt;
  background-color: #FEEECC;
  color: #3B2B0E;
}
h2{
  font-size: 14pt;
  background-color: #FEEECC;
  color: #3B2B0E;
}

And sometimes there will be few to no comments.
While it is easy to figure this out in a small example, it is quite tough figuring this out in the code base of say, a social networking site built on LAMP or ASP.Net, and with theming capabilities.
Contrast that code with this:
Sample #2:

h1 {
  font-size: 18pt;
}
h2{
  font-size: 14pt;
}
h1, h2 { /* Use the same colors for h1, h2 */
  background-color: #FEEECC;
  color: #3B2B0E;
}

This is much easier to understand due to 2 things - the comment, and, the use of instructions rather than “compiled CSS” so to say. Additionally, it reinforces the statement-like nature of CSS - in case of a clash, the latest rule overrides the earlier ones. So, why do most designers, web developers, use class / element / id based CSS rather than instruction based CSS?
jQuery selectors have made it fashionable to do styling by “giving instructions” - which should actually have been standard practice. Other than possibility of my not having seen enough real CSS code, it seems I am missing something obvious.

2

I disagree. What happens when I decide that h1 now needs a different color from h2?

h1 {
  font-size: 18pt;
color: #FFF;

}
h2{
  font-size: 14pt;
color: #3B2B0E;
}
h1, h2 { 
  background-color: #FEEECC;
}

And, now having changed those colors, I realize that h1 should have a different background color as well. Have I really saved myself any effort? I say no. Now maybe that’s a function of how I work - I create a base page, then tweak the CSS - and said tweaking is easier with all properties assigned to each element. And maybe part of it is because i come from a print background originally, and I see CSS styles as similar to paragraph styles in InDesign or QuarkXPress.

3

In your, the OP’s, example, the rules are listed in poor order. The grouping must come first, else it would override specific values given individual elements.

Correct!
I made up that example as I wrote the post and forgot to order it. :goof:

4

I’ve worked front and back end, so you’ll see the OOP in me. But you code to your abstractions. If the fact that two items are identical is pure coincidence, you will regret putting them into one block when you go to change one and wind up changing both. Fortunately, that isn’t usually a problem because you can see the selector, but we’ve ALL seen stranger things happen.

Worse, if two items are supposed to be linked and you set them individually, they won’t be in sync when you modify one in the future. That’s why all items on the page which should share a common border color I define in one style rule and set the border color values for everything at once.

It’s all about the abstraction.

5

It depends but some people are ‘rather lazy’ when writing CSS so don’t bother checking associations. Therefore usually they’ll will write separate blocks so they don’t have to remember to alter two separate sections.

6

It could be lazyness/time constraints, but it could also be on purpose. If you leave all properties separate, you indicate that you see the styles as individual entities. It communicates that right now the color and background of h1 and h2 happens to be the same, but if you want to have h1 and h2 use separate colors/background, you can quickly swap out the values without having to untangle h1 and h2.

E.g, if I install a new WordPress theme and want to customize the colors, I actually like it if I can set everything independently really fast, even if the original design was more stringent with colors for example.

Now, if I want to make a design statement and gently force certain changes to apply to multiple elements, then I should set up the css accordingly by inheriting/grouping (if I have time to think it through). As I said, I personally don’t mind hunting for individual values, it goes so fast with Firebug.

7

Hm, I thought people did tend to group common rulesets when it fell within the contextual ordering (a more important grouping). My own site uses such groupings extensively, but within its contextual ordering.

Most (? maybe?) overdo; grouping all sorts of elements, classes and ids, making it very difficult to visually spot the selector in the mash of selectors. A common error, imo, is grouping selectors primarily by rulesets, e.g all typographical stuff here, and all the color stuff there.

In your, the OP’s, example, the rules are listed in poor order. The grouping must come first, else it would override specific values given individual elements.

For example, from my site’s stylesheet:

h1, h2, h3, h4, h5, h6 {
  color: #966;
  font-family: "lucida grande", "lucida sans", verdana, helvetica, sans-serif;
  font-weight: normal;
  }

h1 { 
  font-size: 1.75em;
  line-height: 1.4286;
  margin: .7143em 0 0;
  }

h2 {
  font-size: 1.5em;
  line-height: 1.6667;
  margin: .8133em 0 0;
  }

h3 {
  font-size: 1.25em;
  line-height: 2;
  margin: 1em 0 0;
  }

h4 { 
  font-size: 1em;
  line-height: 1.25em;
  margin: 1.25em 0 0;
  }

h5 { 
  font-size: .875em;
  line-height: 1.4286em;
  margin: 1.4286em 0 0;
  }

h1 + *,
h2 + *,
h3 + *,
h4 + *,
h1 + ul h2,
h2 + ul h3,
h3 + ul h4 { 
  margin-top: 0;
  }

Note, there is some redundancy, but it’s there for clarity.

cheers,

gary