Every working professional I know always complains about not having enough time.  “How am I supposed to meet a client, change my kid’s diaper, make dinner, and get the project done on time without more hours in the day? Oh, and I can’t figure out this wicked CSS bug!” a friend quipped a few days ago.  She mentioned the Sprint commercial with the “mini me’s” running around their master:  “Now, that’s something I’d invest in,” she emphatically stated.

Yes, it would be quite nice to have three or four little Nikki’s running around, completing unfinished tasks or making me dinner but, unfortunately, I live in the real world (where rules of science exist).  However, we don’t need more hours in the day; we just need to work smarter.  And since the name of this article is “5 CSS Time Saving Tips,” here are my 5 biggest time-savers when developing a site.

1. CSS Reset File - Any developer worth their salt creates a baseline for browsers using a CSS Reset file (see my previous post). I keep the file in the top directory of “Web Development Files” and open it up, copy/paste into a new CSS document, and I’m good to go.

2. Coda/Dreamweaver - Any website can be developed with a simple text editor and some knowledge of HTML and CSS.  However, I love running Coda. The entire application is a time saver. From auto-completing code to instant reference books built into the app, it’s the most streamlined application in which to build websites.  Dreamweaver is another great application, but the "bang for the buck" is unsurpassed with Coda coming in at $99.

3.  IE Net Renderer - If you run a Mac as I do, many of you may not have access to a Windows platform computer or Parallels (or Bootcamp for that matter).  And, we all know the woes that IE6 creates when coding in CSS – margin errors or text dropping alignment.  Instead of looking at the site on a Windows computer, point your browser to IE Net Renderer. You’ll be able to view a live screenshot of your site. Granted, you won’t be able to check interactivity, but it’s a quick and easy solution to see where your inline top navigation list is breaking.

4. Code CSS styles “inline” rather than tabbed. When I first began coding sites, I always kept my CSS selectors on a separate line and then wrote every rule on a separate line below it: #container { margin: 0 auto; border: 1px solid #000; } After some consideration, it was a pain to figure out where a certain selector was in my CSS file. Now, I use the “inline” style of CSS formatting: #container { margin: 0 auto; border: 1px solid #000; } Not only does it make it easier to find the selectors, but it also cuts down on page weight (hey, not by much, but enough). My CSS Stylesheets used to be a whopping 1,500 lines, and now they come in at a much cooler 400 or so.

5. Firebug - The Firefox extension titled Firebug allows a developer to visually inspect the code and see each CSS rule applied to every element of the website. Click the little “Inspect” tab and hover over any element of the page and, voila, a list of CSS selectors and their values pop up in the bottom right-hand corner of the browser. Also, line numbers accompany each style rule (virtually making #4 above inconsequential – although, you still need to think of page weight).  Firebug also allows for “live-editing” of the site by adding, modifying, or deleting rules directly in the web browser.  The changes don’t stick, but it’s another quick way to troubleshoot a CSS bug or try a different color for the links. These CSS time-saving tips are small and won’t save you a ton of time, but added up over the span of a web development career, you just may be able to carve out enough time so you can work on your own personal site or take an extra day on your very much needed vacation!