0 
<h1 style="margin: -20px 0 40px 0">Heading</h1>

对比

.intro h1 { margin: -20px 0 40px 0; }

这是我的困境，我有一个页面使用来自其他页面的独特样式作为单个标题。我很难决定是必须在外部样式表中声明这些属性还是直接将其硬编码到该元素。

我必须更改的属性只是保证金。它只会纠正间距问题。

我看到了使用这两种方法的利弊：

如果我在外部样式表中声明它，这可能是操纵元素外观的传统方式，但对于单个元素，我觉得它太多了。

如果我将它声明为内联到元素，那么以后更新会很方便，而不是通过一堆 css 规则来查找特定的规则声明。

我需要有人支持我，而不是凭直觉做出决定。如果我必须选择一种方法，我会使用内联。

4

4 回答 4

3

来自 Google 的令人敬畏的窥视：

要求

这里需要在请求和可缓存性之间进行权衡：将 CSS 直接包含在 HTML 中可以避免对外部 CSS 资源发出额外请求，但如果 CSS 文件很大（并且不经常更改），最好保留它与 HTML 分开，以便它可以被浏览器缓存。因此，内联 CSS 过滤器只会内联低于特定大小阈值的 CSS 文件，可以使用 CssInlineMaxBytes 指令进行调整。

CSS 文件可能包含一小段 JavaScript 代码，至少对于某些浏览器来说是这样。为避免打开跨域脚本漏洞，内联 CSS 过滤器只会内联外部 CSS 文件，前提是它与要内联的 HTML 文件来自同一域。

风险

“内联 CSS”过滤器的风险为低到中等。对于大多数页面来说它应该是安全的，但它可能会破坏遍历 DOM 查找和检查或标记的脚本。

https://developers.google.com/speed/pagespeed/module/filter-css-inline

于 2013-11-12T23:41:45.070 回答
1

对我来说，这一切都取决于你想花多少时间来维护你的设计。考虑这三个例子：

内联（标签）：

<h1 style="margin: -20px 0 40px 0">Heading</h1>

内联（文档）：

<style>
  .intro h1 { margin: -20px 0 40px 0; }
</style>
<h1 class="intro">Heading</h1>

并分开：

page.css：

.intro h1 { margin: -20px 0 40px 0; }

page.html：

<h1 class="intro">Heading</h1>

所有这三个将产生相同的结果，但是在前两个示例中，如果介绍标题的样式发生更改，则必须在复制此代码的所有位置进行更新。使用内联（标签）版本，您甚至可能不知道您是否错过了一个，因为没有可搜索的语义模式。我认为第三个版本是最好的方法。当您的设计集中管理时，您的 HTML 充满了标记和语义含义。

于 2013-11-12T23:56:31.300 回答
0

您始终通过#id在 CSS 中使用来声明特定的元素规则。

与布局相关的所有内容都应在 CSS 中找到，这使您稍后尝试修复边距时更容易混淆。当您在浏览器中使用调试器时，无论如何都会很容易找到它定义的行，（或者至少看到应用样式的规则，如果它被最小化）所以说“以后更新会更容易”有点落地面（如果你问我）

我看到内联 CSS 的唯一有效原因是当您使用 javascript 动态控制样式时

于 2013-11-12T23:40:36.800 回答
0

如果您已经在使用它，我会在外部样式表中声明它。将所有 CSS 样式代码放在一个（有时是几个）样式表文件中，这很好。即使它只在一个页面上使用过一次。这样，如果您需要再次更改它 - 您将不必搜索该文件或对代码进行排序以找到它。

或者，您可以在文件中声明元素规则。这将仅将样式应用于此页面，并且可以轻松地位于文件的开头。

我不是经过认证的专业人士。但我参加了几门网页设计和网页编程课程，并且玩过让网站看起来不错的各个方面。我一直被告知正确的网页设计技术不应该使用内联样式，并且如果您想要单个页面的一些特定规则，则仅在 HTML 文件中声明样式规则。

将样式保持在一起并组织起来是明智之举，这样您就可以随时轻松更改它。内联添加样式可能会导致其他人忽略他们期望的标签，而不是寻找包含更多内容的标签。这也使代码保持整洁。让它保持最小，简单和容易的眼睛。

祝你好运！

于 2013-11-13T00:05:32.557 回答