WTF CSS

Please Use A Big Boy Reset

admin — Tue, 02 Mar 2010 00:54:21 +0000

* {
    margin: 0;
    padding: 0;
}

Not every element has margin and padding that needs to be reset.

Better to use: body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, checkbox, textarea, p, blockquote, th, td { margin:0;padding:0;}

Unordered Children

admin — Mon, 01 Mar 2010 15:20:56 +0000

ul > li

Sure maybe ul.class > li made sense, but take away the class, and this bit of CSS is pure donkey status.

Every ul has a direct descendant li, so ul > li is basically the same as ul li.

Static Positioning

admin — Mon, 01 Mar 2010 13:28:32 +0000

div {
    position : static !important;
    z-index : 10;
    top : 50px;
    left : 200px;
}

Unless you’re changing the position attribute dynamically, static position essentially means “not positioned”, so the z-index, top and left are completely meaningless.

Double IDs

admin — Mon, 01 Mar 2010 02:02:41 +0000

div#id1#id2

This bit of disgusting CSS is what inspired me to start WTF CSS (after promptly puking in my mouth).

Taken from a tweet by Nicholas Zakas.