CSS Vision: Visualizing Your Code

I’m a very visual person by nature and I find it relatively easy to picture what my site will look like as I’m coding my CSS. However, I realize that many of you are technical people and less visual. I’ve put together a fun little exercise that will hopefully help you to better visualize what you’re doing with your CSS.

I’m going to try to do this weekly. Basically I’ll post a CSS file from a standards-friendly site and you’ll try to recreate the look and feel of the site on your own. The only rule is, you can’t actually go look at any sites’ CSS. You need to do this blindly or you’ll take the fun right out of it. Just print and study the CSS. The point is to visualize in your mind what the CSS is doing. It might help to create a photoshop mockup of the site based on what your mind puts together with the CSS.

Tips on Recreating the Code

You might find it daunting at first, but just go through each element. If there is a container or rap div, lay that out first. Then move on to the sidebars or menus and content areas. Notice whether an item floats or is positioned absolutely and position it accordingly.

If there are image files attached, don’t download them or look at them, just look at the surrounding code to try to figure out what that image’s purpose is. Look at heights and widths, absolute and relative positioning, colors and font sizes, etc.

Lessons to Learn

The point of this exercise is to teach you to simply visualize your code. Here’s what that means for you – the benefits:

You will get better and faster

• Your CSS coding will be more productive because you’ll cut out alot of preview time while you code… you’ll already know in your mind what it looks like as you go.

You will be able to do with CSS what you were doing with Photoshop

• This is a biggie. By reversing the process (creating your mockup from the code) you’ll learn how to do many things with CSS and cut out a lot of images you were using before. Later, when you create a Photoshop mockup, you’ll be thinking of your code and how to re-create certain effects with CSS instead of splicing up the photoshop layout.

Maintenance & Troubleshooting will be easier

• When you can visualize your code, you’ll be able to look at your site and visualize exactly where in the code a particular element is and what causes it to look and act the way it does. You’ll be able to quickly get in there and fix, change, or otherwise improve the site.

I’m working on finding the first stylesheet now which will be up soon. I’d love to hear your ideas on this angle as well. How do you visualize your code?

Share Tweet me (but don't mistweet me)

Copyright © 2006 – 2010 Natalie Jost