7 tips on css

• ering
• July 29th, 2008
• 03:11:53 PM

This one time, we were all talking, and I said, “I think it would be really good if we had a css style guide.” And everyone seemed to agree. Then everyone was like, “Hey, Erin, you know css and you know the fonts and stuff you designed, so you should make it.”

I may know css, but that doesn’t mean I enjoy it. Actually, I’m starting to get the impression nobody here really enjoys creating stylesheets. It’s like the little lost orphan, sitting in the corner…or alley…or maybe in between two garbage cans in the alley. with a mangy kitten.

Anyway, when it comes to css, here are seven things I do not only to make well-formed code, but also to create a sensible document for those who will be looking at it and editing it in the future.

Categorize
Categorize the selectors by function and/or location on the page; it depends on the site. Look at your design overall and find what parts can be grouped together, whether it’s the text styles or the navigation area…whatever. Mine is usually something like:

1. Global Defaults
2. Header
3. Nav
4. Headings
5. Text Styles
6. Links
7. Lists
8. Forms

Table of Contents
For the sake of you as well as others, it is very polite to place a table of contents at the top of your stylesheet. It would look the same as the category thing above, with the idea that each chunk of code would have a commented out header stating its category.

Indent
Everybody seems to indent a little different, if they indent at all. Some examples are:

1.

#header h1 { font: 100 36px/34px serif; color: #000; }
#header .contactform h2 { font: 100 24px/28px serif; color: #aaa; }
h3 { font: 100 12px/18px serif; color: #333; }

2.

#header h1 {
font: 100 36px/34px serif;
color: #000;
}
#header .contactform h2 {
font: 100 24px/28px serif;
color: #aaa;
}
h3 {
font: 100 12px/18px serif;
color: #333;
}

3.

#header h1
       {
       font: 100 36px/34px serif;
       color: #000;
       }
#header .contactform h2
       {
       font: 100 24px/28px serif;
       color: #aaa;
       }
h3
       {
       font: 100 12px/18px serif;
       color: #333;
       }


I go with the third one because of the spacing. For me, it’s the one that is easiest to visually separate the chunks and individual properties when you are skimming through.

Alphabetize
Within each category, I alphabetize the selectors. I don’t really bother alphabetizing properties within selectors because there really shouldnot be enough properties in one selector that would require any method of organization.

Subcategorize
Don’t add more classes; cascade! Subcategorize! Basically, anytime you can find a way to define a selector without giving it a class, the more flexible (and less full of hassle) your code is for changes later on. For instance, you could do this for a list item in an unordered list, nested in an ordered list:

li.mynestedlistitem { property: value; }

but this is better:

ol ul li { property: value; }

That says “for any li within a ul within an ol, apply that stuff in the brackets”. Along this line of thinking, when you go to organize your stylesheet, you can place the ol ul li under the ol, so visually you can see that they are related.

ol
       {
       property: value;
       }
       ol ul li
              {
              property: value;
              }

Comment
/* Comments are awesome! Use them! They'll help you organize and remember why you did something weird and tell other people why you did something weird and point out places you made a hack! */
/* (^o^) =====+++ AND you can decorate them super-pretty-like. +++===== (^_^) */

Condense
One last and possibly obvious note — better to condense this:

font-family: sans-serif;
font-size: 16px;
font-weight: 900;
font-style: italic;
font-variant: small-caps;
line-height: 18px;

into this:

font: 900 16px/18px italic small-caps sans-serif;

And here, for your enjoyment, if you’re into this sort of thing, here is the (unfinished) typography stylesheet for our project. (Some names are quite generic right now, since it’s still under wraps. Also, it hasn’t been hacked for IE yet.) typography.css
————————–
Taking on the task of creating the stylesheet has been a very good lesson for me. Even though I planned with a limited set of fonts and sizes and colors and weights and so on, as I’m creating the stylesheet, I keep coming across places where I thought, “Oh…really, this font would look better in red here. I’ll just change it.” Yeah.