CSS Blunders

I like to complain about browser inconsistency and rendering bugs as much as every other front-end developer, but it’s fairly common that the issues I’m experiencing are PEBKAC rather than IE induced. Now I know these won’t apply to most of you perfect coders out there, but I’m betting that at least a couple will ring true.

1. Typos
   My most common blunder (by far) in writing CSS is misspelling selectors and
   properties. I went on a rant about my tendency to spell position as
   positon back in
   2005 and that one still gets me occasionally. Most of the time
   syntax highlighting saves the day,
   but there’s no help for misspelled selectors like #haeder, .waring, and .altarnate.
2. Missing Units
   When using negative text-indent for text replacement, the set dimensions are the only
   thing holding open the block. If you leave off a unit (height:335;) that
   block will completely disappear. As you might have guessed, this has never happened to me.
3. Z-idiot
   Z-index is a practical and powerful tool when designing with CSS. The number one rule to remember when working
   with z-index is that the position property has to be set to
   relative (not realtive…), fixed or absolute. I’ve been known to arbitrarily insert z-index
   all over my CSS…and then I realize the element I’m trying to stack doesn’t have a position declared.
4. Background Position
   Is it bottom 100px or 100px bottom? That question used to always trip me up. Then I’d get confused when it was broken in Firefox. The
   W3Schools’ documentation of the background-position property is
   fairly straightforward when it comes to similar units. When using % or position values, you declare the horizontal (x) position and then the vertical (y).
   When you use keywords however, the examples suggest to declare the vertical keyword (top, center, bottom) first. So, what if you want to mix keywords and values?
   In that case you follow the %/position convention and give the horizontal value first. To answer my own question, it should always be 100px bottom.
   For more info and examples, see my Background Position Compendium post.
5. Bang Important
   Cascading order and inheritance in CSS is a beautiful thing…until you start working on a large family of sites that inherits rules from
   multiple external stylesheets. I personally see the !important rule (.error {color:red !important;}) as a hack and therefore try to avoid using it. Occasionally though,
   it’s a handy tool and a necessary evil. Just remember what properties of which elements you’ve set to important or you’re bound to
   pull your hair out later when you want to override them. If you need a quick refresher course, David Hellsing has a great article on Cascading Order and Inheritance.