Question

我知道将所有样式放在CSS文件中是最好的事情，因为它更整洁。

但是如果样式是内联的或者在CSS中真的重要吗?????

编辑

我的计划是将样式放在我的MasterPage中，所有其他页面都将使用MasterPage ....我相信正确的术语不是“INLINE”而是Embedded ???

Answer 1

一些有经验的人的想法，而不是'纯粹主义者'：

将大型应用程序的所有样式存储在一个CSS文件中是不可维护的。您将对文件执行文本搜索以查找您正在查找的样式，或者滚动很多，并且在进行更新时您更有可能忽略相关样式。

如果某些样式特定于页面而非全局使用，则将它们保存在head标记内的样式标记中更易于维护。

深度CSS继承层次结构也无法维护。这些比内联样式更糟糕！ CSS语言本身在将样式应用于更复杂结构中的许多元素方面做得很差。考虑lesscss，sass甚至jQuery不仅仅是基本的样式应用。

许多开发人员使用HTML进行演示，主要是DIV，当他们认为自己正在做正确的事情或讲授其他人时。上面的一些例子！

Answer 2

这很重要，因为如果使用内联样式，代码将变得非常难以维护或更新。将样式保存在样式标记或单独的CSS文件中可以使您遵守Don't Repeat Yourself，这可能是最重要的开发原则。

话虽这么说，如果你绝对肯定一件造型对于给定的元素是独一无二的，而且它也不需要调整，你可以随意使用内联样式。我有时会使用内联样式来处理一次性代码以及着陆页等内容（一旦完成，就会完成）。

Answer 3

使用内联CSS：

为每个人重复相同的规则页面中的元素。
更多代码和更大的文件大小转移到客户端。
更难维护，假设你想要将宽度更改为200px，你将需要浏览所有页面并逐一编辑。

直列：

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

外部或将css类放入头部[嵌入式样式]：

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

基于您的编辑，这似乎不是上面的示例中的内联CSS，它与使用外部文件的想法相同，所以如果您想要这样做，请继续是一样的。

Answer 4

没有但如果您只需要查看一个地方而不是所有标题/内联，那么对css进行更改会更容易

另外一件事，如果你没有eny css / javascript inline，你的标记看起来会更清晰

Answer 5

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

Answer 6

将样式存储在一个文档中可帮助您控制整个项目。此外，维护和应用更改的代码更少。

Answer 7

这对维护来说更容易......真的很重要取决于你认为什么是重要的......你为什么不使用css文件？

Answer 8

你的意思是把你的风格放在一起，或者把它们作为'style =“x”'添加到你的元素中吗？

Answer 9

避免使用内联CSS有几个原因。

1）维护，更容易更改所有css与标记本身分离的代码。它还使代码更具可读性，因为避免了很多内联css为您提供的代码更少。

<div class='test'></div>

比眼睛更容易：

<div style='background:yellow;width:10000px;height:10px;position:absolute;top:10003px;left:132032px;'></div>

当css是内联时，你也很难找到代码本身的位置并比较样式。您也经常会多次重复使用相同的代码，因为您无法使用类。

2）性能，CSS文件可以进行gzip压缩，从而减少负载。当浏览器将js和css作为文件提供时，它也更容易处理。

3）保持最佳实践。其他一些可怜的开发人员可能希望稍后编辑您的代码，如果您远离内联CSS，他肯定会很高兴。

当然，你现在也可以在文档的头部做CSS，但为什么要让你的文件比他们需要的更大？更多代码进入同一个文件会导致更多混乱。如果你这样做，就不能对它进行gzip。

Answer 10

@Etienne，这样做有一个缺点，如果你想对生产部署任何更改，你就可以进行构建并推送它。

如果您将所有内容维护为css，则只需推送css文件更改并使负载均衡器缓存无效。

我认为这是一个很好的提及。

Answer 11

什么时候最好使用内联样式

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

需要一个创建 CSS 类的服务器端代码里面有动态风格。
需要一个服务器端编写和保存 .css 文件的代码
需要一个能够将创建的 CSS 类链接到正确的 HTML 元素您必须加载外部 CSS 文件原因，这是性能的降级（文件大小和 1 个 HTTP 请求）
在很多情况下，动态代码只有一两个，问题出人意料地清楚了：您必须创建一个 ex 文件。 800bytes 2行代码，作为外部文件加载。更容易接触到错误。代码越复杂，出现错误的机会就越大。与它们执行的任务的简单性相比，上面的服务器端代码非常复杂。

实际用例：

想象一个场景，用户想要上传一张图片并将其用作 HTML 元素中的背景。旧规则只是 style="background-image:URL()". 新规则一些代码必须创建并保存一个外部文件，只有代码 style="background-image:URL()"，为它创建一个 CSS 类，将它写入 HTML 组件中，加载这个只需要一行代码的 CSS 文件。完全是胡说八道。还要考虑到每次用户更新图像时都必须执行此操作。

最终结果：

性能最差，原因是多了 1 个 HTTP 请求和大型复杂的服务器端代码。
作者浪费了数小时的时间来开发不仅无用而且会产生实际问题的东西。
项目中至少还有一个文件
代码的可读性/可理解性最差，因为用户必须检查 HTML，然后找到链接的 CSS 类的 CSS 代码才能看到样式的值。

什么时候最好使用外部 CSS 文件

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

CSS中的内联样式与样式

11 个答案: