divitus classitus

In the book of CSS Mastery: Advanced Web Standards Solutions, there is a section about divitus and classitus.

Using too many divs is often described as divitus and is usually a sign that your code is poorly structured and overly complicated. Some people new to CSS will try to replicate their old table structure using divs. But this is just swapping one set of extraneous tags for another. Instead, divs should be used to group related items based on their meaning or function rather than their presentation or layout.

The root reason of this phenomenon is that designer tend to rush to see the result first, and forget the semantic of the content(the markup) express. My experience is that the a clean markup with strong semantic is a good document. A good document is starting point of good design. A good design is easy to be restyled and extended. Most of visual style can be implemented by CSS of current version. If it can not satisfying your requirements, we can wait for next generation (CSS 3 or CSS 4?). But before they are available, we can use javascript implement your advanced design needs. But the bottom line is to forget about style, when you authorize your markup, and always remember make your markup semantic, which means your document is still understandable even it is opened in notepad or lynx.

Semantic and style , they are different concern. While some developers and visual designer understand the rule of separation of concern, but web technology (like asp.net server controls, Web form) tend to make people deviate from it. Although it is not the fault of these technology, in fact, you can use these technology to achieve very semantic markup, but they tend to lure people to mix them together. ASP.NET MVC is trying to fix this.

Below is example of divitus classitus.

<div class="login_page"> <div class="login_header"> Registration</div> <div class="clear"> &nbsp;</div> <div class="clear"> &nbsp;</div> <!--FORM FIELD--> <div class="reg_form"> <div class="reg_title"> <div class="reg_txt"> First name:</div> </div> <div class="reg_box"> <input type="text" size="50" /> </div> </div> <!--FORM FIELD--> <div class="reg_form"> <div class="reg_title"> <div class="reg_txt"> Last name:</div> </div> <div class="reg_box"> <input type="text" size="50" /> </div> </div> <!--FORM FIELD--> <div class="reg_form"> <div class="reg_title"> <div class="reg_txt"> Email address:</div> </div> <div class="reg_box"> <input type="text" size="50" /> </div> </div> <!--FORM FIELD--> <div class="reg_form"> <div class="reg_title"> <div class="reg_txt"> Password:</div> </div> <div class="reg_box"> <input type="text" size="50" /> </div> </div> <!--FORM FIELD--> <div class="reg_form"> <div class="reg_title"> <div class="reg_txt"> Password Confirmation:</div> </div> <div class="reg_box"> <input type="text" size="50" /> </div> </div> <!--FORM FIELD--> <div class="reg_form"> <div class="reg_title"> <div class="reg_txt"> Company / Access code:</div> </div> <div class="reg_box"> <input type="text" size="50" /> </div> </div> <!--FORM FIELD--> <div class="reg_form"> <div class="reg_title"> <div class="reg_txt"> &nbsp;</div> </div> <div class="reg_box"> <a href="#"> <img src="images/btn_submit.jpg" border="0" /></a> </div> </div> </div>

Here is restructure markup

<div id="membership"> <fieldset> <legend>Login</legend> <p> <label for="txtUserName"> Email Address </label> <input type="text" id="txtUserName" name="txtUserName" /> </p> <p> <label for=""> Password</label> <input type="password" id="txtPassword" name="txtPassword" /> </p> <p> <label for=""> Remember me</label> <input type="checkbox" id="chkRememberMe" name="chkRememberMe" /></p> <p> <input type="submit" id="btnSubmit" name="btnSubmit" /> <a href="registration.aspx">First time here?</a> <a href="ForgetPassword.aspx">Forgot your password?</a> </p> </fieldset> </div>