Cascading style sheets are an essential component of the web. I remember back when they weren’t, or more accurately back when they weren’t as popular (about the time they were only being used to set font colors). Let’s just say I’m very happy that the web is moving toward the separation of content, style, and behavior.

Today I would like to talk about style, and some of the ways I go about writing CSS. There are lots of methods and tips to find out there, but hopefully I can share something unique that might help you in your writing habits.

Importing Stylesheets

One of the first things I will do in a style sheet is drop in a few imported style sheets, like this:


@import url('css/typography.css');
@import url('css/layout.css');


Importing style sheets keeps CSS trimmed and clean. I also tend to use certain styles over and over again like typography or layout styles. Usually these style sheets can be modified to a small extent to make them usable for a new site design, without having to re-do all of the same code as before.

Reset.css

A style sheet to reset styles initially is crucial to have. By not resetting all of the default styles on the page, you are allowing the browser to decide for itself how it should display certain elements. I tend to agree with the great CSS giant Eric Meyer, who has said:

Elements are nothing alone. They act the way they are told…And I don’t want anything acting like anything unless I tell it to.

Meyer’s reset.css is the best, which is why I use it.

Ems and Pixels

If it were up to me everything on the web would be sized in ems. Unfortunately, it isn’t always possible to build (what I think of as) a vector web just yet. Right now we’re stuck with raster. But while there is an excuse when it comes to sizing elements and their spacing/alignment, there is no excuse for anything but ems for typography.

I start by defining the font size in the body element to 62.5%. This sets the base font size (1em) to 10 pixels, which is pretty easy to scale and keep track of as you go. Then, if I want 12 pixel text, I set the font size to 1.2 ems. You get the picture.

Clean Code

When it comes to the literal act of laying out code things can get pretty messy fast. I’ve gone back and forth about the best way to do this. I used to write in this common way:


div.style {
  font-size: 1.2em;
  line-height: 1.8em;
  margin-bottom: 1.8em;
}


And that works really well. Recently, though, I’ve been doing it this way:


div.style { font-size: 1.2em; line-height: 1.8em; margin-bottom: 1.8em; }


Using this method, I find I don’t have to scroll nearly as much, and to my eyes it looks very clean.

Commenting

Commenting the styles as I write them is integral and serves two distinct purposes: organizing code into appropriate sections and describing styles/decisions/hacks/anything for the purpose of being able to understand it all later.

I use comments to break up my code pretty simply, usually something like:


/* Header */

/* Sidebars */

/* Footer */


And that works pretty well. I also use it to describe certain stylistic decisions and explain some code to myself, for the sake of my sanity later. Every once and a while I think: But I understand how this works. It isn’t really complicated. Ah, but once I walk away from it, three months later, it will be complicated. The best advice I’ve ever heard, when it comes to commenting code, is to think of yourself looking at this three months from now: that is how someone else will look at it, and that’s, in the end, why you want to comment (for yourself and others).

What I Want to Begin to Do

I am pretty good about listing my contact information, version information, etc. in each style sheet, but I am not very good about leaving notes about when the last edit was made. I think that would really be helpful information, especially considering how it seems I am always updating and re-editing code across many different sites/themes/blogs.

Speak up

Was any of this helpful? And even if it wasn’t, point out where you disagree. And finally, what are you not doing that you want to be sure and start doing in your code?

Credit

I was inspired to write this post after reading Creating Sexy Stylesheets over at Think Vitamin. Tim Wall at Element Fusion was kind enough to point my attention there.