How to modify CSS when requirements change?_问答_开发者

Suppose I'm given the requirement to generate 开发者_StackOverflow中文版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?

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

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.

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.

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

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.

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.

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.

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.

How to modify CSS when requirements change?

精彩评论

关注公众号

热门标签

图文推荐

How to modify CSS when requirements change?

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：