ansaurus

Question

How to modify CSS when requirements change?

Answer 1

+5 A:

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

Keith Rousseau 2010-06-17 12:23:09

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.

DaveDev 2010-06-18 09:43:22

Answer 2

+6 A:

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.

Jeff Beck 2010-06-17 12:24:35

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.

Erik Töyrä 2010-06-18 08:53:40

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.

DaveDev 2010-06-18 09:43:52

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.

Jeff Beck 2010-06-18 12:30:38

Answer 3

A:

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.

matpol 2010-06-17 12:31:12

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

ChrisF 2010-06-17 12:32:42

oops - not to self - always read the question properly

matpol 2010-06-18 09:05:13

Answer 4

+5 A:

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.

Wind Chimez 2010-06-17 12:32:51

Answer 5

+12 A:

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

e100 2010-06-17 12:35:59

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

Johan 2010-06-17 13:15:20

Answer 6

+1 A:

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.

Oli 2010-06-17 12:39:32

Answer 7

A:

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.

nyousefi 2010-06-17 12:39:59

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.

Erik Töyrä 2010-06-17 12:51:52

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.

nyousefi 2010-06-17 13:17:19

@nyousefi: +1 for the solution in your comment above. You should consider adding it to the answer.

Erik Töyrä 2010-06-18 08:42:36

Answer 8

+6 A:

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.

LeguRi 2010-06-17 12:46:39

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

LeguRi 2010-06-17 13:59:04

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.

matpol 2010-06-21 08:22:37

ansaurus

tags:

views:

answers:

How to modify CSS when requirements change?

related questions