Mostly Client Side

CSS is a wonderful thing, it truly is! However, whenever I see CSS used directly in the style attribute of a HTML tag it makes me cringe!

There are off course times when you do it out of absolute necessity, and that’s alright. The problem is when people do it when it isn’t absolutely necessary. To learn when it is and when it isn’t necessary, lets take a quick look at what CSS is.

CSS is short for Cascading Style Sheet. It allows you to command the look and feel of your web site from one centralized location. You can use CSS in 3 different ways, which gives you amazing flexibility. You can either use external style sheets where your CSS code is located in a separate CSS file. This is the best way to ensure a consistent look throughout your blog. You can also use internal CSS and inline CSS.

The two latter options are the ones that can cause you headaches in the long run.

Many years back I had a teacher who made the following statement:

Always ensure that your test code meets production standards. 90% of the time test code will become the production standard.

Little did I know how right he was!

His statement exemplifies everything that is the problem with internal and inline CSS. Most of the time you create it in an attempt to test something or to quickly fix an issue you have with the design of your website. The second you start writing internal or inline CSS you are deviating from the design standard you have determined for your website in the external CSS file.

If you don’t have a solid system for ensuring the implementation of those changes into your external CSS file you are going to be in trouble.

The teacher in mention was referring to code written in Java, but the principle applies to any kind of development. Even CSS or HTML.

How Should You Test/Fix Issues In Your Layout?

As you can tell I’m recommending that you write all of your CSS code in an external CSS file. Doing so ensures that you only have to edit it in one location. Thus minimizing your margin of error.

Working with the external CSS file doesn’t only minimize the margin of error, it also saves you a boatload of time. Imagine finding the solution to a problem you’ve been working on only to realize that you now have to make that exact same edit on every single HTML page on your website. Worse yet! If you made the fix inline you now have to make the fix on every specific location in each HTML file where that fix applies.’

You have now ensured that your schedule is booked for hours! Do you thing your boss will be pleased?

One thing I know for certain is that I have never received praise for creating unnecessary work for me or my colleagues. Your boss may be different.

But There Must Be A Time When I Can Use Inline Or Internal CSS

The title of this article says it all really. If you are 100% certain that you have no other option. And that using inline or internal CSS is the only thing that will work. Then it’s Ok!

I have a difficult time thinking of scenarios where this is the case. Even if you have to use a specific style just once on your entire website, I still think it would be a better option to stick it into the external CSS file. That way if you need it for something else at a later date, and trust me it happens, it’s easier to find.

I especially want to warn you against using internal or inline CSS in HTML to test things. Remember the wise words of my teacher. And if you don’t think it will make it into production, I have to say, you’re being a bit naïve. When that deadline rushes towards you like a bullet train on crack, the last thing you will be thinking about is turning your test code into production ready code.

I'm eager to hear your comments...