Skip to content

Readable CSS

Update 2013-02-15: Modern tools like Sass make this post obsolete. 🙂

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

/* #pageWrapper */ #header {
background: #eee;

/* #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.

Posted in Web Development.

Tagged with .

0 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

Some HTML is OK

or, reply to this post via trackback.