假设我需要生成一些包含表格的页面。最初的要求是所有表格都是 500px。
我会按如下方式编写我的 CSS：
table
{
width: 500px;
}
这将全面适用于所有表格。现在，如果他们更改要求以使某些表格为 600 像素怎么办。修改 CSS 的最佳方法是什么？我应该这样给表格类吗
table.SizeOne
{
width: 500px;
}
table.SizeTwo
{
width: 600px;
}
或者我有更好的方法来处理这样的变化吗？
【问题讨论】：
标签： css requirements
您的建议确实要求您为所有表添加一个类，现有表以及新的宽表；尽管您说“几页”，因此人们会认为只有几张桌子。
如果您可以将 500px 的表格视为标准，而将 600px 视为例外，那么继续设置默认值可能会更有用：
table
{
width: 500px;
}
table.Wide /* or a more semantic class name */
{
width: 600px;
}
【讨论】：
我个人喜欢使用以我正在使用的内容命名的类，例如导航或内容。如果您使用类名来指定大小，那感觉就像是一种内联样式的循环方式。进入并查看 css 的人不会真正知道他们在使用什么。
【讨论】：
id 结合使用类名来指示大小并不是那么糟糕。然后可以使用#search-result .page-wide 以及#search-result .column-wide。这是非常清晰和描述性的。
在我看来，这不像是一个 CSS 问题，而是关于不断变化的需求和 CSS……或者更具体地说，是 CSS 上下文中的需求可追溯性……
这将适用于所有桌子。现在，如果他们更改要求，使某些表格为 600 像素，该怎么办。
该要求不会只是说“某些表格是 600 像素宽”，如果确实如此，您需要一种更好的方法来引出要求。
相反，它可能类似于“HR '员工目录'页面上的表格将是 600 像素宽”。让 CSS 规则具体体现这一点！
body#staff-directory table {
width:600px;
}
... 或“搜索结果表格将是 600 像素宽。”：
table.search-results {
width:600px;
}
你可能会翻白眼想“但是我有很多类似的 CSS 规则！”但是他们已经改变了一次想法，所以当他们再次改变主意时不要感到惊讶！
当客户确实再次更改要求并说“人力资源“员工目录”页面上的表格将是 600 像素宽；搜索结果表格将是 800 像素宽时，这些“冗余”规则将派上用场。其他表格的宽度为 500 像素。”
现在，那些糟糕的、非描述性的 CSS 属性“Size1”和“Size2”让你大吃一惊。
【讨论】：
id 和 class。
我会给它们命名有意义的类，而不是 SizeOne 和 SizeTwo，但是是的，这是最好的方法。
【讨论】：
您可以使用 body 类（为 body 标签指定的类）等进一步定义覆盖基本设置的类。 例如，如果您的表格一般宽度设置为 100，并且在特定页面中（使用 bodyclass 'page2'），您需要将宽度设置为 50px，您可以这样做
table{
width: 100px;
}
.page2 table {
width :50px;
}
因此，第二类将覆盖前者，以获得唯一具有 bodyclass="page2" 的页面，并且其他所有位置的宽度均为 100。
最好根据部分为正文设置类名。
【讨论】：
如果您有几种不同的页面范围布局，您可能会受益于创建一些布局类并将它们附加到您的正文（或其他包含标签）：
<body class="wide">
<!-- stuff -->
<table>...</table>
</body>
然后在你的 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}
这看起来很浪费时间，而且对于只是一个表格来说，但如果您还以不同的方式设置图像、div 等样式，则可以节省大量 HTML 标记。
#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}
您的 99% 的 HTML 保持不变（如果您从数据库中提取它并且不想每次使用它时都对其进行调整，这非常有用），您只需更改 body 类。
【讨论】：
最好的方法是根据他们的父母是谁来修改表格。例如，某些页面应该有不同的 ID，例如：
<body id="contacts">
<table>
<tr>
<td>Content</td>
</tr>
</table>
</body>
所以在你的 CSS 中应该是：
table {
width: 500px;
}
#contacts table {
width: 600px;
}
这种方法的优点是您完全在 CSS 中工作，无需向 HTML 文件添加任何内容。为这样的事情添加类只会让您的代码在未来更加难以管理。
如果您编写的 HTML 没有考虑到适当的级联，那么向元素添加正确的 ID 比将类添加到表中要好得多。您必须投入的工作所带来的回报要大得多。
【讨论】：
我会写的：
table
{
width: 500px;
}
并使用 SVN 之类的版本控制。你的建议使事情变得非常复杂。或者没有版本控制：
table
{
/*width: 500px;*/
width: 600px;
}
在我看来，添加大量的类会破坏 CSS 的对象。
【讨论】：