CSS Indention Method
Some have their own methods on how to write CSS, specifically when it comes to syntactical perfection like where to insert line-breaks, omiting the semi-colon from the last property, putting spaces between the colon that separates the property from its corresponding value, or even preposterous recommendations that tell developers to avoid rules that include shorthand properties at all costs. Well, ok, whatever. I’m not saying any of those are wrong or impractical. But I would like to introduce a different method of how you explicitly write the language itself.
Indention Explained
CSS is, in fact, a layout / presentation language. It is used to style markup such as html, xhtml, or even xml. Thus if you take the most common approach to html development, you are used to indenting your markup with nodes that have children, whom have children, whom have children, etcetera, etcetera. So, it makes sense to create hierarchal-like tree structures to make your source documents easier to read. Therefore in the same fashion, it would only seem logical to do the same with your Style Sheet markup.
Let’s consider this example of a very common webpage that includes universal elements like a header, an intro, a navigation, two content columns, and a footer.
document tree structure
<body>
<div id='header'>
<h1>My Web Document</h1>
<div id='intro'>
<h2>Tagline and company phrase</h2>
<p>Description and Introduction to the company</p>
</div>
</div>
<ul id='nav'>
<li><a href='index.html'>Home</a></li>
<li><a href='contact.html'>Contact</a></li>
<li><a href='about.html'>About Us</a></li>
</ul>
<div id='contentBody'>
<div id='latest'>
<!-- latest news -->
</div>
<div id='archives'>
<!-- archived news -->
</div>
</div>
<div id='footer'>
<p>Content Copyright (c) 2005</p>
<p>Widgets Ltd. Inc.</p>
</div>
</body>In contrast, we can write the corresponding CSS markup that nearly mimicks that of its html counterpart using the same indention technique. Take a look:
The CSS Indention Method
body { }
#header { }
#header h1 { }
#intro { }
#intro h2 { }
#intro p { }
#nav { }
#nav li { }
#nav li a { }
#nav li a:hover { }
#contentBody { }
#contentBody #latest { }
#contentBody #archives { }
#footer { }
#footer p { }
Voila. It’s that simple. It makes your CSS easier to read, quicker to locate specific elements within your document, and conveys a clearer hierarchal structure. You could (literally) come back to your style sheet one year later and begin making changes without taking a single peak at the corresponding html document. Albeit I don’t foresee anyone actually doing that, the principle in rehearse makes for practical Style Sheet development.
Indention used with Sister Methods
A beautiful realization of the indention method is that you can use it in conjunction with other maintenance techniques like Mike Stenhouse’s Modular CSS approach as well as many other attempts to maintaining the CSS elephant. Furthermore, indenting your CSS will help improve your style sheet architecture which in the end will make the other kids like you better.
November 6th, 2005 at 11:14 pm
Although it looks very different to ‘normal’, I think it could work out ‘ok’. I don’t think implementing modular CSS is going to work all that well with it though, as then you would inevitably fail to maintain the tree structure.
November 7th, 2005 at 12:42 am
Mikes Modular CSS is more or less an architecture for maintaining CSS. The CSS Indention method expalined in this article is a way to syntactically write it on any given css file. With that said, the two can easily coincide. It may even help better understand your “layout.css” file (according to the Modular CSS article).
November 7th, 2005 at 9:48 am
I was actually struggling with the topic of css organization back in January when I was working on a project for my previous employer. In an effort to make the css maintainable I actually used indentation for the main layout divs, and I’ve been doing it ever since. I usually only indent the css that defines the structure of the site template. For everything else I try to employ reusable css classes and order those alphabetically.
November 7th, 2005 at 11:30 am
That’s exactly it Jason. The “everything else” you talked about should definitely be sought to be reusable as best as possible. That’s why I think one of the core of the indention method will most likely appear inside layout.css files as opposed to typography.css or colors.css etcetera…
November 7th, 2005 at 2:55 pm
For a long time I used the format
body {color: #asdf;
}
(0,1,0) but I just recently started doing
body {
color: #asdf;
}
(0,2,1)
In addition, I do everything alphabetically, use shorthand wherever possible, and lay things out in the order tag, id, class with a line between each section.
I never have any trouble finding things, since there’s such a specific organisation to how it’s all laid out.
(here’s hoping the code tag will apply proper spaces)
November 7th, 2005 at 2:56 pm
Sorry for comment spam, but those examples should each be three lines long, in the format
tag { | rules | }
November 8th, 2005 at 5:23 am
I’ve been using this technique for over a year and can safely say: It Works!
Dustin, if I’m using one CSS file, I separate the CSS file into two distinctive sections, one for general properties
e.g.
a img {border:0;}…then my node tree…
Out of interest, where did you get the idea?
Cheers,
Shaun
November 8th, 2005 at 5:58 am
Yea, I really ought to start separating my stylesheets into more than just a main and layout css file. If I did however, I would give them more specific names than layout.css, typography.css etc. Probably something like projectname-layout.css, projectname-typography.css. The reason I say that, is when developing locally on http://localhost, I’ve seen browsers load the same /css/style.css that was cached for another project. It happened quite a few times at my old work…and for the people who didn’t know much about stylesheets it was pretty confusing. If you’ve never seen a stylesheet for one website applied to another…man, just let me tell you…it’s a mess.
November 8th, 2005 at 11:04 am
@Shaun: This method occurred to me when I kept getting pissed off that I couldn’t find anything… and this is what spawned, then it stuck. I too separate my files in a couple of chunks, so I mainly use indention for the layout styles. Other global elements and classes I keep to section of the file (when using only one file). As for a simple site like this one, I kept it all indented. Just view this site’s style sheet.
@Jason: Are you speaking of the irony of me still seeing your cached style sheets? *wink*
November 11th, 2005 at 11:00 pm
After viewing your style sheet Dustin, I’m not sure if I’m for it or against it. The tree is nice but it is nearly as confusing; probably due to the single line nature of it. That said, finding things certainly is simple.
November 13th, 2005 at 9:22 am
I might try this for my stylesheet/s. Anything has got to be better than the mess it’s in right now!
December 3rd, 2007 at 11:04 am
[…] method, while new for me, is clearly not revolutionary. However, since I stumbled on it on my own, I thought some of you guys might benefit from it as I […]