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.
Commentary
Comment appropriately!!! I can’t stress this enough. Code is already hard to read, so save yourself the trouble and comment on it. I can’t stand to look at unformatted code…it hurts the eyes! :)
Tab appropriately, where you can. This helps you in finding everything in your document. Whether it be Actionscript, HTML, CSS…an appropriate tab structure can save you so much time. Plus, it just looks cool!
Maybe one day, when I have nothing to do, I’ll straighten it all out…
I’ll also make smaller ‘mini-models’ to help sort out nested lists and whatnot.
The majority of my css is written sequentially, ie, rules for body, then rules for container, etc.
Commenting our code was hammered into us in college (not for html or css, but everything else we learned. the only html we were taught was frontpage). That might be the reason I hardly do it at all. I would more if I thought I was handing the code over to someone else at the end. I do name my classes and divs as clearly and cleanly as possible though.
I know how to be a better coder. I’m just a bit lazy. For personal projects anyway.
Rob Mientjes » 2015 days ago #
Jared, funny how we code pretty alike. When a rule has only one attribute (mostly * html …), I do the same thing. Indenting is a real help, and so is commenting. Luckily I know my own code, but do think of others if it’s a public project or a team effort. And I keep telling myself “Rob, you’ll forget what it’s about and screw up big time!”. Has worked every single time.
With HTML I’ll indent it the way you mentioned, up until the main content of the page, which I’ll normally keep it completely unindented to make it easier to work with (especially when navigating using the arrow keys and Home/End).
Jeff Smith » 2014 days ago #
I try to use the tab hierarchy in the majority of my XHTML and HTML work. I think this is due in large part to my programming background.The only time that I don’t use the tab hierarchy is when I’m dealing with CMS output, which at times, can get messy. I find the best way to deal with this situation is to left-justify all my code and separate it into blocks:
< div>< p>Some output here...< /p>< /div>< div>< p>Etc.< /p>< /div>This keeps things fairly clean and easy to manage.
Great article by the way Jared. Coding techniques are definitely something that kind of gets pushed to the side at times.