Codex.
In the years I have spent writing code for the web, I have seen thousands of pages of source code. No matter how “advanced” a web author you may be, you know you still do it. Whenever I see a well-crafted website (or, alternately, an abomination dressed in HTML), I just have to right-click and View Source (and usually CSS, too). In doing so, I have been endlessly fascinated by the many variations in code formatting employed by web designers.
I’ve been thinking about this more often lately, as I have been working on various projects that have more or less required me to work off of others’ pre-existing code (more on that later), including HTML, CSS, and Actionscript. In the case of working off of other’s code, there may be absolutely nothing wrong with it at all. In reference to this latest project, it’s absolutely top-notch. But it’s those subtle differences in syntax that make all the difference. I think it’s safe to say that most designers could recognize their own code—or code using their formatting style—on sight.
For my own work, I have found that I work best in HTML by using a model I call the Tab Hierarchy. I see a form of it used on most designers’ websites I visit (when it’s not obliterated by CMS output, that is). I interpret the format to mean that for every piece of code that is nested inside a greater governing element, it gets an extra indentation from the Tab key:
<div id="container">
<div id="nested">
<ul>I'm a list!
<li>I'm a list item!</li>
</ul>
</div>
</div>
Now that’s mostly your basic Dreamweaver format, but stuctured a little more carefully as code becomes more and more nested. When coding CSS, I find that I use one of the following formats, depending on how many attributes I am using:
#example {
margin: 0;
padding: 0;
border: 0;
}
#example { margin: 0; }
It’s pretty standard fare. But then there are the the endless formatting variations. Which properties do you list first? Do you follow a specific order? Do you group selectors alphabetically or by function? Do you indent the trailing }
? The questions are endless, I suppose.
What I’m really driving at, specifically, is the reasoning behind how and why we format our code the way we do. Did you learn it from one of the ‘masters?’ Did you start there but modify the format to make it more sensible to your own sense of organization? For the most part, I see code that is largely identical in format, but there is usually at least one little quirk, if not more, that makes someone else’s code immediately discernable from our own.
Got any formatting tricks up your sleeve? Code-related organizational methodology? I’m not so much interested in changing my ways as I am in discovering why we format code the way we do. Maybe the answer is a no-brainer: because it works? Do share.
A quick note about posting code in comments:
Due to a teeny bug, some HTML is accepted into the comment form, even though it should not. When inputting code, even when wrapped in code
tags, it will not appear as code. Please “break” HTML tags by adding a space after the opening bracket, a la < div>. Indents can be added using 5 consecutive
’s. CSS code is unaffected. When in doubt, check the Preview.
And please, no comments about how Wordpress doesn’t have this issue. ;)
You may also post a screenshot. Images may be no larger than 375 pixels square. See Textile Help for image code.