Determining the App’s Functionality and Structure - Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery - page 64

For this app, we'll treat HTML like a dance floor: It needs to be clear of any debris and obstacles so the data being
presented doesn't get tripped up.
Let's go over a few of the most common and detrimental markup practices and plan not to use any of them.
Abusing the <div> Element
The most obvious abuse of HTML markup is the application of new <div> elements for each new style to be applied.
Not only does this add more elements to the Document Object Model (DOM) and make things like jQuery traversal
less efficient and more complicated, but it makes later maintenance a nightmare, especially if someone else is going to
have to deal with your code.
Using Completely Opaque Class Names
Another incredibly frustrating markup faux pas is the use of cryptic class names and IDs. In 99.999% of situations,
the benefit of saving a few bytes by shortening the class name float-right to fl is completely negated by the headache
it causes the people who have to attempt to understand and maintain that code later.
Completely Ignoring Indentation
Indentation is optional in HTML, and as a result it gets largely ignored by many developers. This doesn't necessarily
hurt their quality of work, but it makes dealing with their markup more painful than necessary.
Given that the extra time required to at least sort of format markup is negligible, especially considering most
modern integrated development environment (IDEs) indent code properly by default—it's just plain lazy not to take a
moment to ensure people who have to deal with markup at a later date can read it by adding some white space.
aN eXaMpLe OF GOOD MarKUp VerSUS BaD MarKUp
to demonstrate the huge difference paying attention to your markup can make, let's look at a very small example
that compares a snippet of bad markup with a rewritten snippet that accomplishes the same thing.
an example with Bad Markup
First, let's look at the bad markup. in less than 3 seconds, can you figure out what this is and how you might fix
an extra margin issue?
<td><div class="sb"><div class="im csh"><a
href=" http://www.example.com/inventory/1234/ "
title="Example Product"><img width="150" height="150"
src=" http://www.example.com/images/1234.jpg " class="at"
alt="Example Product" title="Example Product" /></a></div></div></td>
this code is perfectly valid, but it's just awful. Where are all these <div> s coming from? What the hell does the
class sb do? What about csh , im , or at ? to fix the hypothetical margin issue, you would have to check every class
referenced in this snippet before you could identify the offending styles.
on top of that, it's extremely difficult to tell what this snippet is without spending extra time really looking at it
due to the complete lack of formatting. this will slow down future maintenance, especially if someone else is
doing it.