How to modify CSS when requirements change?

Question

Suppose I'm given the requirement to generate a few pages that have tables on them. The original requirement is for all tables to be 500px.

I'd write my CSS as follows:

table
{
    width: 500px;
}

That will apply across the board for all tables. Now, what if they change the requirement so that some tables are 600px. What's the best way to modify the CSS? Should I give the tables classes so

table.SizeOne
{
    width: 500px;
}

table.SizeTwo
{
    width: 600px;
}

Or is there a better way for me to deal with changes like this?

Answer 1

Your suggestion does require you to add a class to all your tables, existing ones as well as the new, wide ones; although you say "a few pages" and thus one would assume that there are only a few tables.

If you can consider the 500px tables as standard and 600px as the exceptions, then continuing to set a default would probably be more useful:

table
{ 
    width: 500px; 
} 

table.Wide /* or a more semantic class name */
{ 
    width: 600px; 
} 

Answer 2

Personally I like to use classes named after what I am working with such as navigation or content. If you are using class names to specify size it feels like a round about way of doing inline styles. A person coming in and looking at the css wouldn't know really what they were working with.

Answer 3

This doesn't feel to me like a CSS question as much as it's about changing requirements and CSS... or more specifically, requirements traceability in the context of CSS...

That will apply accross the board for all tables. Now, what if they change the requirment so that some tables are 600px.

That requirement won't just say "some tables are 600px wide" and if it does you need a better way to elicit requirements.

Instead it would probably be something like "tables on the HR 'staff directory' page will be 600px wide." Make the CSS rule reflect that specifically!

body#staff-directory table {
    width:600px;
}

... or "tables of search results will be 600px wide.":

table.search-results {
    width:600px;
}

You might roll your eyes and think "But then I have so many similar CSS rules!" but they've already changed their minds once, so don't be surprised when they do it again!

Those 'redundant' rules will come in handy when the client does change the requirements again and says "Tables on the HR 'staff directory' page will be 600px wide; tables of search results will be 800px wide and all other tables are 500px wide."
Now those crummy, non-descriptive CSS attributes "Size1" and "Size2" have shot you in the foot.

Answer 4

I would give them classes with meaningful names instead of SizeOne and SizeTwo, but yes that is the best approach.