内联样式与CSS中的样式对比

Question

我知道把所有样式都放在CSS文件中是最好的做法，因为这样更加整洁。

但是，样式是内联还是在CSS中真的很重要吗？

以下为编辑内容

我的计划是将样式放在我的主页面中，所有其他页面都将使用主页面……我相信正确的术语不是“INLINE”，而是“嵌入式”？

- Etienne

Answer 1

来自经验丰富者而非“理论派”的一些想法:

对于大型应用程序，将所有样式存储在一个CSS文件中是难以维护的。你需要在文件中执行文本搜索以找到所需的样式，或者要滚动很长时间，而当进行更新时可能会忽视相关的样式。

如果某些样式特定于页面而不是全局使用，则更易于维护它们位于标签内的

- Paul

Answer 2

这很重要，因为如果您使用内联样式，您的代码将变得非常难以维护或更新。将样式保留在样式标签或单独的CSS文件中，可以让您遵守不要重复自己，这可能是最重要的开发原则之一。

话虽如此，如果您绝对确定某个样式仅适用于特定元素，并且永远不需要进行微调，则可以放心使用内联样式。我有时会在一次性代码和着陆页面等方面使用内联样式（一旦完成，就完成了）。

- Kyle Wild

Answer 3

使用内联CSS：

• 对于页面中的每个元素都要重复相同的规则。
• 代码更多，文件大小更大，需要传输给客户端。
• 难以维护，假设您想将宽度更改为200像素，则需要逐个编辑整个页面。

内联：

<div style="width:100px; height:100px;"></div>
<div style="width:100px; height:100px;"></div>

外部样式表或者在头部嵌入css类[内嵌样式]:

<div class="big"></div>
<div class="big"></div>

根据您的编辑：看起来这不是像我上面示例中的内联CSS，而是与使用外部文件相同的想法，因此如果您想这样做，请继续进行，它是一样的。

- Amr Elgarhy

---

我不会这样做，我会将样式放在我的MasterPage的HEAD标签中，然后从那里调用类。 - Etienne

是的，请继续，这与放在单独的文件中相同，您可以选择放在头部或单独文件中，只需考虑哪种方法以后更好、更容易管理，这是您决定，但就性能而言，据我所知没有任何区别。 - Amr Elgarhy

谢谢，是的，我相信我需要使用的正确词语不是内联样式，而是嵌入式样式。 - Etienne

Answer 4

将样式存储在一个文档中有助于您控制整个项目。此外，代码量更少，维护和应用更改更加方便。

- Coderx07

Answer 5

不过，如果你只需要查看一个地方而不是所有的标题/内联内容，那么只需更改CSS会更容易。

另外一件事，如果没有任何内联的CSS / JavaScript，你的标记看起来会更加清晰。

- Kimtho6

Answer 6

在创建主页面时，我使用内联样式来创建页面的基本布局。例如，我包含所有将标题置于页面顶部、将主要内容置于中间以及将页脚置于底部的样式。几乎每个与定位相关的样式属性，我都将其作为内联样式包含在主页面中。

- Dave

Answer 7

对于维护来说，使用 CSS 文件会更容易一些...是否真的重要取决于您认为什么是重要的...为什么不使用 CSS 文件呢？

- BvdVen

---

我认为当你使用内联CSS时，会使自己或项目变得更加困难...它只会在一个屏幕上创建更多的代码行，因此可读性会降低。 - BvdVen

Answer 8

你的意思是将样式放在

- Sander

---

将它们添加到MasterPage的HEAD标签中，而不是附加到元素本身... - Etienne

Answer 9

@Etienne，这种做法有一个缺点，如果你想要部署任何变更到生产环境，你必须建立构建并推送它。

如果你将一切都保持为CSS，你只需要推送CSS文件的更改并使负载均衡器缓存失效即可。

我认为这是值得一提的好点。

- kobe

Answer 10

何时最好使用内联样式

在某些情况下，内联样式是最佳解决方案，例如当一些样式通过服务器端代码（例如WordPress插件）从用户输入动态创建，仅应用于单个HTML元素时，将其插入到外部CSS文件中只会引起问题：

• 需要一个服务器端代码来创建包含动态样式的CSS类。
• 需要一个服务器端代码来编写和保存.css文件。
• 需要一个服务器端代码能够将创建的CSS类链接到正确的HTML元素。无需为此加载外部CSS文件，这会降低性能（文件大小和1个HTTP请求）。
• 在许多情况下，当动态代码只有一两行时，问题变得非常明显：您必须创建一个800字节的文件，其中包含2行代码，并将其作为外部文件加载。更容易出现错误。代码越复杂，出错的机会就越大。与它们所执行的任务的简单性相比，上述服务器端代码非常复杂。

真实用例：

想象一种情况，用户想要上传一张图片并将其用作 HTML 元素的背景。旧规则只需使用 style="background-image:URL()"。但是，根据新规则，一些代码必须创建并保存一个外部文件，仅使用代码 style="background-image:URL()"，为其创建 CSS 类，在 HTML 组件中编写它，并使用一行代码加载此 CSS 文件。完全没有意义。还要考虑到每次用户更新图像时都必须执行此操作。

最终结果：

• 由于多了一个 HTTP 请求和大量复杂的服务器端代码，性能最差。
• 浪费作者开发毫无用处且会带来实际问题的东西的时间。
• 项目中至少有一个以上的文件。
• 代码的可读性/理解度最差，因为用户必须检查 HTML，然后找到链接的 CSS 类的 CSS 代码，以查看样式的值。

何时最好使用外部 CSS 文件

除上述情况外的所有其他情况，简而言之，当样式固定且永远不会更改时，应将其放入外部 CSS 文件中。

- Federico Schiocchet