The Daily WTF

There is a surprising amount of debate about how to use CSS classes. The correct side of this debate argues that we should use classes to describe what the content is, what role it serves in our UI; i.e., a section of a page displaying employee information might be classed employee. If we want the “name” field of an employee to have a red underline, we might write a rule like:

.employee .name { text-decoration: underline red; }

The wrong side argues that this doesn’t tell you what it looks like, so we should have classes like red-underline, because they care what the UI element looks like, not what it is.

Mark sends us some HTML that highlights how wrong things can go:

<div class=”print ProfileBox floatRight” style=”background-color:#ffffff;” > <div class=”horiz”> <div class=”horiz”> <div class=”vert”> <div class=”vert”> <div class=”roundGray”> <div class=”roundPurple”> <div class=”roundGray”> <div class=”roundPurple”> <div class=”roundGray”> <div

To read the full article click on the 'post' link at the top.