Inline styles vs styles in CSS

Question

I know placing all your styles in a CSS file is the best thing to do as it is a lot neater.

But does it REALLY matter if the styles are inline or i

Answer 1

It is a loth easier for maintenance... does it really matter depends on what you think what is important... why wouldn't you use a css file?

Answer 2

It matters because your code becomes very difficult to maintain or update if you use inline styles. Keeping your styles in style tags or separate CSS files allows you to comply with Don't Repeat Yourself, which is probably the most important development principle.

That being said, if you are absolutely certain that a piece of styling is unique to a given element, and also that it won't ever need to be tweaked, you can feel free to use inline styling. I sometimes use inline style for throwaway code and for things like landing pages (once they're done, they're done).

Answer 3

Using Inline CSS:

• Repeat the same rule for every element in the page.
• More code and bigger file size to transfer to the client.
• Harder to maintain, suppose you want to change the width to 200px, you will need to go through all the page and edit one by one.

inline:

<div style="width:100px; height:100px;"></div>
<div style="width:100px; height:100px;"></div>

external OR put css classes in the head [embedded styling]:

<div class="big"></div>
<div class="big"></div>

Based on your edit: that seems not to be inline CSS as in my example above, it is the same idea as using an external file, so if you want to do that go ahead, it is the same.

Answer 4

There's several reasons for avoinding inline CSS.

1) Maintenance, it's easier to make changes to a code where all css is seperated from the markup itself. It also makes the code more readable as avoiding alot of inline css gives you less code.

<div class='test'></div>

is easier on the eye than:

<div style='background:yellow;width:10000px;height:10px;position:absolute;top:10003px;left:132032px;'></div>

When the css is inline you will also have a hard time finding where the code itself is and comparing styles. You will also often end up repeating the same code several times because you can't use classes.

2) Performance, CSS files can be gzipped, making for a smaller load. It's also easier for the browser to handle when it get js and css served as files.

3) Keeping with the best practice. Some other poor developer might want to edit your code later, and he sure would be happy if you kept away from inline CSS.

Now of course you can do CSS in the head of a document too, but why make your files bigger than they need to be? More code into the same file makes for more mess. And you can't gzip it if you do.

Answer 5

When creating master pages I use in-line styles to create the basic layout of the page. For instance I include all of the styles that position the header at the top of the page, main content in the middle and footer at the bottom. Pretty much every style attribute related to positioning, I include in the masterpage as an inline style.

Answer 6

Some thoughts from one with experience, rather than a 'purist':

Storing all styles, for a large application, in one CSS file is not maintainable. You'll have perform a text search of the file to find the style you're looking for, or scroll a lot, and there's a higher chance that you'll overlook related styles when making an update.

If certain styles are particular to a page, not globally used, it is more maintainable to keep them in a style tag within the head tag.

Deep CSS inheritance hierarchies are also not maintainable. These are much, much worse than inline styles! The CSS language itself does a poor job of applying styles to many elements in more complex structures. Consider lesscss, sass, or even jQuery for more than basic application of styles.

Lots of developers use HTML for presentation, mostly DIVs, when they think they are doing the right thing, or lecturing others. Some example above!