logo标签列表

当需求变化时如何修改CSS？

cssrequirements
7
假设我需要生成一些带有表格的页面。最初的需求是所有表格都应该是500像素。
我会按照以下方式编写我的CSS：
table
{
    width: 500px;
}

这将适用于所有表格。那么，如果他们更改要求，使某些表格为600px，最好的修改CSS的方法是什么？我应该给表格分类吗？

table.SizeOne
{
    width: 500px;
}

table.SizeTwo
{
    width: 600px;
}

还有没有更好的方法来处理这样的变化？

1
在我看来，那似乎是完美的方法。我这样做，这就是类和ID的用途 :) - Kyle
6
这似乎是一个不错的方法，不过您可能希望给它们更有意义的名称 ;) - ChrisF
关于我使用的CSS名称，这只是为了举例而已。我真正编写的CSS都有更有意义的命名。谢谢大家 :-) - DaveDev
8个回答
12

你的建议需要你为所有表格添加一个类，包括现有的表格和新的宽表格；尽管您说“几个页面”，因此人们可能会认为只有几个表格。

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

table
{ 
    width: 500px; 
} 

table.Wide /* or a more semantic class name */
{ 
    width: 600px; 
}
或者有3个默认的“表”，然后新的称为“table.SizeOne”和“table.SizeTwo”。（也许使用更好的名称）。 - Johan
6
这对我来说不像是一个关于CSS的问题，更多的是关于改变需求和CSS...或者更具体地说，在CSS上下文中实现需求可追溯性...

这将适用于所有表格。现在，如果他们更改要求，使一些表格为600px。

该要求不会只说“一些表格宽度为600px”，如果是这样，您需要更好的方法来引出要求。

相反，它可能是这样的：“HR 'staff directory'页面上的表格宽度将为600px。”让CSS规则具体反映这一点！

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

...或者“搜索结果表格将会是600像素宽。”

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

你可能会觉得“但是这样我就有了很多相似的CSS规则！”但是他们已经改变过一次想法，所以当他们再次改变时不要感到惊讶！那些“冗余”的规则在客户再次更改要求并说“HR‘员工目录’页面上的表格宽度为600px；搜索结果的表格宽度为800px，所有其他表格的宽度为500px。”时将会派上用场。现在那些糟糕的、不明确的CSS属性“Size1”和“Size2”已经让你步入了陷阱。
我将其回滚，因为我有意在我的CSS规则中同时使用id和class。 - Richard JP Le Guen
这就是我应该写的！你可以使用一个样式并将其应用于多个选择器，例如：body#staff-directory table,table.search-results{ width:600px; }这就是我认为CSS应该做的方式。 - matpol
6

个人而言，我喜欢使用与我所使用的内容相关的类名，例如导航或内容。如果您使用类名来指定大小，则感觉像是使用内联样式的迂回方式。一个看CSS的人可能不知道自己正在处理什么。

在大多数情况下，我也是这样做的，但使用类名表示大小并结合描述性的id并不是那么糟糕。然后可以使用 #search-result .page-wide 以及 #search-result .column-wide。这非常清晰和具有描述性。 - Erik Töyrä Silfverswärd
你说得对 - 这只是为了举例而已。我所编写的任何真实的 CSS 都具有反映其本质而非外观的名称。 - DaveDev
那么这个想法很有道理，我喜欢使用类的方式。我会创建两个类，而不是覆盖所有表格，因为在程序的后续重构过程中，我遇到了更多问题，需要绕过通用选择器来添加新区域。 - Jeff Beck
5

您可以进一步定义类，使用 body 类（为 body 标签指定的类）或其他方式覆盖基本设置。

例如，如果您的表格总宽度设置为 100，在特定页面（具有 bodyclass 'page2'），您需要将宽度设置为 50px，则可以这样做：

table{
 width: 100px;
}

.page2 table {
 width :50px;
}

因此，第二个类将覆盖前一个类，仅对具有bodyclass =“page2”的页面生效，在其他任何地方，宽度将为100。

根据部分设置一个基于类名的body是一个好习惯。

5

我会给它们起有意义的名称，而不是SizeOne和SizeTwo这样的名称，但是这确实是最好的方法。

你说得对 - 这只是为了举例而已。我所编写的任何真正的CSS都具有反映其本质而非外观的名称。 - DaveDev
1
如果您有多个不同的页面宽度布局，那么创建一些布局类并将它们附加到您的body（或其他包含标签）可能会对您有所帮助。
<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}

看起来它只是一个表格，可能浪费时间，但如果您也对图像、层等进行了不同的样式处理，您可以节省大量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}

如果你从数据库中获取HTML并且不想每次使用时都进行调整，那么你的99% HTML内容将保持不变（非常有用），你只需要更改body类即可。

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，而不是仅为表格添加类。您需要付出的努力相对应得多。
只要在同一页上不需要同时拥有500像素宽和600像素宽的表格，那么这个解决方案就可以了。但是如果需要同时拥有这两种宽度的表格，那么这个解决方案就行不通了。 - Erik Töyrä Silfverswärd
1
当然，在这个例子中，我们假设每页有1个表格，但即使使用多个表格，一般的想法仍然成立：首先看看是否可以通过它们的祖先指定要样式化的元素。如果这不是一个选项，那么就给表格本身添加类或ID。 - nyousefi
你应该考虑将你在上面评论中提供的解决方案添加到答案中。 - Erik Töyrä Silfverswärd
-5

我会这样写：

table
{
    width: 500px;
}

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

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

    }

在我看来，添加大量的类别违背了CSS的初衷。

3
OP只需要一些表格改变宽度，其他保持原来的宽度。 - ChrisF
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接