What is better in CSS - one universal selector in several places or several specific selectors?

Question

What's better?

.listing { some attributes:some values;} 

applies to multiple locations (e.g. search results, category list)

or

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

It seems to me that the second option is more flexibility for future style changes without changing (x) html, as well as simplifying maintenance due to the fact that they know exactly where the rules apply, but for more loading and processing power of the browser more bandwidth is required.

Interested in your thoughts.

Thanks Jonathan

Answer 1

Use context implemented using child selectors (modified based on your comment below). This allows you to understand which attributes are part of the general list and which attributes belong to the 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>... 

Recently, I worked with some top designers. They talk negatively about markup that has “div-itis” or “class-itis” (they skipped the list class above and the ul style). To counter this, they use identifiers and custom tags such as li, h5, etc. Inside. Because PITA clears the default values, they only define a few default values ​​and use context selectors for the rest. If necessary, they use several class names. They also tend to use a compass or less, because these environments allow you to use contextual selectors and mixes.

Answer 2

You can add

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

in anticipation of future expansion as well, but there comes a moment when you move from flexible to absurd. There is no reason to code special names for classes that you have no reason to expect to be different.

If you find that they should be different in the future, add them. Also from an aesthetic presentation having .listing divisions, the same styles are a good thing.