Donald Noble’s Site

The ‘C’ in CSS stands for Cascading, not Classitis (n. klas’Itis — the proliferation of excess ‘class’ selectors in HTML)

Classitis

Many sites I have seen have exessive numbers of classes in their code, with code such as the following:

  HTML:
<div id="menu">
<a class="menulink" href="page1">Page 1</a><br />
<a class="menulink" href="page2">Page 2</a><br />
<a class="menulink" href="page3">Page 3</a><br />
<a class="menulink" href="page4">Page 4</a><br />
</div>
  CSS:
#menu {some:styles}
.menulink {other:styles}

Whereas, by virtue of the cascading nature of CSS, the following code can be used to the same effect:

  HTML:
<div id="menu">
<a href="page1">Page 1</a><br />
<a href="page2">Page 2</a><br />
<a href="page3">Page 3</a><br />
<a href="page4">Page 4</a><br />
</div>
  CSS:
#menu {some:styles}
#menu a{other:styles}

The second line of CSS refers to all anchor elements (links) within the element with id=“menu”. This not only has the same effect, but the resulting code is much cleaner, easier to read, and smaller.

Example: Movable type calendar (HTML)

While not a huge issue on short lists like the one above, it increases as the number of items increases. So by the time you have a whole calendar’s worth of items, the code gets very messy indeed. The default MT calendar code produces the HTML below (with no linked entries)

<div align="center" class="calendar">
<table border="0" cellspacing="4" cellpadding="0" summary="Monthly calendar with links to each day's posts">
<caption class="calendarhead">April 2004</caption>
<tr>
<th abbr="Sunday" align="center"><span class="calendar">Sun</span></th>
<th abbr="Monday" align="center"><span class="calendar">Mon</span></th>
<th abbr="Tuesday" align="center"><span class="calendar">Tue</span></th>
<th abbr="Wednesday" align="center"><span class="calendar">Wed</span></th>
<th abbr="Thursday" align="center"><span class="calendar">Thu</span></th>
<th abbr="Friday" align="center"><span class="calendar">Fri</span></th>
<th abbr="Saturday" align="center"><span class="calendar">Sat</span></th>
</tr>
<tr>
<td align="center"><span class="calendar">
&nbsp;</span></td>
<td align="center"><span class="calendar">
&nbsp;</span></td>
<td align="center"><span class="calendar">
&nbsp;</span></td>
<td align="center"><span class="calendar">
&nbsp;</span></td>
<td align="center"><span class="calendar">
1</span></td>
<td align="center"><span class="calendar">
2</span></td>
<td align="center"><span class="calendar">
3</span></td></tr><tr>
<td align="center"><span class="calendar">
4</span></td>
<td align="center"><span class="calendar">
5</span></td>
<td align="center"><span class="calendar">
6</span></td>
<td align="center"><span class="calendar">
7</span></td>
<td align="center"><span class="calendar">
8</span></td>
<td align="center"><span class="calendar">
9</span></td>
<td align="center"><span class="calendar">
10</span></td></tr><tr>
<td align="center"><span class="calendar">
11</span></td>
<td align="center"><span class="calendar">
12</span></td>
<td align="center"><span class="calendar">
13</span></td>
<td align="center"><span class="calendar">
14</span></td>
<td align="center"><span class="calendar">
15</span></td>
<td align="center"><span class="calendar">
16</span></td>
<td align="center"><span class="calendar">
17</span></td></tr>lign="center"><span class="calendar">
18</span>
<td align="center"><span class="calendar">
19</span></td>
<td align="center"><span class="calendar">
20</span></td>
<td align="center"><span class="calendar">
21</span></td>
<td align="center"><span class="calendar">
22</span></td>
<td align="center"><span class="calendar">
23</span></td>
<td align="center"><span class="calendar">
24</span></td><tr>
<td align="center"><span class="calendar">
25</span></td>
<td align="center"><span class="calendar">
26</span></td>
<td align="center"><span class="calendar">
27</span></td>
<td align="center"><span class="calendar">
28</span></td>
<td align="center"><span class="calendar">
29</span></td>
<td align="center"><span class="calendar">
30</span></td>
<td align="center"><span class="calendar">
&nbsp;</span></td></tr>
</table>
</div>

This code can quite easily be rebuced to the much smaller:

<table class="calendar" summary="Monthly calendar with links to each day's posts">
<caption>April 2004</caption>
<thead>
<tr>
<th abbr="Sunday">Sun</th>
<th abbr="Monday">Mon</th>
<th abbr="Tuesday">Tue</th>
<th abbr="Wednesday">Wed</th>
<th abbr="Thursday">Thu</th>
<th abbr="Friday">Fri</th>
<th abbr="Saturday">Sat</th>
</tr>
</thead>
<tbody>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>1</td>
<td>2</td>
<td>3</td></tr><tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td></tr><tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td></tr><tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td></tr><tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>&nbsp;</td></tr>
</tbody>
</table>

The default code is 2900 Bytes and the modified code only 893 Bytes, and it also includes the semantic thead and tbody elements to explicitly mark up the table head, and table body respectively.

Example: Movable type calendar (CSS)

The CSS is even easier to modify, from

 .calendar {
 font-family:verdana, arial, sans-serif;
 color:#666;
 font-size:x-small;
 font-weight:normal; 
 background:#FFF;
 line-height:140%;
 padding:2px;
 text-align:left; 
 }
 .calendarhead {
 font-family:palatino, georgia, times new roman, serif;
 color:#666600;
 font-size:small;
 font-weight:normal;
 padding:2px;
 letter-spacing: .3em;
 background:#FFF;
 text-transform:uppercase;
 text-align:left;
 } 

To the slightly different:

 .calendar {
 font-weight:normal;
 background:#FFF;
 line-height:140%;
 padding:2px; 
 text-align:left;
 }
 .calendar th {
 font-family:palatino, georgia, times new roman, serif;
 font-size:small;
 color:#660;
 letter-spacing: .3em;
 text-transform:uppercase;
 }
 .calendar td {
 color:#666;
 font-family:verdana, arial, sans-serif;
 font-size:x-small
 }

Which is a similar amount of CSS code. This could also be reduced, by utilising the cascading effect further, and not specifying a font-family for either of the calendar entries, and just specifying it once for the body element.

Further reading

W3C CSS 2 Selectors