The style attribute considered harmful
A call to cleanup Wikipedia

What is the style attribute?

The style attribute is an HTML attribute that contains presentational information. For example, to make a paragraph red you can write:

  <p style="color: red">...</p>

Why is the style attribute harmful in Wikipedia?

It ties Wikipedia articles to certain kinds of presentations, and therefore makes the content less reusable. Content reuse should be an important goal for Wikipedia.

Doesn't Wikipedia look good on your screen?

If you use a PC, it looks good. Most often, the STYLE attribute is used to enforce a certain style that looks good on common computers. However, if you would like to present the same article on a small mobile phone or print the article, the style may not be appropriate.

Are mobile phones and printers important?

At Opera and Prince, we think so.

If the style attribute is so bad, why is it in the HTML and CSS specifications?

Sometimes it's very convenient to set a style directly. When prototyping, one can save some time.

Who added the style attribute to CSS?

I did, in November 1995. The style attribute has been controversial, but it has survived to this day and is used extensively on the web. Including Wikipedia, I'm afraid.

If the style attribute is widely used on the web, why shouldn't Wikipedia use it?

We want Wikipedia content to live longer and reach more people than the average web page, don't we?

Sure. Are there any alternatives to using the style attribute?

Yes, you can, e.g., write:

  p.alert { color: red }
    ...
  <p class=alert>...</p>

This way, you separate the content from the presentation of the content. This is one of the fundamental principles of style sheets.

You added something in that example, are you sure red means «alert»?

Good question. We don't really know what the red color means when set on the style attribute. It's better to know that something is an alert (or, say, infobox, or reference) than to know how to present it. When we know that something is an alert, we can choose a presentation that is appropriate.

Isn't this just an academic exercise? Are there any practical use cases where style attribute cause real problems?

There are. For example, in a printed book you would often want to use a two-column layout so that lines don't get too long. To achieve this, you can write a separate style sheet. However, tables in Wikipedia article are often wide and cannot easily fit into a two-column layout. Instead, wide tables should span both columns and be shown at the top or bottom of a page. To specify this, you need to select wide tables. This would have been possible if class names were present. However, when style attributes are there instead, one ends up writing sickly code like:

  table[style="text-align:center; width:97%; margin-right:10px; font-size:90%"] { 
    float: bottom 
  }

See more in this thread.

So, you are calling for the removal of style attributes in Wikipedia, and also for the addition of class names?

Exactly. When class names are present, we can style Wikipedia articles in many different ways.

How can this happen? Do we need to rewrite all articles in Wikipedia?

We don't need to rewrite the articles; most of the style attributes are added by templates. The templates can be rewritten to generate proper class names instead of style attributes.

It sounds so simple — why haven't you done it already?

Some of the templates are quite complex and changes are discouraged. There's a scary number of curly braces in that code, and I don't want to break Wikipedia by making a stupid mistakes. It's probably better if people who know the template code do the editing.

What class names should be used?

There is no correct answer to that question. Short words that make intuitive sense are good class names. It's better to have one class names too many, than on too few. In due course, I hope we find consensus around a set of class names that are suitable for the semantics that Wikipedia carries. Also, in some cases, it makes sense for class names to carry information about presentation. For example, wide tables could have the class name "wide".

Anything else that should be fixed in Wikipedia's markup?

Many things can be improved. The code can be made more compact and more semantic. I've done some studies. But the style attribute is the most important topic, I believe.

That's it?

One more thing: I'd like for Wikipedia to support the WebM video format.

2011-01-20 Håkon Wium Lie (CTO, Opera Software; Chairman, YesLogic)