Which is better practice in CSS - single generic selector in multiple locations or multiple specific selectors?

Question

Hi all,

Which is better practice?

.listing { some attributes:some values;}

applied to multiple locations (e.g. search results, category listing)

or

.search-list,
.category-list,
.other-list { some attributes:some values;}

It seems to me that the second option provides more flexibility for future changes to style without changing (x)html and also easier maintenance due to knowing exactly where the rules are applied, but needs more bandwidth to download and browser processing power to parse.

Interested in your thoughts.

Thanks, Jonathan

Answer 1

Use context, as implemented using child selectors, (modified based on your comment below). This makes it clear what attributes are part of a general list and what attributes are specific to a search-list.

.list li { default attributes: default values }
#search-list li { attributes specific to search listings: some values; }

with markup

<ul id="search-list" class="list">
  <li>...

I've recently been working with some top designers. They talk negatively about markup that has "div-itis" or "class-itis" (they would skip the list class above and style ul). To counter this, they use ids and native tags like li, h5, etc within. Since it's a PITA to clear default values, they define only a few defaults and use contextual selectors for the rest. They use multiple class names when they need them. They also tend to use compass or less because these environments allow contextual selectors and mix-ins.

Answer 2

You could add

.elephant-list,
.aardvark-list,
.platypus-list,

in anticipation of future expansion also, but there comes a point when you cross from flexible to absurd. There is no reason to code special names for classes that you have no reason to expect will need to differ.

Should you find that they need to differ in the future, add them. Also from an aesthetic view having .listing divisions share the same styles is a Good Thing.