As I think about the national web design contest WOW is sponsoring next week in Kansas City, Missouri and have been reviewing some tutorials on Lynda.com, I decided this might be an appropriate time to post some ideas concerning the structure of CSS files (to make them easier to maintain). When we develop CSS files for use on web sites, it is important they be easy to maintain. At a minimum, it is a good idea to include some structure and consistency within the file. For example, we might want to make certain all the properties are listed on separate lines and that the opening and closing curly braces are on separate lines (as below). We might also want to alphabetize the properties to make them easier to find in any selector (simple example below).
body
{
background-color: #ffc;
font: arial, tahoma, sans serif;
}
However, one can do a lot more in the overall structure of the CSS file. For example, assuming the CSS may contain special characters, one should consider it a best practice to include a character set declaration at the beginning of the CSS file.
@charset “UTF-8”;
This must occur before any comments or other information in the file. More details can be found at the W3C site.
One should then have copyright (possibly creator) and version information to identify the CSS file. There should also be some sort of table of contents (especially as the file grows in size to hundreds of lines). To expedite searching for information, one might preface each entry with a unique character string which will not directly be used anywhere else in the document (for example, a tilde).
So, a template CSS stylesheet should have the following characteristics;
@charset “UTF-8”;
/*
copyright 2010. Mark DuBois. Some rights reserved.
version 1.0
modified:
date:
changes:
Table of contents (to jump to a specific part of this document, just search for the unique characters at the start of each line).
~1 Color guide
~2 Reset values
~3 Global constants (identifiers)
~4 Global classes
~5 Home page (items unique to the home page)
~6 Other pages throughout site
~7 Sidebar
~8 Footer
*/
Within the CSS, one would then place specific comments so the individual sections can be easily located, for example:
/* ~1 Color guide
#ffc – light yellow – used for background
*/
Obvously, your mileage will vary with a specific site. It is not as important to have a specific section (such as footer) as it is to be consistent throughout the sites you create. This should vastly improve maintenance of the sites. I recall a quote from an individual at Howest University (Belgium) during a webinar I recently attended – “develop your code as if it will be maintained by a violent psychopath who knows where you live.” While most of us will likely never have this specific problem, it is always a good idea to make your code as maintainable as possible. As a minimum, following the above suggestions should make it much easier to locate specific items.
I know tools like Dreamweaver CS5 make it much easier to work with CSS, but even with those tools, well structured and well documented CSS should be encouraged. Your comments are most appreciated (due to the vast number of spam attempts, I have to moderate all comments – sad, but this is the world we inhabit). If you post a legitimate comment or insight I will approve it (regardless whether you agree with these thoughts above or not)?
Loading ...
The defacto commenting these days seems to be along the lindes of javaDoc. phpDoc, jsDoc of instance. For CSS commenting and structure specifically take a look at CSSDOC (http://cssdoc.net/raw-attachment/wiki/CssdocDraft/cssdoc – 0.2.22.pdf)