Obsessive CSS Code Formatting: Patterns and Trends
Call me strange, but I format each of my CSS rules according to the following pattern:
div#example element {
margin: 5px 15px 5px 0;
border: 1px solid #444;
line-height: 1.5em;
text-align: center;
background: #222;
font-size: 10px;
display: block;
padding: 5px;
color: #888;
float: left;
}
div#another div.example element {
border: 1px solid #444;
margin: 7px 0 17px 0;
letter-spacing: 1px;
font-weight: bold;
background: #222;
font-size: 1.1em;
cursor: pointer;
display: block;
padding: 3px;
width: 308px;
color: #888;
clear: left;
float: left;
}
div#another div.example element {
text-indent: -9999px;
overflow: hidden;
position: fixed;
display: block;
z-index: 9999;
padding: 0px;
margin: 0px;
bottom: 0px;
right: 0px;
}
Notice how the right-hand edge of each block suggests a diagonal line? This is accomplished by placing the longest declaration at the top of the style block, then the second-longest, and so on until the shortest rule is finally placed at the bottom. I have been writing my CSS this way for several years now, and apply the principle to virtually all of my declaration blocks. Occasionally, other formatting patterns are seen. For example, layout divisions are frequently very similar in appearance due to similar rules with similar lengths:
div.subleft {
width: 400px;
float: left;
clear: none;
}
div.subright {
width: 377px;
float: right;
clear: none;
}
div.midleft {
width: 177px;
float: left;
clear: none;
}
div.midright {
width: 200px;
float: right;
clear: none;
}
Technically, I am still listing the rules in descending order according to length, but the similarity of the rule blocks presents a uniform aesthetic demonstrating clear thought and solid design. Further, the overall pattern consisting of short, uniformly sized blocks is easily recognizable as related to positioning and layout. Over time, familiarity with the different patterns facilitates efficient CSS navigation. Further, the highly elaborate, systematic ordering of CSS rules conveys a sense of completeness and closure to finished files. Also, as the degree of organization closely correlates with overall processing time, determining inherent code quality is greatly facilitated while scanning through previously designed stylesheets.
Related articles
- Obsessive CSS Code Formatting: Opening and Closing Brackets
- Obsessive CSS Code Formatting: Indentation and Spacing
- Obsessive CSS Code Formatting: Organization, Comments, and Signatures
- Amazing Keyboard Shortcuts
- Crazy CSS Underline Effects
- Nifty CSS Link Hover Effect
- Customize WordPress Quicktags
About this article
This is article #526, posted by Perishable on Monday, April 07, 2008 @ 08:28am. Categorized as Presentation, and tagged with css, Presentation, streamline, tips. Updated on April 08, 2008. Visited 8782 times. 19 Responses »
Bookmark • Trackback • Comment • Subscribe • Explore
« Perishable Press Theme Renovations Complete • Up • Three Unsolved WordPress Mysteries »
1 • April 7, 2008 at 9:34 am — Gabe says:
Dude, you’re right, that is totally obsessive. I bet it makes for a very easy on the eyes css file though. I’ll have to dig through mine and see if I notice any patterns.