Why inline styles are bad

As we all know, external style sheets can greatly facilitate this since every item with the same class can quickly be changed; in addition, since external style sheets are cached, the pages will load quicker. Inline styles are just really inefficient. You might as well just be using presentational HTML from the s. If you only use a style once, then fair enough. Personally the way i do things these days is with dedicated CSS selectors in my stylesheet, if I have any custom modifications i need to make to specific elements I use JavaScript to either change the style inline if there is no one pattern i can use again again or i simply just add another class to the element.

After a quick look at the CKEditor, I see that it supports both fields and styles so that I can define them the efficient way. The start page, and especially the search results page, is filled with inline styling and JavaScript events. If they do it like that, it has to be the best way, right? Well, no. In August a couple of years ago, my friend Roger rewrote the Google code with real proper code , and he goes more into detail explaining what he did in his post.

The most sensible option for Google would be to have one style block located at the top of their HTML code, and one JavaScript block located at the bottom of their HTML code read more about why in Where to include JavaScript files in a document and just have id and class attributes to connect that code to.

See the original article here. Web Dev Zone. Thanks for visiting DZone today,. Edit Profile. Sign Out View Profile. Over 2 million developers have joined DZone. Like 0. Join the DZone community and get the full member experience. Join For Free. 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? Sometimes you might find it easier and faster to inline code if you are both the designer, developer and tester.

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 programatically, 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.