特定于页面的CSS规则 - 放置它们的位置？

Question

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

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

Answer 1

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

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

对于真的,真的,永远不会用于其他任何东西的CSS,我仍然会#id在网站范围的CSS中使用规则.

由于CSS是从不同的文件链接进来的,因此它允许浏览器缓存该文件,从而在未来的负载下(非常)略微降低服务器带宽.

我希望我能给出所有答案，但你的答案是最冗长的，所以你明白了。我最终设计了一个类，它可以足够通用，可以放在主 css 文件中，而不会把事情弄乱。感谢您考虑缓存和页面大小，我也忘记考虑了。 (2认同)

Answer 2

我会为一个页面设置一个id

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

并在站点范围的 css 文件中使用 css 覆盖机制。

Answer 3

有四种基本情况:

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

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

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

至于我写这篇文章时接受的答案,我不同意找到"给你想要的结果的课程组合".这听起来像是类正在识别视觉风格而不是逻辑概念.你的课程应该是"titlebox"而不是"red".然后,如果您需要更改用户信息页面上的文本颜色,您可以说

#userInfoPage .titlebox h1 { color : red; }

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