Question

在CSS中，我应该在顶层命名我的页面 - 就像这样：

<div class="page_products">

为了编写特定于该页面的css，如下所示：

.page_products h3 {
   font-color: red;
}

注意：这是一个完全随机的，可能没用的样式覆盖。 H3是第一个进入我脑海的东西。我只想描述一下这种做法。

我见过一些描述这种做法的地方 - 包括一个answer to one of my other posts，我觉得它太可怕了。我宁愿覆盖页面顶部的<style>标记或创建第二个.css文件（不太可能）。但是，如果我以另一种方式看待它，它非常吸引人，我很想使用它。

其他人如何看待这种做法。它对我来说看起来很难维护。有哪些优点或缺陷？

补充一点：我也可能正在尝试编写一个特定于“iPhone”版本的.css文件 - 并且有点担心多个css文件可能会变得非常笨拙而无法管理。

Answer 1

我没有找到一堆一次性的CSS文件，每个文件中包含1或2个规则，我发现给body一个类似于你的例子的ID或类属性很有用。最终，实用主义应该获胜。简单性意味着不同规模的不同事物 - 如果每页都有大量的CSS更改，那么维护不同的CSS文件并交换include语句会突然变得更加简单。但只有少数规则，可能只有少数边缘案例页面，更容易在主样式表中包含所有规则。

Answer 2

我通常喜欢指定其他CSS文件。但是，它会导致额外的HTTP请求并减慢加载时间。 html头中的<style>标签在长期内是不可维护的。

如果您有针对特定页面覆盖少数项目的样式的场景，那么这种方法是合理的。

最好使用body而不是div来应用类或id。它更清洁，更容易发现以后的维护。

Answer 3

有时你只是没有选择，而且你必须为某些页面提供特定的CSS

我通常会在每个页面的正文中添加一个唯一的ID - 然后不需要额外的div。

<body id="page-x">
    <h3>Page Title</h3>
</body>

然后如有必要，我尽可能少地添加到主样式表（以防止其他http请求）

#page-x h3 {
    custom css...
}

Answer 4

当人们想要使用像Greasemonkey这样的工具搞乱你的渲染时，给予元素名称会让事情变得简单易行。他们可能只想“修复”您的“page_products”标签。

例如，有一个我成为其中一员的torrent网站，它显示了一系列复选框，当我列出新的种子时，我不想看这些复选框。使用Greasemonkey，我可以应用一些显示：没有CSS到命名元素，每次去那里都会看不见。

我是否应该为了自定义css的目的而“命名我的页面”？

4 个答案: