4 great tips for organizing CSS files and declarations
I tend to bring the graphic designer side of me a lot when dealing with code. Aside form the regular indentation preferences that each developer has, I try to make the code as good looking and legible as possible.
Programming languages in general tend to provide a default way of organizing source files, such as organizing folders/packages, which may containg other folders or files which represent classes.In those files themselves, code is organized in functions, which may have loops and statement blocks. This allows a somewhat standard way of organizing code in the file. And that’s critical: confusing code will undoubtedly extend the time required to understand a file someone else may have written, or even yourself in a past time.
CSS lacks that kind of standard, productive organization—I don’t believe putting block after block with simple indented declarations a real organization scheme. So I present the main 4 rules I consider when organizing and writing the files for in a general basis.
1. Create a CSS framework
Jeff Croft illuminates us with the concept of ‘CSS frameworks for designers’ in this article for A List Apart. Grouping all of your browser reset styles and some basic, repetitively used styles in the same file allows for faster project start and the creation of a stable vocabulary of CSS definitions which can be shared among everyone working in the project.In a future post I’ll share the declarations I tend to use this way.
2. Contextualize your CSS files
I work a lot with CakePHP. It groups all the CSS files a project uses—front-end and back-end— in the same app/webroot/css folder. When projects grow, the number of files can generate some confusion, since there’s the reset and framework file which will most probably be used by both parts of the project, a number of [yuck!] browser-specific (IE) files. I usually name my files the following way:
- shared.framework.css (shared among all)
- site.generic.css (main site declarations)
- site.ie6.css
- site.ie7.css
- backend.generic.css (where ‘backend’ is the name of the CMS)
- backend.ie6.css
- and so on…
This allows for a lot of maintanability and code resusability.
3.Use single line declarations
When scanning a CSS file for a specific declaration, we use a process much like the same as reading the summary of a book: first we need to find where is what we want, and afterwards discovering what’s inside. With that in mind, I find it much practical to use single-line declarations: it saves space, organizes code, and can even reduze file size (in a thousand-line file, that’s one KB of line breaks you save).
4. Indent CSS according to XHTML nesting
This is the one I find the most useful. Even with the amazing help of Firebug’s Inspector (which is not available for IE), it can be quite hard do find which declaration affects each element on the page. That leaves us with a lot of scanning through CSS lines. Single-line declarations may help, but still there will be some diffulty finding what we want. CSS indentation to the rescue! Consider the following XHTML:
<h2>Main title</h2> <ul> <li> <h3>Some title</h3> <p>This is some text <span class="highlight">foo/bar</span></p> </li> <li> <h3>Some other title</h3> <p>And some more text <span class="highlight">bar/foo</span></p> </li> </ul>
You can make the highlight spans bold and red by simply declaring
.highlight {font-weight:bold;color:red;}
but it could not make any sense in the middle of a hundreds of other declarations. It would also limit the variations of ways you could use the highlight class. But if you declared that
h2 {font-size:3em;}
ul {background:yellow;}
ul li {display:block;}
ul li h3 {font-size:0.8em;}
ul li p {font-size:0.8em;}
ul li p span.highlight {font-weight:bold;color:red;}
It would be much easier to locate that declaration, and then change it. You should notice as well the tab-aligned right portion of the declarations. I find it much useful to organize CSS in columns, which would add to the ‘index’ effect I mentioned above.
Those are my main tips. How do you like that? Do you have any other tips as well? Please join the discussion!
Have your say