Why is using the style attribute in html bad?

Question

I was told and also read that using the style attribute in html is considered bad / sloppy / bad form. In addition, so that all specific rendering fragments are split into css and other parts as needed. I am trying to understand why this is exactly.

I can understand why you might want the HTML to not contain a purely semantic DOM that talks about the structure of the document, but for practical pages it is important that the page looks right and functions properly.

Are there any other good reasons for this separation?

Answer 1

• Separation of problems . This makes it easy to replace styles without changing the layout or vice versa. You may also have one person working on CSS and another working on content.

• Do not repeat yourself . You can apply a style to many elements without repeating it over and over. Smaller pages mean faster load times, using less bandwidth. Plus it’s easier to change it later because you can change it in one place in one file, and not in many places in many files.

• Cachability . If the same stylesheet is used on every page of your site, browsers can download it once, and then cache it, rather than loading styles with the contents of each individual page, and they will not have to reload it whenever the content of these pages changes.

• Several versions . It is easy to create several versions of the visual layout and appearance of your site, since you just need to change the stylesheet to change the look of each page. For example, you can create a version of a web application with a white label that your partners can repaint to match their brand. See CSS Zen Garden for some great examples of how flexible this approach can be.

Answer 2

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 need to go through each element and change the style attribute. Imagine doing this on 10, maybe 20 pages of HTML, and you will understand why this is becoming a problem.

Using a stylesheet separates the contents:

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

From style:

 ul li { color: blue; } 

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

In addition to simplifying the style of the document, there is also a selector specificity. Imagine that you inherited the first piece of code from a previous developer and would like to change the color again, but you (being a good developer) prefer style sheets:

 ul li { color: red; } 

You will soon be disappointed and resort to using !important , as your selectors cannot override inline styles.

Answer 3

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 page, you just change one style from CSS and the changes will be applied to all files, If you have a style in HTML, you will need to go through the pages one by one and change the style. It is good practice to build templates.

Answer 4

Separating markup and css. You can use css to change the look of everything without affecting the layout.

Advantages: Creating different designs for the same html. Separation of work within the team. One third-party developer can focus entirely on css. Back-end developers don't have to bother with css. It’s easier to change the look in the future. Easier to port html markup to a new platform or content management system in the future.