I'm looking for people's strategies for dealing with the inevitable need to change or otherwise adapt a CSS class to accommodate new HTML elements. I find myself in this situation fairly often so I'm hoping other people share my pain and can advise here.

Imagine you have a table of products with the nice semantic class name `products`. This is styled appropriately in your stylesheet. A few months down the line, your boss asks you to create a staff list on the site, "styled exactly the same as the products list".

This immediately raises an important question: *what to call the new staff table*. The only options I can think of are:

* Give it the class name `products` as well. This is the quickest solution but ruins the semantics. The naming makes little sense especially to future developers.
* Change the class name to something that can encompass both products and staff listings. This would negate the utility of separation of markup from style as the HTML would need changing. Also, I can't think of a single non-presentational class name that could conceivably apply to a products *and* a staff list.
* Introduce a new class name and edit the CSS file such that `.products { ... }` becomes `.products, .staff { ... }` and `.products thead th.number { font-weight: bold }` becomes `.products thead th.number, .staff thead th.number { font-weight: bold }`, etc. Another ugly solution which will only get more complicated as time goes by.

What's the best course of action to take here?

N.B. I'm sure this problem is easily solved using frameworks like LESS (I've not used it personally) but this solution strikes me more as a 'cover-up' than an actual remedy.