3 CSS Coding Tips That Will Save You Hundreds of Wasted Hours

I got into CSS-based design sometime around 2002-2003 and have wasted literally hundreds of hours of my life dealing with various CSS and browser-compatibility issues. Back then we had far fewer tools at our disposal so the process of testing was a lot more tedious. Over the past 5 years I’ve picked up some tips and tricks that have made my job 100 times easier.

So without further adieu I’d like to share some of these tips:

1. On any given div, if you specify a width, do NOT specify padding or margins (and vice versa). Specify padding and margins on the elements contained in that div instead. Ex: leftcolumn {width:200px} lefcolumn p {padding:10px;width:20px;}
2. Use Firebug and Web Developer Toolbar together. In Firebug, use the inspect button to see element names, styles, and inheritances. Then use Wed Developer’s CSS > Edit CSS panel to change the properties in real time. If anyone wants I can probably make a video screencast and show you some examples of what I mean.
3. Don’t obsess about validation or having perfect code. I know some coding Nazis might hang me for this one, but if you need to stick a clearing div here or use a IE6 hack for a specific issue there, do it. I used to have CSS OCD once too, it’s ok. But if I can save myself an hour of tearing my hair out trying to fix one small issue just in the name of perfect semantic markup - it’s not worth it (especially if your users will never notice or know about it). Life is short. Don’t spend it obsessing about CSS.

If I had known these things earlier, I would probably have saved a lot of hours - literally hundreds - over the years. Those are probably my top 3 that have made the biggest difference in my coding career. Bonus: I also like using * {padding:0;margin:0} at the top of my CSS sheets to clear everything out, then specify margins and padding explicitly for divs and classes. Bonus #2: Faux columns can also be a lifesaver.

For more helpful tips, check out these posts:

• Some basic but still very relevant CSS tips
• 10 CSS tips you may not have known about
• 70 expert ideas for better CSS coding

Feel free to share any of your own time saving CSS tips in the comments.