Dec
9
Organize Your CSS
Filed Under Web Development |
Have you ever tried to edit some else’s CSS code? If you have, you’re likely familiar with the inevitable frustration of trying to figure out what attributes are defined where. While the Firebug plug-in for Firefox has been a God-send in this regard, it doesn’t solve the problem. The problem is that most folks simply do not arrange their CSS in a logical fashion.
I have been using my own method of CSS arrangement for several years now. It has evolved slowly over time to the point to have arrived where it is today. It consists of three parts: order by selector, order by HTML element, indent nested selectors.
Order By Selector
The first step that I take when starting a style sheet is to create headers for my code. My typical headers are “ELEMENT/CLASS SELECTORS” and “SPECIFIC ID SELECTORS.” What goes where should be self-explanatory, but since some of you may be unfamiliar with the terms I’ve used, let me explain. “Element” selectors, as I’ve termed them, are very general selectors that apply to an entire HTML element (or HTML tag plus it’s content). An example of an element selector with a CSS attribute might be the following:
body {
margin: 10px 30px;
}
Since these selectors are very broad in their scope, I place them at the top of my CSS document. Following these CSS rules are those using “class” selectors. Class selectors, while more specific than element selectors in that they only apply to a given class, can still apply to many elements within a given HTML document. An example of a class selector with a CSS attribute follows:
li.nav {
list-style-type: none;
}
Since both element and class-based selectors can apply to multiple HTML elements, I lump them together under the same heading. ID selectors are quite different, however, in that they apply to a very spcific HTML element which can only appear once per page. Therefore, I place all ID selectors and their attributes next under the appropriate header. An example of an ID selector with a CSS attribute is below:
div#content {
position: relative;
}
Order by HTML Element
The next step in adding order to your style sheets is to arrange your CSS selectors and rules as they apply to your HTML document. Let me explain. The HTML elements in your page appear in a given order that is generally consistent throughout a Web site. Certain parts of this order are necessitated by the HTML specification, such as the head must appear before the body. But most elements can be ordered as you see fit. I explained in my article entitled How To Write Clean HTML a efficient way to order your code which also makes your site easily printable. A simple example of the HTML body might look like the following:
<body>
<div id="main">
<div id="header">
<h1>Organize Your CSS</h1>
</div>
<div id="navigation" class="screen">
<ul class="nav nav-primary">
<li><a href="step-1.html">Step 1</a></li>
<li><a href="step-2.html">Step 2</a></li>
<ul>
</div>
<div id="content">
<h2>Arrange Your Code By Selector</h2>
<p>This is sample text.</p>
</div>
<div id="footer">
<p>Copyright 2008</p>
</div>
</div>
</body>
With your HTML in place, the next step is to put your CSS rules in the same order as they are applied. For instance, a CSS rule that applies to the <div id=”content”> and its child elements would appear before one which applies to the <div id=”footer”> and its child elements. If you’re with me, you may be thinking that element and class selectors cannot follow this format, since they can apply to any number of different HTML elements. And you’d be right, which is why I keep them separate from my ID selectors.
Indent Nested Selectors
The first two tips that I’ve given will help you to easily find selectors in a CSS document. But neither improves readability as much as indenting your selectors. One of first things I was taught when I learned how to code HTML was to indent my code. Yet I created CSS for more than a year before it even occurred to me that indenting selectors might be a good idea. As simple as it sounds, it is extremely rare to find any CSS in the wild that has been indented for readibility.
There are two type of indentation that can be used regarding CSS rules. The first is indentation of the attributes verses the selector. There are several common ways of doing this, and while I have my favorite, neither is any better than another so far as readability is concerned. What I am more concerned with is indenting child selectors within their parents. An example might be a specific header which is contained within the content area of a site. See below for an example of the HTML code, followed by the corresponding CSS:
<div id="content">
<h1>This Is My Header</h1>
</div>
div#content {
margin: 10px;
}
div#content h1 {
text-align: right;
}
Is it starting to make sense now? Specific selectors - those which can be used on once per page on a specific element - should mirror their HTML order and nesting. When code is indented and ordered in this fashion, it not only becomes much more easily read, but it’s suddently easy to move back and forth between the HTML document and the CSS document without getting lost.
While I’ve had great success with this method of arranging my CSS over the years, I am not too proud to say that there may be better methods. If you have a method that works for you, by all means, continue. But always remember, whatever you do, try to arrange your code in an orderly and logical fashion. You never know who may end up working with it at some point. And if you care about how your Web site performs, making it as easy to maintain as possible is key.