Monday, September 29, 2008

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.
via :auinteractive



Post a Comment

Subscribe to Post Comments [Atom]

<< Home