HTML and CSS Reference
In-Depth Information
<div id="menu">
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</div>
when this provides as much structure and uses less code:
<ul id="menu">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Less code is always a good thing.
Like divitis, it's also possible (and very common) for developers to overuse (X)HTML's
class
attribute. This has been deemed
classitis
. The
class
attribute exists so that you can add
some semblance of semantics if no appropriate (X)HTML element is available and so that you
can create “hooks” for CSS styles and JavaScript behaviors to act on. But developers often use
classes instead of more appropriate tags, like this:
<p class="address">
John Smith<br />
1234 Rolling Rock Rd. <br />
Albany, NY, 12345<br />
</p>
Instead of using (X)HTML's
address
element, like this:
<address>
John Smith<br />
1234 Rolling Rock Rd. <br />
Albany, NY, 12345<br />
</address>
developers also tend to use a
class
over and over again on repeated elements when they could
simply apply it once to a parent element. Consider this:
<ul>
<li class="cheese-type">Cheddar</li>
<li class="cheese-type">Mozzarella</li>
<li class="cheese-type">Parmesan</li>
<li class="cheese-type">Swiss</li>
</ul>
Here's a much cleaner approach:
<ul class="cheese-types">
<li>Cheddar</li>
<li>Mozzarella</li>
