CSS Code Formatting
Jeff Starr of Perishable Press has written an interesting article outlining the patterns and trends of CSS code formatting. In it he gives some examples and shares his own peculiar way of formatting CSS code. In particular, he formats code in an inverted diagonal pattern, starting with the longest line at the top to the shortest one at the bottom, as in the following example:
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;
}
In his latest article, he focuses on CSS indentations and spacing trends. He provides even more examples, some of which are quite interesting - such as the one below, which he calls “Meta-spacing for columnar organization”:
* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
My personal favorite is the single line code blocks method, where each declaration is written on a single line. This method benefits from not having to scroll all the way down thus saving space. Also, this method allows one to easily and quickly sort through and find any delcaration that needs to be worked on.
The only disadvantage to placing everything on one line is that some of then often end up becoming very very long, as in the example below:
#containerHead { padding-top: 57px; position: relative; }
#containerHead h1 a { display: block; width: 133px; height: 73px; position: absolute; right: 0px; top: 57px; background: url(../images/companyLogo.gif) no-repeat; }
.homeBanner { height: 134px; width: 730px; margin-top: 193px; position: relative; }
#homeBanner1 { background: url(../images/homeSplash1.gif) no-repeat; }
#homeBanner2 { background: url(../images/homeSplash2.gif) no-repeat; }
#homeBanner3 { background: url(../images/homeSplash3.gif) no-repeat; }
#homeNext a { width: 730px; height: 40px; background: url(../images/homeNext.gif) no-repeat; display: block; }
#homeNext a:hover { background: url(../images/homeNext.gif) bottom no-repeat; }
What is your favorite CSS coding convention? Do you use a special formatting method that is uniquely your own? I’d love to hear about them.
June 2nd, 2008 at 8:56 pm
I like your favorite, but I tend to break down into related rows if it goes beyond end of line.
June 2nd, 2008 at 9:47 pm
I like doing HTML and BODY elements first, then I break things up based on FORMS, HEADINGS, IMAGES, LINKS, LISTS, TABLES, OTHER and then do any one-off classes at the bottom
June 3rd, 2008 at 2:10 am
I would love to utilize Jeff Star’s CSS method, but I think it would take a lot of reorganizing after the code is created. An automated app that would do it for me would rock! As for me, I automatically alphabetize my CSS declarations with an online tool, as it is quick, easy, and allows me to go browse the page quickly. Of course, the caveat to this is if you place declarations further down the page to overwrite somethings which were declared previously.
June 3rd, 2008 at 9:23 pm
my favorite is single line code blocks method, in find it “natural”…
June 8th, 2008 at 7:00 am
I like your favorite, but I tend to break down into related rows if it goes beyond end of line.
June 8th, 2008 at 1:19 pm
I automatically alphabetize my CSS declarations with an online tool, as it is quick, easy, and allows me to go browse the page quickly.
June 8th, 2008 at 1:25 pm
I would love to utilize Jeff Star’s CSS method, but I think it would take a lot of reorganizing after the code is created.
June 11th, 2008 at 1:29 pm
My guideline isn’t specific to CSS: I prefer to have individual attributes on separate lines, because then its easier to see exactly what has changed when using source control and diffs. It also makes automatic merges of overlapping changes to the same file more likely to succeed.
June 24th, 2008 at 11:30 pm
I personally like Starr’s approach. Its very readable. The eye can easily scan the left margin for the style you’re looking for. And just a general usability rule…people like to scroll vertically MUCH more than horizontally.
The all on one line method makes it harder to find the exact styles and see how they relate to each other. I find myself having to parse through the values of each attribute to get to a property at the end of the declaration.
Also…a question. What do you all think about indentation of selectors? I think it undermines the purpose of CSS, which is clear separation of Presentation and Structure. By indenting your selectors to ‘mimic’ the HTML structure, you’ve wiped out that separation. Just a thought.
October 6th, 2008 at 10:19 pm
I liked this page designs modern way
Thanks