Arguments for the “style” Attribute

Published on June 27, 2007 (↻ July 25, 2021), filed under Web Development (RSS feed for all categories).

This post is partially outdated.

The HTML Working Group is currently arguing whether to drop the style attribute. To encourage discussion outside the Working Group, here are the (edited) reasons I see to keep @style:

1. To allow authors to manage unique formatting:

   This is probably not the best description […], so let’s use an example: There’s strong desire to avoid page load “flickering” caused by images being loaded. The usual way to address this is by setting width and height attributes, which should be replaced by the style attribute (which is presentational by design).

   <img src="foo" alt="bar" style="width: 100px; height: 200px;">

   Assuming that we don’t talk about galleries where all thumbnails have the same size (and may thus be styled via #gallery img {} […]), but instead a content-rich website that uses many different image or media sizes, there is no other practical option but to use style […].

2. To enable and ensure styling of external material:

   […] take advertising agencies that deliver ad code to commercial websites. Apart from the shadow world their markup appears to come from, we want them to adhere to web standards, too.

   But how’s that going to happen without style? Considering a banner ad where the ad company wants to avoid a border around the ad, there are basically three options:

   1. Hope for each partner to remove an eventual border. (Doesn’t work.)
   2. Delivering the ad with border="0" (or worse). (Presentational.)
   3. Delivering the ad with style="border: 0;". [(Acceptable.)]

3. To enable […] scoped style sheets:

   Robert Burns […] mentioned them, and even though I remember Eric (Meyer) to be unsure about their future, scoped style sheets might become a great [feature].

   Arguments for scoped style sheets should probably be collected on www-style, but […] they could mean even more elegant and effective style sheets […].

We could go on with compatibility, philosophy, other arguments. At this point I don’t consider it wise to drop the style attribute. It sends the wrong signal. We should instead focus on advocating its proper use.

A reply to Henri Sivonen (original mail) shares more thoughts:

In my opinion, it is extremely silly to think that height='' and width='' are bad but style='width: …; height: …;' is good. I’d rather have height='' and width='' on all elements that are replaced elements in the normal case.

Assuming that we don’t want any presentational stuff in our documents at all, [and regarding] the style attribute as the only attribute we would need “in case,” using style for image [dimensions looks better to me] than using width and height attributes […].

If this is not enough, there’s more.

Update (August 15, 2014)

I sometimes have a complicated way of expressing myself. The idea here was that there is the occasional use case for @style, like for really unique stuff you really need but really can’t handle differently. We should in other cases still keep our hands away from it where we can: Asking to keep @style is not the same as asking to use @style.

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a frontend engineering leader and tech author/publisher. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m close to W3C and WHATWG, and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.

If you’d like to do me a favor, interpret charitably (I speak three languages, and they do collide), yet be critical and give feedback for me to fix issues, learn, and improve. Thank you!

Comments (Closed)

1. On July 2, 2007, 11:17 CEST, Laurens Holst said:

   I agree that style should be kept, however your first argument is kind of off; designating the image’s width on <img> elements is not presentation; it’s specifying meta-information of the image, which noticably improves the user experience (the flickering you mentioned).

   The only downside is that due to historical reasons, the attributes override the intrinsic dimensions of the image, which is stylistic behaviour. That’s wrong, but it’s hard to fix. Nevertheless, the attributes still fulfill their meta-information role, especially in the case that you mention.

   ~Grauw

2. On July 4, 2007, 20:05 CEST, Jens Oliver Meiert said:

   That’s an interesting aspect that we should probably add to the style wiki page, too.

   (For what it’s worth, I couldn’t hold back another reply to the discussion.)

3. On September 26, 2007, 17:02 CEST, Ronald Klip said:

   Another reason not to drop the style attribute is that it is widely used in scripting. Showing or hiding elements, or setting their position. Especially setting an element’s position (for example to use in a dragable div) would be impossible without style - unless you’d create a class rule for every position on the screen.

   .left1 {left: 1px;}
   [..]
   .left1920 {left: 1920px;}
   .top1 {top: 1 px;}
   [..]
   .top1200 {top: 1200px;}
   

   Somewhat inconvenient.