Is In-Line CSS Always a Bad Thing?

So I used to avoid in-line CSS at all costs.  However, there were situations like having to use display:none so that elements never show or flicker upon loading so that it can be work well with javascript built Expand or display feature. There was just no way around it unless one had to dynamically place that element via JavaScript, which is not what we always want. Loading CSS via Javascript is not recommended if CSS can be used instead.

As for everything else, I have ran into situations, like “converting” a Photoshop mockup aka PSD into code, and every web page having unique css styling and positioning that is never used again on the other pages and almost guaranteed little to no modifications in the future.  Instead of flooding the main styling sheet with one time use styles and then having to flip back and forth to which page or file is using that style, in that case, I have found that it is much easier and convenient to have the in-line styles, though it still should be avoided. Flipping back and forth or scrolling down a long list of unreadable css classes just makes it harder to modify. We all use external CSS stylesheets in order to make life easier.

There are ways to reduce the need to have in-line CSS styles. One is repetition, which is something you probably learned from web design or design class. Reusing the same styles as much as possible and keeping design as consistent as possible, makes the individual web site pages more unison with the whole site.

So as much as I value web standards, I feel some rules have to be broken to have cleaner code and easier modification. However, if you find that you need a massive and excess amount of in-line stylesheets, then there may be something in your design that should be improved. Moderation is the key.

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>