why is inline CSS bad….and is it really that bad?
Many webpage analyzers and most website designers will actively discourage you from using inline CSS (cascading style sheets) in your web pages. There are usually very good reasons for it, and let's see why it is generally frowned upon.
One question that I generally gets asked is: I just want to use it in this one place. Is it that bad?
So, Is it really bad and Why?
Yes. It is kind of bad and here is why
- Maintainability of the Source: It makes the code really hard to maintain, especially over time. Believe me, nobody will remember where and why that particular CSS is inlined in about 6 months, even if it is a one man development team.
- Modular Design: You must have heard that it is good practice to separate your markup and presentation. This makes most of the design easier to maintain over time. This also allows multiple developers and designers to work on the same design without much overlap.
- Shareable Code/Rules: It is easier to share the rules among pages or even sites. You might think it is going to be used only once, but it much harder to track it down when it needs to be used at another location at a later time. Even worse, you may not even remember that it is used elsewhere.
- Easier to Understand: This is especially true for somebody else rather than the person who initially wrote the code. A new developer or designer will find it much easier to understand the logic and rules if it is not inlined all over the place. Actually, using the style tag in various webpages is worse than inline css.
- Scoping Issues: If you have rules being applied from all over the place, it becomes much harder to track down issues with scoping. You will have to check the element, style tags and external css, all to see why your changes are not getting picked. This can get much harder if it is a dynamic website or a generated websites.
- Browser Caching: You are not taking advantage of browser caching. The same code will need to be downloaded every time the page is loaded as it is part of the page content. This makes the page size to increase (if it is by some bytes).
So, It is never ever good?
Hmmm…..There might be very specific set of conditions that might be unique to a website where it might make sense to do it. It is still not good to code it as inline css, in my humble opinion. Do not use tag level style attributes at all. Tag level CSS is pretty hard to track down especially if it is buried deep in the code. I am talking more about adding rules using style tags with in every page….which is also considered inline css.
You should use some kind of webpage generation script or template to insert the rules from an external file as inline CSS.
- Throwaway Code / Fast Development: If you are generating code which is throwaway as when developing a proof of concept or alpha version. Sometimes you might find it easier and faster to inline code if you are both the designer, developer and tester.
- Small Inline CSS or Few CSS Rules: You have very few rules. As a rule of thumb, if the external CSS file is less than 3 or 4 Kb you could inline the code. I would suggest doing it programmatically, but still maintaining an external file for development. I believe some minifiers and CMS plugins offer this feature to reduce the latency of an extra server request.
- No or Few Repeat Visitors: You have no repeat page views or repeat visitors, hence there is no benefit from browser caching or smaller page size.
- One Page Website: Your website have only one page, which means it probably does not have much CSS and few repeat visitors.
An example of a website where it might make sense to inline CSS is a search engine (eg: google.com) home/search page. The page is loaded billions of times a day, so every request counts and you want save on those. It is technically an one-page website with one purpose and is a very simple page that requires little to no CSS.
Is Inline CSS bad for SEO too?
No. At least I can't think why it might be bad or have any effect on SEO at all.
The only indirect reason i can think of is inline css making the page size bigger. This might cause the page to load slower thus affecting the search ranking. But come to think of it, the page size increase would be very minimal in most cases, unless you are inlining a whole lot of CSS files and rules …more than 10kb or so.