How to deal with the need to change CSS class names

Question

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.

Answer 1

If you had to put your style of the table into a few words, what would it be? I try and use that to name styles that I am gunna use in more then one place. Then I have an idea of what it will look like if I use the class.

Example:

.table-striped{}

Answer 2

How about Option 4:

Make a copy "products" as "staff" and continue to work on them separately as time goes on.

Answer 3

There are basically two schools of thought here.

1) Style that follows markup 2) Markup that follows style.

You have to figure out which one you want to do, and try to stick to one or the other. if you mix too much then it's pointless and you just have a huge mess.

In the first, you have a set markup that doesn't change. You figure out style to make it look the way you want. This is in the vein of css zen garden. It requires that your markup be extremely semantic. The drawback is that you often have a lot of duplicate styles because it's not always possible to style cleanly when using this method.

In the second, you create a lot of common styles, then adapt your markup to fit the styles. For instance, you might have a classes of "float", "thinBorder", "bold" then apply those styles to your markup. The drawback here is that if your style needs change then you have to change the HTML (or make bold not be bold, or some such). The positive is that your CSS is much more clean and maintainable.

It sucks, but you have to make tradeoffs.

Answer 4

Hmm...

Basically the root the problem is that your original thought of creating the first style class (.products) was too narrowly named. It is not always possible to know that you will need to reuse a significant portion of a CSS definition at a later point but based on your question it seems like you are in that line of business.

The core CSS framework does not have the way to say 'make my new style (.staff) be the same as another style (.products) with these overrides'

But I believe that the LESS framework does give you the ability to define a class (.coolTable) with all the properties and re-use these properties in multiple other class defintions (.products and .staff) quickly.

The LESS framework is not a 'cover-up' as much as an extension to the capabilities of CSS.