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.