Richard Rutter proposed an interesting technique for organizing CSS through comments. This technique is based upon grouping. Simply put, we can actually organize our CSS files by using groups of rules that perform some common actions on the layout. For example:
/* @group Tables */
table {
border-bottom: 1px solid #666;
}
caption {
font-weight: bold;
padding-bottom: 0.643em; /* 9px */
font-size:1.077em; /* 14px */
}
thead th {
border-top: 1px solid #666;
border-bottom: 3px solid #666;
padding-top: 0;
padding-bottom: 0.692em; /* 9px */
}
tbody {
border-top: 3px solid #666; /* not rendered in IE6/7 */
}
tbody tr th, tbody tr td {
border-top: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 0.385em 0.692em 0.308em 0.692em; /* 5px 9px 4px 9px */
}
/* @end */
Each group is marked up by two CSS comments, one at the beginning of the group and the other one at its end, starting with
@group Name and ending with @end. So if you want to run a global search in your CSS file, you have simply
to search for every instance of the @group sequence. This gives you a complete mapping of your CSS file. I find this technique more useful than CSS flags. In fact, with CSS flags you get only the beginning of a block. For example:
/*=Tables */
Instead, with grouping blocks you can even perform a more powerful search using regular expressions that match the whole content of a block. Very useful.