Why are inline styles discouraged?

Question

As we all know that awesome programmers are using the StackOverflow. Using StackOverflow as the evidence it is said that inline styles are discouraged. Why is that so? Please explain.

Do they just destroy the cascade? No? Then what do they do?

Thanks :)

Answer 1

There are both technical reasons and matters of opinion/approach/style/paradigm. The main technical reason is that if you use same styling in two or more places on your pages, the same inline CSS code would need to exist in more than one copy. This in turn would make maintenance, especially changes to styling, essentially more difficult. It would have other, largely obvious disadvantages, too.

Mostly you don’t set styles on individual elements but rather on element types or classes or otherwise on several elements. And even if you have, say, just one h1 element per page, styled in a specific way, you probably have such an element on several pages and would normally want to use the same styling (or maybe the same basic styling and some per-page enhancements). Sometimes you want to style an individual element, but it is still imaginable that you later want to use the same styling on another element. Using an external style sheet and e.g. a class attribute then makes it very simple to reuse the styling.

However, if these concerns do not apply (they usually do), then there is no solid technical reason against using inline style. When you specify style settings for an invidual element, with no expectation of ever reusing those settings, then a style attribute is in fact more convenient and more compact to write and more readable. Compare <p style="color: red">text</p> with <p id="foobar">text</p> together with #foobar { color: red; background: white } in another file.

But in a much more typical case, you would find it more useful to write, say, <p class="warning">text/p> and .warning { color: red; background: white } in another file.

Answer 2

They,

1. Separate concerns.
2. Improve readability/accessibility.
3. Make html files smaller.

Answer 3

I was identified bellow reasons

1. You cannot reuse the styles anywhere else.

2. The html markup of the page becomes cumbersome, and tough to parse for the naked eye.

3. Since, they are not stored at a single place, they are tough to be edited

4. This approach does not provide consistency across your application. The inline styles on elements can cause a major headache.

5. It does not provide you with the browser cache advantage. The files are repeatedly downloaded by the client on every request. Instead, consider using External style sheets.

6. Inline styles take precedence over page-level style declarations and external style sheets. So you could accidentally override styles that you did not intend.

7. It's impossible to style pseudo-elements and -classes with inline styles. For example, with external and internal style sheets, you can style the visited, hover, active, and link color of an anchor tag.