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.

            

                Registration
            

                 
            

                 
            
            

                

                    

                        First name:
                
                

                    
                
            
            
            

                

                    

                        Last name:
                
                

                    
                
            
            
            

                

                    

                        Email address:
                
                

                    
                
            
            
            

                

                    

                        Password:
                
                

                    
                
            
            
            

                

                    

                        Password Confirmation:
                
                

                    
                
            
            
            

                

                    

                        Company / Access code:
                
                

                    
                
            
            
            

                

                    

                         
                
                

                    
                        
                
            
        

Here is restructure markup

    

        
Login
        

            
                Email Address
            
            
        
        

            
                Password
            
        
        

            
                Remember me
            
        

            
            First time here? Forgot
                your password?