Some Simple CSS Tricks

I started out building websites the old fashioned way, using tables. Every once in a while on a warm, clear spring day, I long for the days of the table based site. Then I have to wade through the markup of an old table based site, my vision goes blurry and a crushing sense of dread overtakes me. It was a glorious day when I made the switch, although there were some bumps in the road at first.

When I started out authoring CSS based websites, there were a ton of little tips that I didn’t know and didn’t figure out until someone “in the know” clued me in. I found myself saying things like “well, that makes perfect sense, why didn’t all the books and websites I read tell me this?” Maybe I should have figured all this out on my own, but it’s always nice to get a helping hand. Here are some little tidbits I have picked up on the way. Learn them. Breathe them in. Live them.

1. Find a naming convention and stick to it. Whether it’s styleName or style_name or style-name, go crazy, just keep it the same throughout. Try not to name any style according to where it is on the page (i.e. leftSidebar) as that might change late in the game when the client requests that the sidebar be moved from the left to the right. That sidebar is no longer described correctly and should be changed in the markup as well, therefore defeating the purpose of using stylesheets in the first place. This could definitely be its own post, so I’ll leave it at that.
2. Use the handy dandy wild card to zero out all of you margins.

   *{margin: 0;}

   If you’ve ever had a problem with your margins looking great in IE and horribly off in FireFox, this is the reason why. Put this little style on the top of your style sheet and most of the problems you’re having will be solved.

3. This one goes out to the PC users. Always give your site a background color, even if the background is going to be the default white for most browsers. FireFox on the Mac decided that the default color ought to be some crazy light blue. If you never test on a Mac, you’ll never pick up on this quirk.
4. Learn the shortcuts quickly. Coding a background style or a border style can be cumbersome if you separate the characteristics one-by-one. The style becomes clunky. An example:

   #contentMain {background-color: ##ccc; background-imageL url(../images/backgroundimage.gif); background-repeat: no-repeat; background-position: bottom right;}

   becomes

   #contentMain {background: #ccc url(../images/background.gif) no-repeat bottom right}

5. Microsoft Internet Explorer is the only browser that reads an underscore before a property. FireFox and Safari will ignore the style and go right down to the next one if the underscore is inserted. So if you have a style that is working in IE, but not FireFox or Safari such as inline-block, put an underscore in there (see below) and see if that helps.

   .contentThumbs {_display: inline-block;}

That’s it for now. I’ll have some more tips on CSS or driving down Belmont or solving global warming next month. If my five little steps haven’t helped you out, please check out a few of the resources that have been invaluable to me:

Site Point
A List Apart