I know the title sounds like I’m trying to pimp weight-loss drugs or a phenomenal exercise routine, but I assure you I’m not.

Today, I’ll share 10 secrets basic steps I take when coding a site in CSS—steps that will hopefully get you thinking about your coding process.

The following assumes that you already know how to code valid XHTML and CSS.

This is in no way the only way—this is just how I generally go about it.

10 basic steps I follow when creating a CSS-based site:

1. Finalize your design
2. Finish your XHTML before touching your CSS
3. Validate your code
4. Start with typography
5. Structure the main page elements
6. Start big and work your way down
7. “Finish” work
8. Test in IE
9. Fix inevitable IE bugs
10. Optimize your code and do final testing

1. finalize your design

This is probably the most important step in order to be productive. If you’re working with a client, make sure you get them to sign off on the project before you start coding the site.

Even seemingly small changes (from your client’s point of view) to the  layout may impact your code in a big way.

I keep a copy of the approved PSD design open in Photoshop. This serves as my reference and lets me grab dimensions and colors.

I also draw out a rough sketch of the layout on paper so I can jot down element dimensions, hex colors, etc. It also helps me visualize the different div’s I’ll need for my layout when I’m writing my HTML.

2. Finish your HTML before touching your CSS

Don't put this before your horse.

Make sure you have all the sections and major (X)HTML code in place before even touching (or thinking about touching) your stylesheet.

Just like building a house, you have to have a solid foundation laid first. Make sure all your major page sections are accounted for, along with appropriate headings, paragraphs, etc.

It’s generally a good idea to keep the HTML structure as simple as possible—avoiding unnecessary div’s, for example.

3. Validate your code

If you’re building a house, you not only have to have a foundation first–it has to be level. Lots of problems later on can be avoided if you take the time to ensure your foundation is good.

Take the time to make sure your (X)HTML is valid and there are no mistakes. This can save you unnecessary aggro when you start styling.

I use the Web Developer add-on for Firefox to quickly validate local HTML files.

Only after I’ve completed this, do I start on my CSS layout and styling.

4. Start with typography

Now it’s time to dig into the CSS.

I find it useful to first focus on a site’s typography: fonts, colors, line height, link styles, list styles, etc when the page is nearly a blank slate. Instead of having a bunch of page layout and sections with background colors, I like to start with the typography before moving on to the page structure.

A CSS reset (Eric Meyer’s Reset CSS, YUI Reset CSS) can be very useful in these situations. They save lots of time writing code to undo default browser settings.

I prefer to use a slightly modified version of the one that comes with Deploy. Save a copy somewhere of your modified version so you can work from it on future projects.

5. Structure the main page elements

There are certain main elements most pages have:

• Header
• Main content
• Sidebar(s)
• Footer

I like to take care of these sections first; centering the whole page, giving main elements dimensions, floating sidebars, and the like.

Important: As you work on your CSS styles and especially layout, test in Firefox, Safari or Opera and adjust accordingly to make sure things look right in one of those browsers.

It’s also good to check your progress as you go in IE6, but always remember that IE6 will almost always be wrong. You can avoid huge issues in IE6 by fixing those bugs as you go.

6. Start big and work your way down

Once the major parts of the page are laid out and positioned properly, I work my way down; working on the layout and styling of sub-elements and sections.

For instance, your header may contain other elements such as a logo, navigation or search field. With the header already sorted, you can start styling the layout of these other elements.

7. “Finish” work

“Finish” work, in the construction trade, are the fine details and finishing touches that are done toward the end of the project; like trim and molding, paint and so on.

In web design, I consider finish work to be the finishing touches like: image-replacement (for headings, etc), hover effects for links or navigation, and fine-tuning margins, padding and the like.

It’s also a good time to re-validate your code; including your CSS.

8. Test in IE

Testing your site in Safari and/or Firefox will make sure your site looks good in 99% of the major browsers—except Internet Explorer. So you will need to test in IE 6/7.

Again, it can often save you some headaches by checking your page in IE6 every once in a while as you go along. However, in this step, I go back through and check all the IE-related bugs and issues.

Personally, I test in Firefox and IE6 all through the process; from layout on.

9. Fix inevitable IE bugs

The more you work with IE 6 and 7, the more you will start being able to foresee issues and know how to correct layout bugs more easily. However, let me tell you, there will always be something you will have to fix in IE 6 or 7. So fix the bugs and you can move on.

Now, I fix IE6 bugs (dropped floats, wonky margins, etc) with some special rules in a separate stylesheet.

10. Optimize your code and do final testing

There are many ways to optimize your CSS code in order the cut down on size–now’s a good time to do that.

Occasionally, when optimizing though, you may get carried away and accidentally remove an important bit or place a rule where another cancels it out. Make sure your pages still display correctly and then re-validate everything.

Use what works for you

Whether you use the above steps or not, take the time and think about how you code.

• Do I have a set routine that keeps me organized and focused?
• Is the way I code efficient, or could it do with some streamlining?
• Am I needlessly rewriting code that I could (re)use as a starting point on other projects?

If there’s something you can change, great. If what you’re doing works great as is, that’s great too.

• Can you setup or modify an existing CSS reset of your own and use it to cut down time?
• Can you use standard names for elements and consistently use them in every project?
• Can you create your own list of steps and follow it on your next project?

Bottom line: Use what works for you and the way you work. If what you currently do doesn’t work, think about what you can do to improve it.

Conclusion

Again, this is not the only way to code a CSS design—just the way I do it. There are lots of web designers who code differently and many who probably do a better job of it than me.

What do you think?:

• What steps do you take when coding a CSS-layout?
• How would you order the above steps so it works best for you?

Similar Posts:

• Web Design Contracts – The How and Why’s of Contracts
• UI, Wireframing and Layout Design Resources
• HTML 5 Gets More Attention
• Build WordPress Sites Fast With the Thematic Theme Framework
• Web-Based Code Editor: Mozilla Bespin