Saturday, August 19, 2006

Say NO to inline styles!

This is my advice to anyone writing a web application that may be extended by another person. In my case, this became important when making templates for my favourite CMS. More specifically, the shopping cart plugin that I am using with it.

The problem is quite simple. the usage of inline styles wrests control away from the template designer and can (as in my case) cause bugs in the GUI. So it's not about subjective personal taste, it is about software stability.

CSS stands for Cascading Style Sheets. In this context, the word cascade applies to the order of priority that a a competing collection of style definitions has on a target HTML (or XML) element. We all know there are three ways that a style rule can apply to an element.
  1. From an external file that is linked or imported
  2. From an embedded defenition included in a <style/> container element
  3. From the value of the style attribute associated with the target element.
The last method listed above is referred to as an "inline style". The order or precedence is the reverse of how I have listed them. Inline overrides embedded overrides external.

This means that if your HTML application defines styles inline to the markup that you output, then the template designer will have to hack up your program in order to regain control over the style. ie. they will have to remove your inline style definitions. The same applies to embedding styles. Its marginally easier to work around embedded styles but it still goes against the idea of templating. In fact, there are work-arounds, but I won't go into them. I don't see why work-arounds should be accepatable when there is nothing to lose by putting all style information in an external CSS file.

You could argue that your understanding of how your content will be templated by someone else is utterly comprehensive. But in my opinion, that would be ambitious to the point of being fool-hardy. It limits the extensibility of the application unnecessarily and your application may was well not be template-able. There goes your separation of concerns, and there goes the sound design of your app.

So please, be nice to layout engineers (designers), and say NO to inline styles.

If you need to brush up on your CSS skills...


Blogger Terence said...

Case in point. Blogspot allows bloggers to edit their own templates. A fantastic idea, but when you go to insert an image, the hard-code ths style information in-line. And now there is nothing I can do about the way that image at the beginning of the blog entry is sitting.

Saturday, August 19, 2006 10:48:00 PM  
Blogger Terence said...

On applicable forums, I sometimes use that image as an avatar to help get my message across. It's a bit extreme, but it does the job. Feel free to do the same.

Saturday, August 19, 2006 10:50:00 PM  

Post a Comment

Links to this post:

Create a Link

<< Home

My status