One of the great advantages of using CSS is to separate content and presentation. Remember back in the day when we were all using spacer GIFs and font tags in our HTML? Oops, I think some of you out there are still using it in DotNetNuke development. Well, if you do, I strongly recommend that you should leave it behind. It is such an unpleasant experience when looking at the code especially when working in a team environment.
Today, using inline CSS is just like embedding font tags in your HTML. It is not a good practice in web development. Here are a few reasons why you shouldn't use inline CSS in your code (or in your skinning and UI design approach):
- Maintenance nightmare
Inline CSS forces you to go back to that HTML document to make changes and it only affects that single element instead of being reusable. Instead of adding them to your documents, use a separate style sheet. - Larger file size
Inline CSS means you adding more codes in your document for the browser to load. It is completely opposite to idea of the invention of CSS. Oh BTW, larger file size means longer browser load time. - Not search engine friendly
Inline CSS causes the issue with accessibility for both disabled users and the robot to crawl on your site. Although the document is validated by W3C, but it is not accessible to search engines due to the non-meaning markups.
My recommendation for inline CSS is… not using it at all. So in your next projects, just add a class right next to the elements that you’d like to style and hand it over to your designer.