html - 特定于页面的 CSS 规则 - 将它们放在哪里?

标签 html css

当我设计网站时,我经常需要将特定样式应用于页面上的特定元素,并且我绝对确定它只会应用于该页面上的该元素(例如绝对定位的按钮或其他东西)。我不想求助于内联样式,因为我倾向于同意样式与标记分开的理念,所以我发现自己在内部争论将样式定义放在哪里。

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

最佳答案

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

我会尽量避免在 HTML 文件顶部使用特定于页面的 CSS,因为如果您想更改网站的外观,这会使您的 CSS 支离 splinter 。

对于真的、真的永远不会用在其他任何东西上的 CSS,我仍然会求助于在站点范围的 CSS 中放置一个 #id 规则。

由于 CSS 是从不同的文件链接进来的,它允许浏览器缓存该文件,这会(非常)轻微地减少您的服务器带宽以供将来加载。

关于html - 特定于页面的 CSS 规则 - 将它们放在哪里?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/773672/

相关文章:

php - 在配置文件选项卡中添加列结构(如网格)

html - 将 HTML 表格单元格 float /定位到右侧,与之前的单元格重叠

html - 如何使用 flex 在父 div 中的 2 个兄弟 div 旁边设置 1 个 div?

css - 更改 Angular Material mat-dialog-content 样式

iPhone & iPad 位置 : fixed bottom problem

html - 使用 XHTML 1.0 Transitional 的表格样式

javascript - 如何在 onclick review.save 操作之前验证必填字段

css - 如何选择没有子标签的标签?

html - 如何更改我的布局代码,如 css 中的附加图片

javascript - D3 渲染 SVG。我如何以编程方式获取该 SVG?