7

假设我被要求生成一些包含表格的页面。最初的要求是所有表格都是 500 像素。

我会按如下方式编写我的 CSS：

table
{
    width: 500px;
}

这将全面适用于所有表格。现在，如果他们更改要求以使某些表格为 600 像素怎么办。修改 CSS 的最佳方法是什么？我应该这样给表格类吗

table.SizeOne
{
    width: 500px;
}

table.SizeTwo
{
    width: 600px;
}

还是有更好的方法让我处理这样的变化？

4

8 回答 8

12

您的建议确实要求您为所有表添加一个类，现有表以及新的宽表；尽管您说“几页”，因此人们会假设只有几张桌子。

如果您可以将 500px 的表格视为标准，而将 600px 视为例外，那么继续设置默认值可能会更有用：

table
{ 
    width: 500px; 
} 

table.Wide /* or a more semantic class name */
{ 
    width: 600px; 
}
于 2010-06-17T12:35:59.443 回答
6

就我个人而言，我喜欢使用以我正在使用的内容命名的类，例如导航或内容。如果您使用类名来指定大小，那感觉就像是一种内联样式的循环方式。一个进入并查看 css 的人不会真正知道他们在使用什么。

于 2010-06-17T12:24:35.263 回答
6

在我看来，这不像是一个 CSS 问题，而是关于不断变化的需求和 CSS……或者更具体地说，是 CSS 上下文中的需求可追溯性……

这将适用于所有桌子。现在，如果他们更改要求以使某些表格为 600 像素怎么办。

该要求不会只是说“某些表格是 600 像素宽”，如果确实如此，您需要一种更好的方法来引出要求。

相反，它可能类似于“人力资源‘员工目录’页面上的表格将是 600 像素宽”。让 CSS 规则具体反映这一点！

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

...或“搜索结果表将是 600px 宽。”：

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

你可能会翻白眼想“但是我有很多类似的 CSS 规则！” 但是他们已经改变了一次想法，所以当他们再次改变主意时不要感到惊讶！

当客户再次更改要求并说“人力资源‘员工目录’页面上的表格将是 600 像素宽；搜索结果表格将是 800 像素宽，所有其他表格是 500 像素宽时，这些“冗余”规则将派上用场。 "
现在，那些糟糕的、非描述性的 CSS 属性“Size1”和“Size2”让你大吃一惊。

于 2010-06-17T12:46:39.133 回答
5

我会给他们命名有意义的类而不是 SizeOne 和 SizeTwo，但是是的，这是最好的方法。

于 2010-06-17T12:23:09.290 回答
5

您可以进一步定义类，这些类使用 body 类（为 body 标签给出的类）等覆盖基本设置。例如，如果您的表格一般宽度设置为 100，并且在特定页面中（带有 bodyclass 'page2'），您需要将宽度设置为 50px，您可以这样做

table{
 width: 100px;
}

.page2 table {
 width :50px;
}

因此，第二类将覆盖前者，以获得唯一具有 bodyclass ="page2" 的页面，并且其他任何地方的宽度都将为 100。

根据部分为正文设置类名是一种很好的做法。

于 2010-06-17T12:32:51.453 回答
1

如果您有几种不同的页面范围布局，您可能会受益于创建一些布局类并将它们附加到您的正文（或其他包含标签）：

<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 类。

于 2010-06-17T12:39:32.113 回答
0

最好的方法是根据他们的父母是谁来修改表格。例如，某些页面应该有不同的 ID，例如：

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

所以在你的 CSS 中将是：

table {
  width: 500px;
}

#contacts table {
  width: 600px;
}

这种方法的优点是您完全在 CSS 中工作，无需向 HTML 文件添加任何内容。为这样的事情添加类只会让您的代码在未来更加难以管理。

如果在编写 HTML 时没有考虑到正确的级联，那么向元素添加正确的 ID 比将类添加到表中要好得多。对于您将不得不投入的工作，回报要大得多。

于 2010-06-17T12:39:59.927 回答
-5

我会写它：

table
{
    width: 500px;
}

并使用SVN之类的版本控制。你的建议使事情变得非常复杂。或者没有版本控制：

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

    }

在我看来，添加大量的类会破坏 CSS 的对象。

于 2010-06-17T12:31:12.470 回答