Readable CSS


#pageWrapper {
    margin: 0 auto;
    width: 960px;
}

/* #pageWrapper #header */ #adBox {
    float: right;
    height: 60px;
    width: 234px;
}


In the code example above, because the key selector (the rightmost selector) is an ID selector, using descendant selectors would be inefficient. At the same time, it’s useful to see this descendant information when developing the CSS to help me keep track of what the page layout resembles. By simply commenting out the descendant selectors portion on the same line as my key selector, I can still see this hierarchy while developing. I’ll then use a tool like the YUI Compressor to minify the CSS before publishing to strip out the comments.