什么是使用内联CSS，相较于背景图像外部CSS文件的好处(What is the benefit o

我有种决定，这将是最好的办法在这里。 让说我有，我想连接到多个页面（有不同的背景图像中的每个页面）的背景图像。 页面本身将响应。 它会更好，如果我做这样的事情（内嵌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？ 你会往哪个方向走？

先感谢您。 干杯

Answer 1:

我认为你应该使用第二种方法。 始终避免使用内联CSS，它真的是，即使你使用的是CMS一种不好的做法。

你应该让你的HTML的干净（同样的方法也适用于JavaScript的）。 起初，当你需要保持你的代码它可能是一个烂摊子它似乎乐于助人，UTIL但后来。

Answer 2:

典型的原因分成独立的样式表是由于更多的代码/用户界面分离的事情，虽然这将不可避免地导致对“什么是代码”和“什么是UI”（/造型）发表意见的答案。

但是你已经基本上回答了这个问题自己：去为流体布局时，媒体查询是一个巨大的奖赏。 您也可以缓存赫克一个css文件，降低了整体服务器负载。

文章来源: What is the benefit of using inline css vs external css file for background image