The Style Attribute Doesn't Suck It's Just Misunderstood

The Style Attribute Doesn

One time, I was working on a project and I overheard the lead developer talk smack about the style attribute on a DOM node.

As most people understand client side development so well, my ears perked up a little, so that I could learn more.

He was basically making fun of one of the designers for putting CSS in the style attribute instead of in a CSS file.

He also made a big deal out of them for saying red in a stylesheet instead of #ff0000 which I still don't get why...

I was a little vexed about the style attribute though. Like it was common knowledge to everyone in the know that the style attribute was for rookies. Like the goto statement.

I said, "Well what's wrong with using the style attribute?"

A couple people laughed, as if I was being facetious. I continued, "I'm not saying to put all your CSS inline, but sometimes it makes sense and those are the times when you would use the style attribute."

He looked at me with a pitying smirk, like I was a school boy who just raised his hand and asked, "Isn't the 4th dimension time?"

He said something to the effect that I should always put CSS in a CSS file. So that way I could re-use it somewhere else, "You're always talking about not repeating yourself Grimesey (my nickname in this particular team). You of all people should know better."

I guess I could have felt like a kid who just got taken out to the woodshed. But I knew that this was not a statement made out of extensive experience.

I was much more experienced in the front end than he was and specifically, I had done a lot of sites that had to look pixel for pixel like a Photoshop template. But this was a blanket statement that would be wrong in many cases.

For example, try getting an email template to look right without using the style attribute. Good luck with that.

Pixel Perfect

Do you know how much padding and margin you have to use in CSS to get a page to actually look right? Especially when you need it to look just like a template? For the love of all that's holy, it can be a lot.

You're really telling me that every time I do margin-left: 5px; or margin-top: -10px; that should be in a stylesheet?

I disagree. These are the types of tweaks that are usually page or element specific. If you're going to put CSS in a CSS file, make sure it's something that you CAN re-use.

If you're writing the CSS for a page element that's a one-off, that's to say that you're only going to have this element this one time, depending on what it is I might prefer to put it in the CSS file or I may prefer to inline it.

If I think there's a possibility that it will be re-used later or that I will create something different that looks very similar, then I'll opt for the CSS file.

I think that generally padding should be in a CSS file and margin should be inlined. The reasoning is that padding is internal to that element. Margin relates to position of an element in relation to external elements. Hence you may not want the same margin for an element on every page.

You still want stuff like colors and fonts and font sizes in the CSS file so it's centralized.

But a lot of sizing and positioning that doesn't get re-used should be inlined. Sure I should put the padding for a button in the CSS file with a class.

But what if I need it to be 10px down from the element above it on some page. You really think I should set 10px margin-top at the class level so it moves down everywhere?

That's a one off. That gets inlined.

The style tag is only a joke if you make it a joke. Like when you have all your CSS inlined, like you wrote your markup in Word...

My experience is as a contractor. I've done a lot of quick one week web applications with maybe 10 pages.

The requirement on these types of projects is that you get it done fast and that you make the site look exactly (nearly pixel for pixel) like a photoshop template.

And I have to tell you, not as much of the CSS is as reusable as you think.

A good rule of thumb to remember is that if you are copying and pasting CSS into other style attributes on other elements then you need to put that in a CSS class and give each element that class.

The other thing to consider is templates. If you use a lot of templates then theoretically you could inline your CSS and it would get reused without having to repeat yourself.

One of the trade offs with using CSS selectors and style sheets is that they are akin to global variables. And what are the problems with those?

Pollution of the global scope is the biggest. Try using some common word like row or container for a CSS class name and see what happens.

It won't be a problem as long as you don't use any library or control with a CSS file.

In large projects, CSS conflicts can get really nasty with zillions of lines all trying to control the elements they are scoped to.

Whereas a style attribute is a local variable. It only affects the element that it's tagged to.

When you're on a project that requires precision the style attribute is your friend. It can help you avoid a lot of conflicts.

Use it intelligently and you have no worries.

If you found this article to be helpful, then you should subscribe here.

Subscribe to our mailing list

* indicates required