My approach to coding websites involves using a custom CSS framework that I have created from a few basic stylesheets. This includes a reset.css to ensure consistency in margins, paddings, and borders across all browsers, a typography.css for establishing rules on fonts, sizes, and colors for standard elements like paragraphs, lists, and headings, a forms.css for handling form styling, and a wireframe.css inspired by A List Apart's Holy Grail layout.
The wireframe structure I use consists of a header, subheader, container, and footer, with the ability to specify one, two, or three columns within the container by applying the appropriate class.
When building a page, I start by creating the HTML structure in a global manner, beginning with the wireframe sections and then adding divisions within them. I typically populate the header with a h1 heading and a list of main navigation links, sidebars with various content blocks, and the main column with placeholder text. This helps give the page some substance, even if the actual content is nonsensical at this stage.
For each element, such as the navigation menu, I first write the HTML markup without any styling to ensure proper semantics. Once the HTML structure looks good in a style-less browser, I then apply the necessary CSS rules.
All additional styles are added to a separate stylesheet named main.css, organized in a similar structure to the webpage itself. This includes sections for general classes used throughout the site, as well as specific styling for the header, subheader, main column, sidebars, and footer.
This method forces me to consider the semantic structure of each HTML element before applying any styling, while also providing a solid foundation to work from with the pre-defined CSS framework.
(A work-in-progress example can be viewed at pkr.nl/template/, where the forum tab in the top menu leads to a page with a different column layout).