Why Inline-styles are so bad?

Just like the magic of music to poetry makes excellent song;
The charm of CSS to HTML produces an extraordinary illustration.

There are three ways to add CSS styles to HTML.

1. Adding styles directly to HTML tags – Inline-Styles
2. Adding styles to HTML Head section 
3. Adding styles to separate stylesheet

“All that matter is how we do it; Not what we do it;”

The best way to code CSS styles is #3. Adding styles to separate stylesheet

Let’s see some brief perception of why #1 and #2 are not so good to practice in the project.

1. Minify HTML file
2. It is wise to “Don’t Repeat Yourself (DRY)”
3. To follow “Separation of concerns”
4. CSS will get cached
5. Easy maintenance

Firstly, the primary reason to move styles to external CSS file from HTML is to minimize the size of the HTML file which makes the file simple and looks good.

If there is a necessity to color all the headers(Say we have 100 headers totally in a site) on the website in blue. If we have the style rule in the CSS file, we can use the rule-name in all the places where the headers need to be colored, rather then repeating our self with a color attribute in header tag to make it blue in 100 different files. Which saves the developer time and energy.

“What belongs together; should stay together”

Tangling the content and styles despoils the law of “Separation of Concerns” in the programming world.

CSS file will be cached on the browser side. So you will contribute a little on internet traffic by not loading some Kb’s of data every time a page is refreshed or the user navigates your site.

If a requirement comes in future to update all the headers(Remember we have 100 blue color header text in our site) font and color on the website, then it is enough to update the header-style-rule in one single place in the style sheet rather than affecting 100 different files.

Make things simpler always.

 Js