Question

I have a table, with 10 columns. I want to control the width of each column.
Each column is unique, right now I create an external CSS style for each column:

div#my-page table#members th.name-col
{ width: 40px; }

I know there is a best practice to avoid inline style.
I do approve using external CSS for anything look’n’feel related: fonts, colors, images.
But is it really better to use external CSS in this case?

It does not incur extra maintenance cost.
It is easier to produce.

Cons I can think of:
If you have separate designers and development team – using inline styles will force designers to modify content-file (aspx in my case).
It might use more bandwidth.

Anything else I’ve missed?

IMPORTANT: I am asking about only one specific case where style used will ever apply to exactly one element, and is not part of the global-theme, such as width of one particular column.

Answer 1

There are lots of reasons why style="" is bad. I consider it a bug anywhere I encounter it in my codebase. Here are some reasons:

1. style= has higher priority than other CSS selectors making it hard to effect changes in the stylesheet; the stylesheet has to work harder to override these.
2. style= rules are hard to find in the code when you need to make global changes.
3. You download this CSS code with every page view.
4. If you have multiple stylesheets for the same HTML codebase your style= rules are not part of the stylesheet and thus are unchangeable.

However, if you are generating content and it’s difficult to describe this content in a static CSS file, you might also need to generate the CSS to match that content. It is often easier to simply generate style= rules despite the drawbacks. If, however, your generated content can be easily described in a CSS file, because the generated structure doesn’t often change, or because you can easily generate HTML AND a CSS file at the same time, then it’s probably better to not use style=.

Some suggestions for alternatives to style= that may be appropriate:

1. Instead of inline styles, use class names. Works well if you have lots of columns in your table that have the same properties, and which you expect to always have the same properties. Then your stylesheet can remain fixed while your HTML is fluid, since the CSS only references classes. This is probably the approach I’d use.
2. Use JQuery or some other javascript library to style your objects programmatically after the page loads.