When it comes to building a website, there is one file that dictates just about every aspect of the site’s design and layout – the Cascading Style Sheet (CSS). Personally, I have learned the hard way that it is very important to create this document the right way to make future edits and adjustments quick and easy. Constantly changing browsers require edits to be made to the CSS file(s) by the designer. These edits ensure that the website carries a professional look in outdated browsers along with the new. When the CSS file is well written, issues can be found and corrected quickly without asking the original creator any questions. In a recent article by Smashing Magazine writer Harry Roberts, he discusses many great techniques that will simplify a CSS document for anyone who has to interact with it. At the moment, there isn’t really a universal way to create a CSS document. Some of his points will help change this.

1. Think About Your Team – Comment!

A great tip while coding CSS is to remember that you will not be the only one working on the site. If you are part of a team, you can communicate with other designers and developers through your CSS. One great way to do this is commenting. A CSS file should be loaded with comments that explain the styles that were added and what these styles are doing. As this document is changed over time, designers can continue to add comments to explain new classes and ids. Comments can prevent questions or confusion from future designers and may also prevent important code from being removed. In the end, this will save a lot of time and money.

2. Multi-Line CSS vs. Single Line CSS

There is really no industry standard that dictates whether CSS should be multi-line or single line. It is really a personal preference for the designer and doesn’t affect the functionality of the code either way. In the Smashing Magazine article, Mr. Roberts sides with multi-line CSS and I tend to agree with him. Multi-line CSS makes it much easier for any designer to correct bad code and add lines of CSS as needed. Commenting on particular declarations is made easy with multi-line CSS (see the example below).

.contentBody img {
	padding:6px;
	border:solid 1px #dedede; /*-- Example comment here --*/
	float:left;
	margin:0 10px 6px 0;
}
.contentBody p {
	color:#555555;
	line-height:1.6em;
	font-family: Tahoma, Geneva, sans-serif;
	font-size:.95em;
}

3. Order of CSS Properties and Imports

This is another important aspect of the CSS document – how everything is ordered in the file. Typically, a designer will call all their imports first, universal styles, and then move to more page and region specific styling declarations. Keeping similar classes and ids together is also a good idea and will make them easy to find. An example of this is keeping all the header styling together in the same section (h1, h2, h3, etc.)

4. Avoid too many Import Style Sheets

Some designers like to separate sections of their CSS into several files (typography.css, layout.css, modules.css, etc.) There is nothing wrong with this, but it does require more HTML requests in order to load the page. Having all of your CSS in one document will simplify things and cut down the page load time.

Whether you are passing a website project to an internal team member or another outside designer, following these general practices will make the transition process a little easier.  It will be extremely beneficial if you read the full article from Smashing Magazine here.