Search code examples
cssmarkup

Style attribute vs setting ID and external Css

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.

Solution

  • 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 was zebra-striping in jQuery prior to widespread support for CSS 3 selectors:

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

    Today, you can do that in the static CSS, but once upon a time, doing in in Javascript was the best option.