What is the benefit of using inline css vs external css file for background image

问题

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>

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;
}

and in my html page I put this

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

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.

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.

What is the right approach guys? Inline or external? And with and without CMS? Which way will you go?

Thank you in advance. Cheers

回答1:

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.

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.

回答2:

The typical reason to split into separate style sheet is due to more of a code/ui separation thing, although this will inevitably lead to opinion-based answers on "what is code" and "what is ui" (/styling).

However you've basically answered the question for yourself: media queries are a big bonus when going for fluid layouts. You can also cache the heck out of a css file, reducing overall server load.

来源：https://stackoverflow.com/questions/27285978/what-is-the-benefit-of-using-inline-css-vs-external-css-file-for-background-imag

标签

html

css

css3

inline