Are inline styles bad?

Tuesday, June 6th, 2006

Posted originally as a comment on 456 Berea Street. I had also originally posted a comment on this very same topic on Emil Stenström’s Friendly Bit.

A sign reading: Wrong Way I believe that the style attribute is allowed because the purpose of separation is nonetheless achieved via CSS. Whether its included directly in the page via inline styles or in a separate stylesheet, the presentation and structural layers are still kept separate. You have to remember that the push behind separation came from a) the misuse of structural elements such as the paragraph tag for adding spacing and b) the use of sanctioned structural markup for presentational purposes (such as <center> and <font>). With CSS, all that is presentational is taken out of the markup and either relegated to a separate file, or to attributes within the markup which are exactly that, attributes, not actual markup. Therefore separation is maintained.

The question is then not one of separation but one of efficiency. Is it more efficient and therefore simpler to maintain when we use separate stylesheets? The answer in most cases is yes. However, if you take that approach to the extreme you begin to introduce other problems such as the difficulty of maintaining separate stylesheets for different locales in the case if image replacements etc… Or, you start generating stylesheets (which introduces all kinds of overhead) simply to avoid using an inline style attribute.

I think whats called for isn’t so much a fundamentalist and/or extremist approach where everything is black or white. Rather, if we are to treat our trade as the art form that it is, and if we are to call ourselves seasoned professionals, then we should implement the years of wisdom we’ve acquired and make educated judgment calls as to when and where to use the tool provided to us in the form of the style attribute.

Sphere: Related Content

Comments closed

3 Comments

WD Milner says:
June 6th, 2006 at 2:30 pm
Inline styles are useful for testing, or for something specific - maybe a late or temporary addition to a page but for general use I personally would avoid them.

Not only is it efficient to group CSS in files, but it also enables the browser to cache the stylesheet so it needn’t be downloaded each time (unless a page specifically loads a previously unused stylesheet). Inline styles, on the other hand, will swell the size of the main document file considerably, and will need to be downloaded with each page, even if they are duplicated from page to page.

While this extra ‘bloat’ may not be a problem with a small page, it can significantly impact laod times, especially for those without broadband connections.

Note that approx. 40-50% of US internet users do not have broadband and this climbs to 100% in some parts of the world. The last global average I recall seeing was that 70-80% of worldwide internet users were still using dial-up. Only about 15-20% of the worlds population are actually internet users.

Of course in all such consideration has to be the intended audience for the site.
Luke says:
June 6th, 2006 at 2:41 pm
I agree, sometimes inline styles are ok. But their use should be limited to specific things. Before you use an inline style, it makes sense to ask yourself these questions:

1. If I need to redesign this website tomorrow, will my inline styles become an issue?

2. How easy is to track down and modify my inlines?

3. How many times does a style attribute appears on a given page on average?

For example, it’s probably ok to you define page specific css in a big style block at the top of your page, along with appropriate comments.

It’s probably a bad practice to add a style attribute to every individual div or span tag.

Similarly it probably makes more sense to use a dedicated css file per location, rather than copy and paste the same location specific inline css on every page. This way you end up maintaining 4-5 css files, rather than 40-50 html pages.

But yes, it all depends on the situation and if inline css is more appropriate then that’s what should be used.
Ara says:
June 7th, 2006 at 1:10 am
WD & Luke: There are definitely advantages to physically separating the CSS into a different file. Bandwidth usage and ease of maintenance are at the top of the list of reasons for doing so. Don’t get me wrong, I’m all for it. I just wrote the comment/post because I was having a bit of a hard time with the whole idea that the style attribute was being treated as though it were “evil”–so to speak.