The Art of Crafting Beautiful Stylesheets

This entry was published on April 28, 2009 and may be out of date.

Crafting beautiful stylesheets is not a dark art. Yes, it takes discipline, commitment and persistence but with a few tricks up your sleeve, you too can be a CSS ninja.

Let me show you a few techniques I use to craft readable, maintainable and easy to debug stylesheets.

File naming convention

I follow a simple file naming convention across all my projects. It is simple and very effective way of maintaining CSS files. I have seen many designers use obscure names such as main.css or style.css for their stylesheets. I think the names can carry a little bit depth so you know what each file does in a quick glance.

Here is the file structure for one of my client’s website:

style_all.css
Contains the CSS Reset and a few more goodies that applies to all browsers and platforms. This is also a good place to place the link colours and styles for elements generated from WYSIWYG editors in the CMS.

style_screen.css
The main stylesheet file that contains the style for the entire layout. We will have a deeper look into this file in a moment.

style_screen_IE7.css
Stylesheet specific to Internet Explorer 7. Most projects I work on does not need a specific stylesheet for IE7 but this is just for sake of understanding my naming convention.

style_screen_lt-IE7.css
Stylesheet that applies to all versions of Internet Explorer below version 7.

style_print.css
The print stylesheet where you are supposed to get rid of all images and present only the nice and clean text.

This convention is very flexible. If you need a specific stylesheet for IE6, for instance, go with style_screen_IE6.css. For handhelds, it would be style_handheld.css and so on so forth.

The commercial CMS system I work with at my agency has a function that checks the stylesheets folder for the files and applies appropriate Conditional Comments automatically. I might release that bit of code in the future (if I can convince my project manager!)

Modularize

Let us have an in-depth look at style_screen.css which is our main stylesheet. This file tends to get very large so it is very important to separate the styles into sections.

I declare the sections in the CSS at the beginning of the stylesheet.

Hint: Press Ctr+F (or Cmd+F) and type in =FORMS and it skips straight to the Forms section. I find this quite a time saver.

Positioning

Define the layout structure and the positioning of the basic elements. The Header, the Content section, the Sidebar and the Footer. The first thing I do when I start coding a site is to get the frame right, not worrying about the details at this point.

Typography

Contains font definitions for global and all general elements. Define the headers (h1, h2 etc) and paragraph styles, the lists, blockquotes and anything that deals with the presentation of text.

Layout styles

Now that the layout positioning and typography is taken care of, you can now focus on the site design.

You can break this down further with sub-sections if this section starts to get too long. Maintaining proper code indentation and hierarchy (which is discussed below) will help unclutter the layout styles.

Other sections

Usually, I create a separate section for the Forms, CMS-specific code etc. Feel free to  create new sections for your own project, depending on your needs.

The advantages of splitting the code into sections becomes obvious once you have to debug or make changes to an old project. You will feel that it is much easier to browse the code and focus where you need to.

Indentation and hierarchy

Top level elements are indented least. The immediate children of the top-level element is indented once. Their children in indented twice, and so on so forth.

Not only does it look pretty and readable, it makes pin-pointing problems a lot easier. Yes, there is a not of white space that adds bytes to the file size but you can always compress the code before you publish.

For example, you are having issues with the Search box in your page. The code must be within the Layout section under the parent Sidebar. With proper modularization and indentation, you will see how easy it is to find what you are looking for.

Categorise, don’t alphabetise

Some designers have said that alphabetizing the CSS properties is an effective way of organisation because it makes maintenance easier. I beg to differ from that opinion. I find categorising the properties by type is a lot more effective.

selector {
  font-size: 12px;
  line-height: 15px;
  text-transform: uppercase;

  padding: 10px;
  margin: 5px;

  background: #000;
  border: 1px solid #222;
}

In the example above, the properties are grouped into ones that manipulate text, deal with space (margin and padding) and block-level visual cues  (background and border).

If the same selectors were alphabetised, this is what it would look like:

selector {
  background: #000;
  border: 1px solid #222;
  font-size: 12px;
  line-height: 15px;
  margin: 5px;
  padding: 10px;
  text-transform: uppercase;
}

As you can see, the readability of the CSS is vastly reduced. I usually place the positioning properties first, followed by text-properties, spacing and the others.

Conclusion

As you can see, this is not much complicated. It is these simple things that can help a front-end developer keep their sanity. Beautiful stylesheets are a first step to coding zen.

Do you have any suggestions for creating beautiful stylesheets that are easy to maintain and debug? Please do share.