使用内嵌CSS和外部CSS文件获取背景图片有什么好处 [英] What is the benefit of using inline css vs external css file for background image
问题描述
我正在决定哪种方法是最好的方法.假设我有一个背景图像，我想将其附加到多个页面(每个页面具有不同的背景图像).页面本身将响应.如果我做这样的事情(内联CSS)会更好吗:-
I'm kind of deciding which will be the best approach here. Let say I have a background image that I want to attached to multiple pages (each page with different background image). The page itself will be responsive. Will it be better if I do something like this (inline css):-
<div class="hero" style="background: url('../images/pagebg.jpg') no-repeat 50% 50% / cover;"></div>
或者我有一个外部CSS并执行以下操作:-
or I have an external css and do something like this:-
.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页面中，将其放置
and in my html page I put this
<div class="hero .hero-page1bg"></div>
我更倾向于第二种方法，因为与第一种方法(内联CSS)相比，它为我提供了使用媒体查询的灵活性，并为不同的设备分配了较小的文件大小.但是我看到如此多的响应式网站使用第一种方法(内联css)并为所有设备调用相同的后台文件(基于文件夹结构和文件名)，从而迫使那些移动设备下载大文件.
I'm more leaning to the second approach because it gives me the flexibility of using media queries and assign a smaller file size for different devices comparing to the first approach (inline css). But I've seen so many responsive website using the first approach (inline css) and calling the same background file for all devices (based on folder structure and file name), thus forcing those mobile devices to download big file size.
如果您必须通过CMS管理站点，则内联css看起来很合乎逻辑，因为内联css似乎比让客户端更改CSS文件更容易.
If you have to manage a site via CMS the inline css looks like a logical approach as it seems to be easier to do inline css than getting the client to change the CSS file.
什么是正确的方法?内联还是外联?有无CMS?你会走哪条路?
What is the right approach guys? Inline or external? And with and without CMS? Which way will you go?
先谢谢您.干杯
推荐答案
我认为您应该使用第二种方法.始终避免使用内联css，即使您使用的是CMS，这实际上也是一个不好的做法.
I think you should use the second approach. Always avoid using inline css, it is really a bad practice even if you are using a CMS.
您应该保持HTML的整洁(相同的方法也适用于javascript).乍一看，它似乎很有帮助和实用性，但是后来，当您需要维护代码时，可能会一团糟.
You should keep your HTML's clean (the same approach also apply to javascript). At first it will seem helpful and util but later when you need to maintain your code it could be a mess.
这篇关于使用内嵌CSS和外部CSS文件获取背景图片有什么好处的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
