Does the style attribute use a frown?

Question

As someone who is starting to move from tabular design to full CSS, I wonder if using the style attribute to make adjustments to elements is considered a “trick”, and if absolutely ALL the presentation should be strictly in the stylesheet

See also:

Question about style - approaches to style and styles

Answer 1

There are times when you know for sure that all you want to do is customize the style of this one particular element and nothing more.

In these cases, you can happily use the built-in style attribute. But then , at some point in the future, you will realize that you really need to apply the same style to something else, and you will realize that you were wrong.

Been there, done it. 8 -)

Answer 2

I feel there is an aspect that has not been addressed here: the difference between manually edited, edited HTML snippets and generated HTML snippets.

For human editing, it is probably better and easier to maintain styles in a file.

but

As soon as you start generating HTML elements using scripts on the server side or with some kind of JavaScript, be sure to create all the styles necessary for the basic functionality!

For example, you wrote some kind of JavaScript library that generates tooltips. Now you enter DIVs on your page, which will require some styles. For example, position: absolute and, initially, display:none . You may be tempted to give these elements a .popup class and require that this class have the correct definitions in some CSS file. In the end, styles should be specified in the CSS file, right?

You will make your JavaScript library very annoying for reuse, because you can no longer just copy and call a single .js file and do with it. Instead, you will have to copy the .js file, but you also need to make sure that all the styles required by the script are defined in your CSS file, and you need to go look for them and make sure their names do not indicate a conflict with the classes that you are already there.

For maximum ease of use, just go and set the necessary styles directly to the element when creating it. For styles that are exclusively for aesthetic purposes, such as background-color , font-size , etc., you can still attach a class to give your script consumer a simple way to change the appearance of your script elements, but don't require this !

Answer 3

You can use the style attribute, but the point of using CSS is that you make changes to a single file and affect the whole site. Try to avoid it as much as possible (old habits die hard)

Answer 4

Not supported. We all did it. What you are best doing is any style setting. Let me teach you what most developers don't know about CSS ... you can use N styles at a time.

For example, imagine you have a great style for a colorized div called someDIVStyle :

 .someDIVStlye { background-color: yellow; ... } 

You want to use it, but just want to set background-color to blue. Many people copy / paste it and then create a new style with a change. However, just create this style:

 .blueBackground { background-color: blue; } 

Apply it as such:

 <div class="someDIVStyle blueBackground">... 

The style farthest to the right always overrides the properties of the styles preceding it. You can use several styles at once to meet your needs.

Answer 5

I agree with some other posters that it is better to store style information in a style sheet. CSS tends to get complicated quickly, and it's nice to have this information in one place (instead of moving from HTML to the stylesheet to see which styles are used).

A little off topic: pressing F12 in IE8 opens up a great tool that allows you to check the styles of elements on the web pages you are viewing. In Firefox, FireBug does the same. These tools are lifeguards if you want to know how a change in style will affect an element.

Answer 6

This is a very "personal" question, for me the word "EVERYTHING" is a very strong word. You should do your best to have most of the style in your css. but you can use style if it makes your life easier.

Answer 7

As a general rule, it is best to have styles in the stylesheet, especially if they will be used multiple times, but using the style attribute is definitely not "cheating." A quick look at the stackoverflow source shows many examples of this.

Answer 8

Yes, this is a kind of cheating, but it is up to you if you want to cheat a little. :)

The basic idea behind creating styles in a stylesheet is to separate the contents from the layout. If you use the style attribute, you are still mixing the layout inside the content.

However, this is not so scary, as you can easily move the style to the class. This is very convenient during development to be able to easily set the style for a particular element without having to make a class name and worry about how the style will be cascaded.

I sometimes allow a style attribute to go through in production code if it is something specific to just one page, and if it doubts that it will be there for long. It’s only by chance that I click on the time, and it can be cleared later ...

So, even if you sometimes use a style attribute, you should still strive to keep all the styles in the stylesheet. Ultimately, the code simplifies maintenance.

Answer 9

As others said, no at all.

However, there are times when this makes sense. For example, today I had to load a random background image into a div from a directory with an unknown number of files. In principle, the client can drop files to this folder, and they will be displayed when the background image is rotated accidentally.

For me, this was a clear reason for dynamically creating a style tag in a div.

In addition, if you use, for example, the .net infrastructure with web forms and inline controls, then in any case you will use inline styles!

Answer 10

There are very good reasons for creating a style article.

For example, if you want to have a different title on each page (travel agencies ...), it’s much easier to place this style information in this particular element (better at the beginning of the document ...) than to give this element a different class on each page and Define all these classes in an external style.

Answer 11

The style attribute has one important meaning: a programmatic installation style. While the DOM includes methods for manipulating style sheets, the support for them is still spotty, and they are a bit difficult for many tasks, such as hiding and displaying elements.

Answer 12

Yes, the style attribute is not generally approved. As you switch to the CSS method from the table, I highly recommend that you avoid inline styles. As the previous poster noted: bad habits are hard to break, and the habit of using inline styles for their temporary convenience is a mistake. You can also return to using the font tag. There is no difference.

Having said that, there are times when it makes sense to use a simple inline style, but first develop the habit of using style sheets. Only when it’s convenient for you to place everything in the stylesheet should you start searching for shortcuts.

I think the general consensus of everyone who posted the answer