如何在需求变更时修改CSS？

Question

假设我已经要求生成一些包含表格的页面.原始要求是所有表格为500px.

我按如下方式编写CSS:

table
{
    width: 500px;
}

这将全面适用于所有表格.现在,如果他们改变了要求,那么一些表是600px.修改CSS的最佳方法是什么？我应该给表格类

table.SizeOne
{
    width: 500px;
}

table.SizeTwo
{
    width: 600px;
}

或者,有更好的方法来处理这样的变化吗？

Answer 1

您的建议确实要求您为所有表格添加一个类,现有的表格以及新的宽表格; 虽然你说"几页",因此可以假设只有几张表.

如果您可以将500px表视为标准,将600px视为异常,那么继续设置默认值可能会更有用:

table
{ 
    width: 500px; 
} 

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

Answer 2

就个人而言,我喜欢使用以我正在使用的名称命名的类,例如导航或内容.如果您使用类名来指定大小,那么感觉就像是关于内联样式的方式.一个人进来看着css,他们真的不知道他们在做什么.

Answer 3

对于我来说,这不像是一个CSS问题,而是关于改变需求和CSS ...或者更具体地说,CSS的上下文中的需求可追溯性......

这将适用于所有表格.现在,如果他们改变了要求,那么有些表是600px.

这个要求不仅仅是说"有些表格是600px宽",如果确实如此,你需要一种更好的方式来引出需求.

相反,它可能会像"HR'员工目录'页面上的表格将是600px宽." 使CSS规则具体反映!

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

...或"搜索结果表将是600px宽.":

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

你可能会睁大眼睛想想"但是我有这么多相似的CSS规则!" 但他们已经改变了主意,所以当他们再次这样做时不要感到惊讶!

当客户端再次更改要求时,这些"冗余"规则将派上用场,并说"HR'人员目录'页面上的表格将为600px宽;搜索结果表格宽度为800px,所有其他表格宽度为500px. "
现在那些糟糕的,非描述性的CSS属性"Size1"和"Size2"已经击中了你的脚.

Answer 4

我会给他们带有有意义名称的类而不是SizeOne和SizeTwo,但是这是最好的方法.

Answer 5

你可以进一步定义类,使用body类(为body标签指定的类)来覆盖基本设置.例如,如果您的表格一般宽度设置为100并且在特定页面中(使用bodyclass"page2"),您需要将宽度设置为50px,您可以这样做

table{
 width: 100px;
}

.page2 table {
 width :50px;
}

因此,第二类将过度使用前者,因为唯一的页面是bodyclass ="page2",而其他每个地方的宽度都是100.

最好根据部分为正文设置类名.