Html 特定于页面的 css 规则 - 将它们放在哪里？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/773672/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Page-specific css rules - where to put them?
提问by Chris
Often when I'm designing a site, I have a need for a specific style to apply to a specific element on a page and I'm absolutely certain it will only ever apply to that element on that page (such as an absolutely positioned button or something). I don't want to resort to inline styles, as I tend to agree with the philosophy that styles be kept separate from markup, so I find myself debating internally where to put the style definition.
通常在设计网站时，我需要将特定样式应用于页面上的特定元素，并且我绝对确定它只会应用于该页面上的该元素（例如绝对定位按钮或者其他的东西）。我不想求助于内联样式，因为我倾向于同意将样式与标记分开的哲学，所以我发现自己在内部争论将样式定义放在哪里。
I hate to define a specific class or ID in my base css file for a one-time use scenario, and I dread the idea of making page-specific .css files. For the current site I'm working on, I'm considering just putting the style definition at the top of the page in the head element. What would you do?
我讨厌在我的基本 css 文件中为一次性使用场景定义特定的类或 ID，并且我害怕制作特定于页面的 .css 文件的想法。对于我正在处理的当前站点，我正在考虑将样式定义放在页面顶部的 head 元素中。你会怎么办？
采纳答案by Ben S
Look to see if there's a combination of classes which would give you the result that you want. You might also want to consider breaking up the CSS for that one element into a few classes that could be re-used on other elements. This would help minimize the CSS required for your site as a whole.
看看是否有一个类的组合可以给你你想要的结果。您可能还想考虑将一个元素的 CSS 分解为几个可以在其他元素上重复使用的类。这将有助于最大限度地减少整个网站所需的 CSS。
I would try to avoid page-specific CSS at the top the HTML files since that leaves your CSS fragmented in the event that you want to change the appearance of the site.
我会尽量避免在 HTML 文件顶部使用特定于页面的 CSS，因为如果您想更改站点的外观，这会使您的 CSS 变得碎片化。
For CSS which is really, truely, never to be used on anything else, I would still resort to putting a #idrule in the site-wide CSS.
对于真的，真的，永远不会用于其他任何东西的 CSS，我仍然会诉诸#id于在站点范围的 CSS 中放置规则。
Since the CSS is linked in from a different file it allows the browsers to cache that file, which reduces your server bandwidth (very) slightly for future loads.
由于 CSS 是从不同的文件链接进来的，它允许浏览器缓存该文件，这会（非常）轻微地减少您的服务器带宽以供将来加载。
回答by Cesar
I would set an id for a page like
我会为一个页面设置一个id
<body id="specific-page"> or <html id="specific-page">
and make use of css override mechanism in the sitewide css file.
并在站点范围的 css 文件中使用 css 覆盖机制。
回答by u7867
There are four basic cases:
有四种基本情况：
- style= attribute. This is the least maintainable but easiest to code. I personally consider use of style= to be a bug.
- <style> element at the top of the page. This is slightly better than style= because it keeps the markup clean, however it wastes bandwidth and makes it harder to make sweeping CSS changes, because you can't look at the stylesheet(s) and know what rules exist.
- page-specifc css: This lets you have the clean HTML andclean main CSS file. However, it means your client must download lots of little CSS files, which increases bandwidth and page loading latency. It is, however, very easy to maintain.
- one big site-wide CSS: The main advantage of one big file is that it's only one thing to download. This is much more efficient in terms of bandwidth and latency.
- 样式= 属性。这是最难维护但最容易编码的。我个人认为使用 style= 是一个错误。
- <style> 元素位于页面顶部。这比 style= 稍微好一点，因为它保持标记干净，但是它浪费了带宽并使彻底的 CSS 更改变得更加困难，因为您无法查看样式表并知道存在哪些规则。
- 页面特定的 css：这让您拥有干净的 HTML和干净的主 CSS 文件。但是，这意味着您的客户端必须下载大量小的 CSS 文件，这会增加带宽和页面加载延迟。然而，它非常容易维护。
- 一个大的站点范围的 CSS：一个大文件的主要优点是它只需下载一件事。这在带宽和延迟方面效率更高。
If you have any server-side programming going on, you might be able to just dynamically combine multiple sheets from #3 to get the effect of #4.
如果您正在进行任何服务器端编程，您也许可以动态组合#3 中的多个工作表以获得#4 的效果。
I would recommend one big file, whether you actually maintain it as one file or generate the file through a build process or dynamically on the server. You can specify your selectors using page-specific IDs (always include one, just in case).
我会推荐一个大文件，无论您实际上将其作为一个文件进行维护，还是通过构建过程或在服务器上动态生成文件。您可以使用特定于页面的 ID 指定您的选择器（始终包括一个，以防万一）。
As for the answer that was accepted when I wrote this,I disagree with finding a "combination of classes that gives you the result you want". This sounds to me like the classes are identifying a visual style instead of a logical concept. Your classes should be something like "titlebox" and not "red". Then if you need to change the text colour on the user info page, you can say
至于我写这篇文章时被接受的答案，我不同意找到一个“给你想要的结果的类组合”。在我看来，这听起来像是在识别视觉风格而不是逻辑概念。您的课程应该类似于“标题框”而不是“红色”。然后如果您需要更改用户信息页面上的文本颜色，您可以说
#userInfoPage .titlebox h1 { color : red; }
Don't start applying classes all over the place because a class currently has a certain appearance that you want. You should put high-level concepts into your page, represented by HTML with classes, and then style those concepts, not the other way around.
不要开始到处应用类，因为类当前具有您想要的特定外观。您应该将高级概念放入页面中，由 HTML 和类表示，然后设置这些概念的样式，而不是相反。
回答by Rob Allen
Defining the style in the consuming page or inlineing your style are two sides of the same coin - in both cases you are using page bandwidth to get the style in there. I don't think one is necessarily better than the other.
在消费页面中定义样式或内联您的样式是同一枚硬币的两个方面——在这两种情况下，您都在使用页面带宽来获取样式。我不认为一个一定比另一个更好。
I would advocate making an #Selector for it in your site-wide main stylesheet. The pollution is minimal and if you really have that many truly unique cases, you may want to rethink they way you mark-up your sites.
我提倡在站点范围的主样式表中为它制作一个#Selector。污染是最小的，如果你真的有那么多真正独特的案例，你可能需要重新考虑它们标记你的网站的方式。
回答by Tommi Forsstr?m
I think you should definitely expand the thought process to include some doubt for "page specific css". This should be a very very rare thing to have. I'd say go for the global style sheets anyway, but refactor your css / html in a way that pages don't have to have super-specific styling. And if in the end there's a few lines of page-specific markup in the global css, who cares. It's better to have it in a consistent place anyway.
我认为您绝对应该扩展思考过程，以包括对“特定于页面的 css”的一些疑问。这应该是一件非常非常罕见的事情。我会说无论如何都要使用全局样式表，但是以页面不必具有超级特定样式的方式重构您的 css/html。如果最后在全局 css 中有几行特定于页面的标记，谁在乎。无论如何，最好将它放在一个一致的地方。
回答by roflwaffle
It's not worth it to load a page-specific CSS file for one or two specific rules. I would place it in tags in the head of the document. What I usually do is have my site-wide CSS file and then using comments, section it up based on the pages and apply specific rules there.
为一两个特定规则加载特定于页面的 CSS 文件是不值得的。我会把它放在文档头部的标签中。我通常做的是拥有我的站点范围的 CSS 文件，然后使用注释，根据页面将其划分并在那里应用特定规则。
回答by AndreiM
I would put them in a <style />tag at the top of the page.
我会将它们放在<style />页面顶部的标签中。
回答by Canavar
As you know style-sheet files are static files and cached at client. Also they can be compressed by web server. So putting them in an external file is my choice.
如您所知，样式表文件是静态文件并缓存在客户端。它们也可以被网络服务器压缩。所以把它们放在一个外部文件中是我的选择。
回答by Harper Shelby
For that situation, I think putting the page-specific style information in the header is probably the best solution. Polluting your site-wide style sheet seems wrong, and I agree with your take on inline styles.
对于这种情况，我认为将特定于页面的样式信息放在标题中可能是最好的解决方案。污染整个站点的样式表似乎是错误的，我同意您对内联样式的看法。
回答by Jeff Wain
In that case I typically place it at the top of the page. I have a page definition framework in PHP that I use which carries local variables for each page, one of which is page-specific CSS styles.
在这种情况下，我通常将它放在页面的顶部。我在 PHP 中有一个页面定义框架，我使用它为每个页面携带局部变量，其中一个是特定于页面的 CSS 样式。
