Friday, July 4, 2008

* is evil

Did you ever use * {...} to create some sort of CSS reset? I have, and let me tell you it's bad.

Font styles

The first problem you'll probably come across is when you use font styles. This rule will override all sorts of desirable cascading styles:

* {font-size:12px;}
.menu a {font-size:10px;}

This seemingly inoffensive snippet will break as soon as you need to emphasize text with a em or strong tag. Need a span inside the link? Tough luck, it'll break too.

Spacing

The following looks convenient:

* {margin:0;padding:0}

but it's pretty easy to see that you'll need to add extra styling to deal with ul, ol and form elements.

Other side effects

There are many other things that can break out of what you would normally expect the default CSS to do: adding a "reset" background color would break your ability to cascade transparency down in inline elements. Setting borders to zero will make your forms look strange. etc.

I've committed the sin, now what?

There's no sure-proof way to remove * references while having a guarantee that yoru site won't look broken, but I find that changing it to the code below solves 99% of the headaches.

div,h1,h2,h3,h4,h5,h6,p,li {...}

No comments:

Post a Comment