html - 将内联 css 与外部 css 文件用于背景图像有什么好处

Question

我正在决定哪种方法最好。假设我有一个背景图片，我想附加到多个页面(每个页面都有不同的背景图片)。页面本身将响应。如果我这样做会更好吗(内联 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)。起初它看起来很有帮助和实用，但后来当您需要维护您的代码时，它可能会变得一团糟。