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:
- 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;}
- 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.
- 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.


FredAtMicrosoft said,
April 21, 2008 @ 2:44 pm
Great tips. I know I’ve been guilty of abusing div attributes before, and then spending hours scratching my head as to why my tables weren’t lining up correctly.
——————————————————
Fred Reckling
Microsoft Security Outreach Team
http://www.microsoft.com/hellosecureworld/level7