使用内联 css 与外部 css 文件作为背景图像有什么好处答案

【问题标题】：What is the benefit of using inline css vs external css file for background image使用内联 css 与外部 css 文件作为背景图像有什么好处
【发布时间】：2014-12-04 11:58:08
【问题描述】：

我正在决定哪种方法是最好的方法。假设我有一个要附加到多个页面的背景图像（每个页面都有不同的背景图像）。页面本身将是响应式的。如果我做这样的事情会更好吗（内联css）：-

<div class="hero" style="background: url('../images/pagebg.jpg') no-repeat 50% 50% / cover;"></div>

或者我有一个外部 css 并执行以下操作：-

.hero {  
height: 100%;
width: 100%;   
position: relative;
top: 0px;
left: 0px;
display: block;    
}
.hero-page1bg {
background: url('../images/pg1.jpg') no-repeat 50% 50% ;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
}

在我的 html 页面中我放了这个

<div class="hero .hero-page1bg"></div>

我更倾向于第二种方法，因为与第一种方法（内联 CSS）相比，它让我可以灵活地使用媒体查询并为不同的设备分配更小的文件大小。但是我见过很多响应式网站使用第一种方法（内联 css）并为所有设备调用相同的背景文件（基于文件夹结构和文件名），从而迫使这些移动设备下载大文件。

如果您必须通过 CMS 管理网站，则内联 css 看起来是一种合乎逻辑的方法，因为执行内联 css 似乎比让客户端更改 CSS 文件更容易。

什么是正确的方法？内联还是外联？有无CMS？你会走哪条路？

提前谢谢你。干杯

【问题讨论】：

减小文件大小并创建更清晰的 html 文档。您不必在每个页面上都编写相同的样式，这非常方便。如果您在外部 css 文件中更改它，所有 html 文档也会更改。
感谢 Rafael，我确实了解内联与外联的好处。我只是想了解为什么这么多数字代理公司网站在他们的响应式网站上使用内联 css。有什么原因而我错过了吗？
让我给你世界上最好的提示。不要将自己与任何工作的人进行比较。你是在为自己设定限制。如果您已经知道这些好处……请在心里知道并按照您的方式进行编程。这就是让你比其他人更好的原因。明白这一点，那里有很多糟糕的程序员......即使他们为“设计公司”工作。取最好的，留下其余的......
你知道一些 Rafael，我有点同意你的观点。

标签： html css inline

【解决方案1】：

我认为您应该使用第二种方法。始终避免使用内联 css，即使您使用的是 CMS，这也是一种不好的做法。

您应该保持 HTML 的整洁（同样的方法也适用于 javascript）。起初它看起来很有帮助和实用，但后来当您需要维护代码时，它可能会变得一团糟。

【讨论】：

我的想法也是，我很少或可能永远不会真正使用内联 css（除非我正在编写电子邮件 html 编码）。我将永远在外部做我的 css。当您想要进行更改时，这绝对比搜索页面更容易。但是为什么这么多数字代理公司网站都使用内联 CSS 作为背景图片呢？我只是想知道我是否在这里遗漏了什么。即我不知道或未读到的一些大好处。我知道他们中的一些人正在使用一些 JS 将代码动态写入 HTML，但对于某些人来说，很明显它是一个普通的内联 css。

【解决方案2】：

拆分为单独的样式表的典型原因是代码/ui 分离更多，尽管这将不可避免地导致关于“什么是代码”和“什么是 ui”（/样式）的基于意见的答案.

不过，您基本上已经为自己回答了这个问题：媒体查询是流体布局的一大优势。您还可以缓存 css 文件中的内容，从而减少整体服务器负载。

【讨论】：

这是我的想法，但我见过很多响应式网站（我们可以去像awwwards.com/websites/responsive-design 这样的网站，看看那里的大多数网站，他们似乎在使用内联css他们的背景。让我想知道他们为什么这样做？他们如何帮助那些移动用户？这与使用 CMS 管理网站有什么关系吗？这是我认为自己使用内联 css 的唯一合乎逻辑的方式与外部 css 相比，更容易让客户更改内联 css。