(I searched the forums to an extent, but could not get such a discussion, as basic as it may seem …)
I’ve found that most web templates and sites with CSS are written in a class-, id- or selector- centered way, for example:
Sample #1:
h1{
font-size: 18pt;
background-color: #FEEECC;
color: #3B2B0E;
}
h2{
font-size: 14pt;
background-color: #FEEECC;
color: #3B2B0E;
}
And sometimes there will be few to no comments.
While it is easy to figure this out in a small example, it is quite tough figuring this out in the code base of say, a social networking site built on LAMP or ASP.Net, and with theming capabilities.
Contrast that code with this:
Sample #2:
h1 {
font-size: 18pt;
}
h2{
font-size: 14pt;
}
h1, h2 { /* Use the same colors for h1, h2 */
background-color: #FEEECC;
color: #3B2B0E;
}
This is much easier to understand due to 2 things - the comment, and, the use of instructions rather than “compiled CSS” so to say. Additionally, it reinforces the statement-like nature of CSS - in case of a clash, the latest rule overrides the earlier ones. So, why do most designers, web developers, use class / element / id based CSS rather than instruction based CSS?
jQuery selectors have made it fashionable to do styling by “giving instructions” - which should actually have been standard practice. Other than possibility of my not having seen enough real CSS code, it seems I am missing something obvious.