Are You Making These 10 CSS Mistakes?

Working with CSS can seem like a constant battle. Browsers are always changing they way they read the code (*cough* Internet Explorer *cough*), and it seems that there are lots of tiny little CSS “gotchas”. While it’s an incredibly powerful language, it can easily be used incorrectly, which will doom your development to a lifetime of imperfections.

1. Ignoring Browser Compatibility

This is probably the number one problem with web development, as you have to have layouts that look the same, no matter what browser the site visitor is using to navigate the page. This fact may sometimes seem like the bane of your existence: there are fundamental differences in the way Internet Explorer renders a page, versus Firefox. While it’s not as bad as they used to be, there’s still quite a difference between browsers.

It’s easy for web developers to layout the page in their favorite browser and not worry about how it looks in other major browsers, as you most likely won’t see the differences. (I’m a major offender of this. I’ll sometimes design the site in Firefox and forget about checking in IE until after it’s done!) While there are some tried and true methods to help safeguard your layouts for different browser rendering, the best way to ensure everything looks constant is to just use Browsershots. Browsershots gives an accurate snapshot of what your site looks like across many different platforms and browsers, allowing you to make sure nothing looks funky in a browser.

Photo by lazlo-photo.

2. Not Accounting for Smaller Browser Resolutions

While a good number of us web developers have large computer monitors–and are quite proud of the fact–a good portion of the visitors to your site might not. You can check your analytics programs to see your visitor’s browser resolutions and how widely they range (Google Analytics does this wonderfully). However, there is a world of difference in the way a design looks in an 1024×768 resolution as opposed to a 800×600 resolution. It can make a beautiful design almost useless.

I recently came across this realization as I was tweaking the design for Trendfo. A large chunk of the visitors to the site were using smaller browsers causing an image to partially block some ads, giving me less clicks and ultimately less revenue from the site.

Accounting for smaller browsers means that all of your visitors are happy and finding the information they need.

Photo by Petteri Sulonen.

3. Not Considering Frameworks

If you’re developing a CSS layout from scratch, you might want to ask yourself why. Just as nothing is new under the sun, the same is true with CSS. There are plenty of CSS frameworks out there like Blueprint framework and the 960 CSS Framework. These are created to help you make bulletproof layouts, without having to start something from scratch. These layouts have cross-browser compatibility and have been rigorously tested. Really, unless you’re doing something totally radical that needs pantloads of custom code, just use a CSS framework.

Why reinvent the wheel?

Photo by nestor_galina.

4. Not Utilizing Generic Classes

It can be quite easy to not think about the future when we’re developing websites. Often times we’ll name our CSS classes something different each time we develop a site, as opposed to making a simple CSS class that we can reuse repeatedly throughout our design, without having to dig up what we used before. This will ensure that our site design remains constant throughout the changes of a design.

You might use a generic class like:

(Editor’s note: the double ‘rights’ are the result of a bug in our code viewer, correct code is of course .right{float:right}.)

.right{float:right}

To keep things floating in the right direction when you want them to. So you could style DIV ID like:

I usually use at least three generic classes when I’m building a site design:

	.clear{clear:both}
	.right{float:right}
	.left{float:left}

Photo by cnynfreelancer.

5. Not Validating the HTML

I bet you didn’t know that validating your HTML could also affect your CSS, did you? Well, it can. First and foremost, you can’t validate your CSS until you have valid HTML. Secondly, there are many instances that your HTML could be causing your problems, instead of your CSS. Often times we think that our CSS altering the layout when in fact it’s a bit of malformed HTML that’s making the layout funky. An unclosed DIV here, a mislabeled CSS class… it could be anything. Make sure that your HTML checks out before you even try to diagnose a CSS problem.

Photo by Focal Intent.

6. Not Validating the CSS

I used to constantly bother a friend for help with CSS problems as I tried to wrangle my designs. He’d patiently ask me every time “Does the CSS validate? If not, what are the errors?” It wasn’t long before I learned to validate the CSS before I’d ask Thomas for help later on, and usually validating fixed the problem for me.

If you have valid CSS code, you’re much more likely to have a CSS that is much more compatible across browsers and is less likely to break.

Photo by Atwater Village Newbie.

7. Using Mammoth Background Images

Often times new designers will use oversized background images in their layouts. For example, using a 3,000px X 5,000px background image to account for any possible browser size. Instead of using a really big image, they could be using a really tiny repeating image with a touch of CSS magic. The difference is huge: Instead of loading a 200kb image, you could load an image only a few bytes in size and have the CSS repeat it across the background.

If you have a background image that is very large, you’re losing two ways:

1. It means using unnecessary bandwidth
2. You’re making the visitor wait longer for the image to load

Sometimes large background images are unavoidable, especially with the recent trend of designing illustrative web layouts. However, using repeating images or solid colors in the background is a much better practice.

Photo by Petteri Sulonen.

8. Using CSS For Everything

When people first learn about a technology, they become excited about it and want to use it everywhere, even when it can actually go against what will work best for the project.

As web developers we can sometimes get caught up in wanting the technology to do something advanced and specific, when in fact we can use a different technology much easier. For example, sometimes it’s much easier to use a table to organize data than it is to make complicated CSS-based layout with floating DIV’s and the like. We have to remember, the reason why we use technologies like CSS is because it should speed up development time. When it starts to slow us down, then maybe we’re going a little overboard.

Photo by Timm Williams.

9. Using Inline CSS

This is a cardinal sin for web developers, and it happens more than you’d like to know. If you’re building a design, you’ll almost always want to keep your CSS and HTML separate. This ensures that when (notice I didn’t say “if”) you decide to change the site design, you won’t have to dig through the HTML of each layout and find the rogue CSS attached to an inline element.

Instead of using this:

link

You should move the style business to an external style sheet like this:

link

Inline CSS should almost always be avoided. It’s easy to use and great for testing, but other than that you probably wouldn’t want it in your production code.

Photo by nestor_galina.

10. Using Too Many Files

Have you ever seen a design with 12 different CSS files attached to it? It’s a nightmare for anyone trying to make changes to your layout. Not only that, it slows down the time processing each file, as the browser has to make a request for every single one. It’s better to use a simple CSS schema that uses 1 or 2 files. The time spent parsing 12 files versus a single file is quite significant. Not only that, you’ll save the next guy who has to make changes on your layout a lot of hassle.

Nobody wants to open 12 files to make a simple, site-wide change!

Photo by lightmatter.

• Subscribe to the NETTUTS RSS Feed for more daily web development tutorials and articles.

Glen Stansberry is a web developer and blogger who’s struggled more times than he’d wish to admit with CSS. You can read more tips on web development at his blog Web Jackalope.

Liked this post? Vote for it on Digg below. Thanks!