Question

通常在我设计网站时，我需要将特定样式应用于页面上的特定元素，我绝对肯定它只会应用于该页面上的该元素（例如绝对定位按钮或东西）。我不想求助于内联样式，因为我倾向于同意样式与标记分开的哲学，因此我发现自己在内部讨论样式定义的位置。

我讨厌在我的基本css文件中为一次性使用场景定义一个特定的类或ID，我害怕制作特定于页面的.css文件的想法。对于我正在处理的当前站点，我正在考虑将样式定义放在head元素的页面顶部。你会做什么？

Answer 1

看看是否有一些类的组合可以为您提供所需的结果。您可能还想考虑将该元素的CSS分解为可以在其他元素上重用的几个类。这有助于最大限度地减少整个网站所需的CSS。

我会尝试在HTML文件的顶部避免使用特定于页面的CSS，因为如果您想要更改网站的外观，则会使CSS碎片化。

对于真的，真的，永远不会用于其他任何内容的CSS，我仍然会在网站范围的CSS中使用#id规则。

由于CSS是从不同的文件链接进来的，因此它允许浏览器缓存该文件，这会在未来的负载下（非常）略微降低服务器带宽。

Answer 2

有四种基本情况：

style = attribute。这是最不易维护但最容易编码的。我个人认为使用style =是一个bug。
- ＆LT;风格＆GT;元素位于页面顶部。这比style =稍微好一点，因为它保持了标记清洁，但是它浪费了带宽并且使得更改CSS变得更加困难，因为你无法查看样式表并知道存在哪些规则。
- page-specifc css：这使您可以使用干净的HTML 和清理主CSS文件。但是，这意味着您的客户端必须下载大量的小CSS文件，这会增加带宽和页面加载延迟。但是，它很容易维护。
- 一个大的站点范围的CSS：一个大文件的主要优点是它只下载一件事。这在带宽和延迟方面更有效。

如果您正在进行任何服务器端编程，您可能只需动态组合＃3中的多个工作表即可获得＃4的效果。

我会推荐一个大文件，无论你是将它实际保存为一个文件，还是通过构建过程生成文件，还是在服务器上动态生成。您可以使用特定于页面的ID指定选择器（总是包括一个，以防万一）。

至于answer that was accepted when I wrote this,我不同意找到“给你想要的结果的类的组合”。这听起来像是类正在识别视觉风格而不是逻辑概念。你的课程应该是“titlebox”而不是“red”。然后，如果您需要更改用户信息页面上的文本颜色，您可以说

#userInfoPage .titlebox h1 { color : red; }

不要开始在所有地方应用类，因为类当前具有您想要的某种外观。您应该将高级概念放入页面中，用带有类的HTML表示，然后设置这些概念的样式，而不是反过来。

Answer 3

我认为你绝对应该扩展思维过程以包含对“特定于页面的CSS”的疑问。这应该是非常罕见的事情。无论如何，我会说全球样式表，但重构你的css / html，使页面不必具有超级特定的样式。如果最终在全局css中有几行特定于页面的标记，谁在乎呢。无论如何，最好将它放在一致的地方。

Answer 4

在消费页面中定义样式或内联样式是同一枚硬币的两面 - 在这两种情况下，您都使用页面带宽来获取样式。我认为一个人不一定比另一个好。

我建议在你的网站范围的主样式表中为它创建一个#Selector。污染很小，如果你真的有这么多真正独特的案例，你可能想重新考虑一下你标记你的网站。

Answer 5

我会为

这样的网页设置ID

<body id="specific-page"> or <html id="specific-page">

并在sitewide css文件中使用css override机制。

Answer 6

我会将它们放在页面顶部的<style />标记中。

Answer 7

为一个或两个特定规则加载特定于页面的CSS文件是不值得的。我会把它放在文档头部的标签中。我通常做的是拥有我的网站范围的CSS文件，然后使用评论，根据页面对其进行分区并在那里应用特定的规则。

Answer 8

如您所知，样式表文件是静态文件并在客户端缓存。它们也可以通过Web服务器进行压缩。因此，将它们放在外部文件中是我的选择。

Answer 9

对于这种情况，我认为将页面特定的样式信息放在标题中可能是最好的解决方案。污染您的网站范围样式表似乎是错误的，我同意您对内联样式的看法。

Answer 10

在这种情况下，我通常将它放在页面顶部。我在PHP中使用了一个页面定义框架，它为每个页面提供了局部变量，其中一个是页面特定的CSS样式。

Answer 11

如果您想知道样式的定义位置，请将其放在您想看的位置。

对我来说，这与我放置2次，5次或170次的样式完全相同 - 我认为没有理由根据使用次数从主样式表中排除样式。 / p>