Why is using the style-attribute in html bad?

Question

I have been told, as well as read that using the style attribute in html is considered bad/sloppy/poor form. Further, that all rendering specific bits should be divorced into css and other parts as appropriate. I am trying to understand why exactly this is.

I can see why you might want to keep the HTML a pure semantic DOM, that speaks about the structure of the document, but for practical pages, the importance is that the page looks right and functions appropriately.

Is there some more compelling reasons for this separation?

So if your design or structure changes, you don't have to update the other half (design or structure). Today you want pictures to have 10px in borders, a few months later you now want them to be floated left and no border. — GordonsBeard, Mar 02 '13 at 03:12
Well, if you understand the conceptual value of keeping the HTML structural and the visual style external (in CSS), then you may well have substantially answered your own question. And that doesn't even dive in to the simplicity of maintaining style sheets to affect a change in the appearance of an entire site without hitting tons of HTML files.. — David W, Mar 02 '13 at 03:14

score 22 · Accepted Answer · edited May 08 '17 at 14:55

22

Separation of concerns This makes it easy to replace the styles without changing the markup, or vice versa. Plus you can have one person working on CSS and another working on content
Don't Repeat Yourself You can apply a style to many elements without having to repeat it over and over. Smaller pages means quicker load times using less bandwidth. Plus it's easier to modify later, because you can change it in one place in one file, instead of many places in many files.
Cachability If the same style sheet is used on every page of your site, browsers can download it once and then cache it, instead of downloading the styles with the content of every single page. And they won't have to re-download it whenever the content of those pages changes.
Multiple Versions It is easy to create multiple versions of the visual layout and appearance of your site since you just need to swap out the stylesheet file to change the appearance of every page. For instance, you can create a white-label version of a web application which your partners can re-skin to match their brand. See CSS Zen Garden for some great examples of how flexible this approach can be.

edited May 08 '17 at 14:55

Victor2748

4,149
13
52
89

answered Mar 02 '13 at 03:26

Tim Goodman

23,308
7
64
83

1

What really concerns me though is: How difficult it is to achieve these idealistic goals. For one, how do you take care of naming when you want to specialize a little button or label inside a container that is deeply nested? I am guessing, a sort of namespace approach needs to be used? – Domi Oct 20 '14 at 08:57
1

I have a few problems with this answer. Why is it separation of concerns to put styles in a different file? both are visual elements. Don't repeat - Agreed. But what about those elements which are a one off thing? How about readability? if the style is in the same place as the HTML - I can immediately understand what's going on. – YaDa Jul 27 '16 at 05:06
@YaDa Thanks for the comment. Regarding "both are visual elements", I think the key difference is between elements that describe the structure of the document ("this is a heading", "this is a paragraph", etc.) vs. styles that describe the presentation of the document ("make the headings this big", "put the text in this font", etc.). The latter is much less tied to the content of the document (and in fact might be different for large screen vs. small screen vs. print versions). – Tim Goodman Jul 28 '16 at 23:08
@YaDa Regarding "readability", the question is readability for whom? Most readers aren't going to care about *how* a certain presentation is achieved, they'll just view the rendered content. Someone responsible for editing the content also won't necessarily care about the final presentation (and indeed in many cases they'll know the presentation might change two years from now when you undergo a site-wide redesign), and is probably better off working with something closer to raw text. (Even HTML with no inline styles can feel rather cluttered compared to, say, Markdown.) – Tim Goodman Jul 28 '16 at 23:25
@YaDa For those who want to understand how a given presentation is achieved, you're probably better off using other tools (such as the built in developer tools that come with many browsers) that let you see all the styles applied to an element, regardless of where they came from. This is particularly true when styles are also being dynamically added by scripts, as that won't be clear from the raw HTML source anyway. – Tim Goodman Jul 28 '16 at 23:29

score 4 · Answer 2 · answered Mar 02 '13 at 03:21

Start with this code:

<ul>
    <li style="color: blue;">One</li>
    <li style="color: blue;">Two</li>
    <li style="color: blue;">Three</li>
    <li style="color: blue;">Four</li>
</ul>

Let's say that today, you decide to change the link color to red. Since these styles are inline, you tediously have to walk through each element and change the style attribute. Imagine doing this for 10, maybe 20 HTML pages and you'll see why this becomes a problem.

Using a stylesheet separates the content:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

From the style:

ul li {
    color: blue;
}

Had you used a stylesheet from the beginning, changing the color is as simple as changing blue to red in your stylesheet.

Aside from making the document easier to style, there's also selector specificity. Imagine that you inherited the first code chunk from a previous developer and would like to change the color again, but you (being a nice developer) prefer stylesheets:

ul li {
    color: red;
}

You'll soon become frustrated and resort to using !important, as your selectors can't override the inline styles.

score 1 · Answer 3 · answered Mar 02 '13 at 03:13

CSS should be another file included in HTML because, if you want to change one style of an element that is included in more than one pages you will just change one style from CSS and the changes will be applied to all of the files. If you have the style in HTML, you would need to go on the pages one by one and change the styling. Its a good template building practice.

score 1 · Answer 4 · answered Mar 02 '13 at 03:18

By separating markup and css. You can use css to change the look of everything, without affecting the markup.

Benefits include: Creating different designs for the same html. Dividing work within a team. One front-end developer can focus entirely on the css. Back-end developers, do not have to hassle with the css. Easier to change the look in the future. Easier to migrate the html-markup to a new platform or content management system in the future.

Why is using the style-attribute in html bad?

4 Answers4

Linked