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?

Keare

That looks like the perfect way to do it to me. I do it this way, that's what classes and ids are for :) – Yumuk

This seems to be a good approach, though you might want to give them more meaningful names ;) – Corwun

RE the CSS names I've used, it's only for the sake of example. Any real CSS I produce is named more meaningfully. Thanks all :-) – Keare

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; 
} 

Washstand

Or have 3. one default "table" and then the new onces called "table.SizeOne" and "table.SizeTwo". (and maybe use better names). – Ammonal

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.

Refund

I do the same in most cases, but using class names to indicate size is not that bad if combined with a descriptive id. Then #search-result .page-wide as well as #search-result .column-wide can be used. This is very clear and descriptive. – Catheterize

you're right - this was only for the sake of example. Any real CSS I produce has names that reflect what it is, not how it appears. – Keare

Makes sense then and the idea of classes is the way I like to go. I would do two classes instead of overwriting all tables just because I've run in to more problems down the line of refactoring to get around the generic selector in a new area of the program being added at a much later date. – Refund

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.

Percent

Rolled it back as I deliberately wanted to have the use of both id and class in my CSS rules. – Percent

this is what I should have written! You can have one style and apply it to multiple selectors e.g. body#staff-directory table,table.search-results{ width:600px; } This is how I thin kCSS is should be done. – Cochrane

Answer 4

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

Tolley

you're right - this was only for the sake of example. Any real CSS I produce has names that reflect what it is, not how it appears. – Keare

Answer 5

you can define classes further which override basic settings using a body class (a class given for the body tag ) or so. for example if your table general width is set to 100 and in a particular page (with bodyclass 'page2') ,you need to have width as 50px, you can do it like

table{
 width: 100px;
}

.page2 table {
 width :50px;
}

so the second class will over ride the former for the only page which is having bodyclass ="page2" and every where else width will be 100.

It is a good practice to set a class name for the body based on section.

Alienee

Answer 6

If you have several different page-wide layouts, you might benefit from creating some layout classes and attaching them to your body (or other containing tag):

<body class="wide">
    <!-- stuff -->
    <table>...</table>
</body>

Then in your CSS:

table {width:500px} /* defaults for all tables regardless of class */
body.wide table {width:600px} /* overrides for specific layouts */
body.slim table {width:300px}

It looks like a waste of time and it would be for just a table but if you're also styling images, divs, etc differently, you can save a lot of HTML markup.

#wrapper {width:500px;padding:20px 10px}
body.wide #wrapper {width:600px}
body.slim #wrapper {width:300px;padding:10px 5px}

table {width:500px} /* defaults for all tables regardless of class */
body.wide table {width:600px} /* overrides for specific layouts */
body.slim table {width:300px}

img {width:500px}
body.wide img {width:600px}
body.slim img {width:300px}

Your 99% of your HTML stays the same (very useful if you're pulling this from a database and don't want to adapt it every time you use it), you just change the body class.

Gullett

Answer 7

The BEST method would be to modify tables based who their parents are. For example, certain pages should have different IDs, e.g.:

<body id="contacts">
  <table>
    <tr>
      <td>Content</td>
    </tr>
  </table>
</body>

So in your CSS would be:

table {
  width: 500px;
}

#contacts table {
  width: 600px;
}

The advantage to this approach is that you're working entirely in CSS, without the need to add anything to your HTML files. Adding classes for something like this is just going to make your code more unmanageable in the future.

If your HTML wasn't written with proper cascading in mind, you're much better off adding proper IDs to elements than to add the classes to just the tables. The payoff is much greater for the work you're going to have to put in.

Otherwise

This solution is fine as long as there is no need to have both the 500px wide and the 600px wide table on the same page. Then this solution won't work. – Catheterize

Sure, in this example we're assuming 1 table per page, but even if multiple tables are used the general idea holds: First see if you can specify the element you're trying to style via their ancestry. If that's not an option, then add classes or IDs to the tables themselves. – Otherwise

+1 for the solution in your comment above. You should consider adding it to the answer. – Catheterize

Answer 8

I would write it:

table
{
    width: 500px;
}

and use version control something like SVN. What your suggesting makes things incredibly complicated. Or without version control:

 table
    {
        /*width: 500px;*/
         width: 600px;

    }

Adding lots of classes defeats the object of CSS in my opinion.

Cochrane

The OP only needs some tables to be the new width. Others remain at the old. – Corwun