Question

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.