Style attribute vs setting ID and external Css

Question

I understand the concept of keeping all presentational elements outside of the markup and putting them into an external .css file.

I want to get a feel for what types of situations you'd justify use of the style attribute vs setting IDs and external Css.

To this point, I've used the style attribute a lot, I usually use it to specify presentation items specific to that element and anything that is for all elements I pull into an external css file but I'd like to reevaluate my position and make the best choice going forward.

Answer 1

Use external CSS for static definitions. Use element ID lookups and the style attribute for things that change at run-time or where you need Javascript to set things up because CSS isn't capable of what you want.

A good example of the latter is zebra-striping in jQuery:

$(document).ready = function() {
    $("table tr:nth-child(even)").addClass("striped");
});

When all browsers get CSS 3 support, this rule can move out to the static CSS file, but today, it's best done in Javascript.

Answer 2

One of the big advantages to moving all of your styles into a stylesheet is maintainability. Finding inline styles can be a huge pain for other people trying to maintain your code.

For that reason alone it's worth it to assign the specific element an ID and define its styles in the stylesheet.

Second, if you find yourself writing a lot of inline styles, you could probably be factoring out more of those styles using CSS's inheritance properties or a few well-factored classes in addition to the ID.

Performance-wise, ID selection is as fast as CSS gets, so using lots of classes is actually slower than drilling down with IDs, even if only by microseconds.

The only real time I find it appropriate to use inline styles is for very transient properties like animation using javascript or hiding and showing an element (though that can be done with classes as well).

Answer 3

I use external stylesheets and the reasons are below:

1. Maintainability - it's much easier when all my presentation stuff are in one files.
2. Keeping code DRY - yep, this one again. Before, I used to even use the style attribute to set the display to "block" or "none" interchangeably. Now, I just use a class called "hide" and use that class if something needs to be hidden and remove it if something needs to be shown. In these days of full blown Ajax applications, I keep my code free from repeating such things and it's much more clean.
3. Helps when you work in a large project setting - in my last workplace, we had a suite of applications that shared the same look and feel. By putting it all in an external stylesheet, including styles that will be invoked after a certain event has occurred, it helped the team to apply consistent UI design to the apps.

I tried to think of reasons of using style attributes, but honestly, I can say I only use it when I am lazy to open up the stylesheet to change something quickly(not too proud of this part, so I try to minimize it)