What's so bad about in-line CSS?

Question

When I see website starter code and examples, the CSS is always in a separate file, named something like "main.css", "default.css", or "Site.css". However, when I'm coding up a page, I'm often tempted to throw the CSS in-line with a DOM element, such as by setting "float: right" on an image. I get the feeling that this is "bad coding", since it's so rarely done in examples.

I understand that if the style will be applied to multiple objects, it's wise to follow "Don't Repeat Yourself" (DRY) and assign it to a CSS class to be referenced by each element. However, if I won't be repeating the CSS on another element, why not in-line the CSS as I write the HTML?

The question: Is using in-line CSS considered bad, even if it will only be used on that element? If so, why?

Example (is this bad?):

<img src="myimage.gif" style="float:right" />

Answer 1

Using inline CSS is way much harder to maintain.

If you use inline CSS, for every property you want to change, inline CSS will require you to look for the corresponding html code, instead of just looking inside clearly define and hopefully well structured CSS files.

Answer 2

Having to change 100 lines of code when you want to make the site look different. That may not apply in your example, but if you're using inline css for things like

<div style ="font-size:larger; text-align:center; font-weight:bold">

on each page to denote a page header, it would be a lot easier to maintain as

<div class="pageheader">  

if the pageheader is defined in a single stylesheet so that if you want to change how a page header looks across the entire site, you change the css in one place.

However, I'll be a heretic and say that in your example, I see no problem. You're targeting the behavior of a single image, which probably has to look right on a single page, so putting the actual css in a stylesheet would probably be overkill.

Answer 3

I think even If you want to have that style for one element, what If you want to apply the same style on the same element in more than one page and one fine day somebody asks to change or add some more style to the same element in all the pages? In that case, If you had the styles defined in a style class and have that in a .css file, you would make change in only that .css file to get that reflected in same element in all the pages and avoid headache. :-)

Answer 4

Inline CSS will always, always win in precedence over any linked-stylesheet CSS. This can cause enormous headache for you if and when you go and write a proper cascading stylesheet, and your properties aren't applying correctly.

It also hurts your application semantically: CSS is about separating presentation from markup. When you tangle the two together, things get much more difficult to understand and maintain. It's a similar principle as separating database code from your controller code on the server side of things.

Finally, imagine that you have 20 of those image tags. What happens when you decide that they should be floated left?

Answer 5

Even if you only use the style once as in this example you've still mixed CONTENT and DESIGN. Lookup "Separation of concerns".

Answer 6

The whole point of CSS is to separate content from its presentation. So in your example you are mixing content with presentation and this may be "considered harmful".

Answer 7

The advantage for having a different css file are

1. Easy to maintain your html page
2. Change to the Look and feel will be easy and you can have support for many themes on your pages.
3. Your css file will be cached on the browser side. So you will contribute a little on internet traffic by not loading some kbs of data every time a the page is refreshed or user navigates your site.