how to mark up and style a site at lightning speed

well, maybe “really f’ing fast” would be more appropriate.
anyway, this is my workflow:

1. take some time to get familiar with your mockup, especially if you weren’t the one who created it. assess (confidently) what you’ll be doing for the tricky parts. have a plan. spending a good 15 or more minutes doing this will actually speed you up.
   
   note: if it’s really complicated, you might want to print your mockup and start drawing boxes, noting class/id names etc.
2. slice all of your images, matte your gifs, save them as web-ready and put them in the directory where they belong. basically, get all images ready to be called at moment’s notice!
   
   note: i have found that writing down the image filenames on a piece of paper and keeping that next to you is 100% superior to switching windows on your screen to figure out what the heck you named ‘that thing’.
3. optional: i only do this sometimes, but when the occasion calls for it, i note all of my unique colors somewhere for easy grabbing.
4. start writing your markup. complete a large section at a time, like header and nav. the bonus about doing this is you literally cannot write a large amount of markup without having to think through what you’ll be doing with the CSS.
5. you should have a healthy amount of markup to work with. open the unstyled page in firefox, make sure your web developer extension is in good working order and fire up the CSS editor.
6. this step is probably what saves me the most amount of time. invoke the Display Element Information tool in the web dev extension and get ready.
7. while hovering over all of the elements you just marked up, start writing out an empty rule for everything, going from general > specific for each section. you can delete unused ones later. make sure all levels of specificity are covered, including pseudo-selectors that you will be using (like :hover and :first-child)
   
   you should end up with a logically structured, customized-for-this-project CSS template, ready and waiting for you to tell it what’s what.
8. start stylin’! go go go! reference your image list, start filling those empty rules in. the hierarchy you already established will guide you to start with the big stuff and work down to the details. you should have at least a general idea of what you’re doing seeing as you’ve already written your markup.
   
   protip: if you type really fast, poke around the preferences of the web dev extension and set the CSS Editor delay (how long it takes to see what you’ve just typed) to 0ms.

note: it seems they’ve fixed a particular issue with the web dev extension (losing your work when you switch tabs), but i still don’t trust it- repeatedly copy over your styles into a text editor (or at least keep updated versions on the clipboard with apple/ctrl + a, apple/ctrl + c) as this is as ‘risky’ as typing out your term paper in a website’s text editor.