For the Love of CSS!

CSS, an acronym for Cascading Style Sheets, is a way of separating the programming code of a website from some of the design components. There are tremendous reasons for doing this, but I still see professional designers deviating from these principles and it causes nothing but problems. For a long time, web programmers relied on tables heavily to do some of their layouts because it was just the best tool available in many situations. However as HTML and CSS have evolved, there are now often better ways of doing things but it requires people using to classic methods to put aside old techniques and adopt the new way of doing things. One of the best resources for information about CSS3, the latest version, is w3schools.com, a site which I use quite regularly myself in the course of working on projects.

The primary audience for this document is small business owners concerned about their overall total cost of ownership with their website.

1. EASE OF EDITING

By separating HTML and CSS into separate files and using classes correctly, you can change multiple instances of something by making one simple change in the CSS file, instead of having to try and do large numbers of search-and-replace inside your HTML. This translates directly into less time.

2. FLEXIBILITY

CSS3 provides tremendous flexibility and the ability to do things natively that once required using external scripts, plug-ins, and graphic design. This lowers the total project cost, enables faster delivery, and makes future edits faster and easier. It also increases compatibility across multiple types of devices and reduces the number of places for something to go wrong.

3. WEBSITE SPEED

With less plug-ins, your website will also load faster. Additionally, by using classes and a separate CSS stylesheet, there is less code overall, i.e. smaller file sizes, so your website will load even faster. Page load time is a critical factor in whether someone sticks around to browse your site, so this should not be underestimated in its importance.

4. TASK FOCUS

By separating code and design, when you are working on the website you can keep a greater focus on the actual task at hand, which will improve your overall speed of execution on website design.

5. CONTROL

You have more control with CSS3 than you have ever had before.

DISCUSSION

In using CSS, regardless of whether you have a straight HTML website, WordPress, or anything else, to the maximum extent possible you want to completely separate your HTML code from the CSS. Your CSS should be referenced with classes, and all of the actual CSS code contained in a separate CSS file which is simply referenced in the HTML. There are times and cases when you need to perform “in-line” styling, where specific CSS code is used inside the HTML. It is sometimes unavoidable. What I have seen time and time again, though, are cases where badly designed themes did it completely unnecessarily, and the result was that I couldn’t make the website do what the client needed with that theme without rewriting part of the theme itself. At that point, what you need is a new theme that doesn’t have those sorts of problems. It’s possible to make these sort of changes, but the problem is that you will have a problem with future updates and your custom code, causing the website to continue costing you even more over time. Choosing a theme that doesn’t do this will lower your overall total cost of ownership.

So, having said all of this, for the love of CSS, please don’t do any in-line styling unless it’s 100% absolutely necessary – and it’s almost never necessary unless the website theme you are using is badly written. In fact, I would say that 95% of the time that I have to do manually-inserted in-line CSS inside the HTML, instead of using classes like you should, is that the theme was poorly designed. When you use a poorly designed theme, it creates a situation where things might look good to start with, but the when you want to change something about the way it looks, you might not be able to do what you want because a programmer took a short-cut in the code and now you can’t easily fix it by just changing the CSS file. Instead, you have to spend time digging around inside the website to find out where all the different instances of inline CSS are, and then change (and test!) every single one of them. That adds up to a bigger bill for the client.

If you are going to do your own website, pick and set up your own theme, etc., please – do some research, check with the developer, and try to confirm that any inline CSS is kept to a bare minimum. In the end, it’s cheaper to pay a web developer to do something for you right the first time than to come back and fix something that’s a bad setup.

PRO-TIP: Minify your CSS for a better Google website rating!

If you’re struggling with fixing CSS problems and getting your website to look ‘just right’ or not sure which way to go with something, contact me on my website.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s