We are discussing the pros and cons of using id attributes versus class attributes in our website's HTML tags. I use IDs rather liberally. This includes the use of nested IDs such as:
<body id="thisPage">
<div id="mediaSection">
<div id="mediaImages">
....
</div></div></body>
In this case, MediaSection is a part of the page unique to this HTML file (referenced by the body tag with thisPage id). When I write CSS to style the mediaImages section it would look like this:
#thisPage #mediaSection #mediaImages {
vertical-align: bottom;
}
I write the CSS rules like this for legibility purposes even though I know we just need #mediaImages. My co-worker says that this is bad practice: IDs are more expensive and could compromise browser performance because they give the web browser more information to keep track of. His recommendation is to use classes instead. For example, rewriting the above example:
<body class="thisPage">
<div class="mediaSection">
<div class="mediaImages">
....
</div></div></body>
Is there merit to using classes instead of ids for this situation?
