CSS Best Practices Documentation

My life revolved around stylesheets when I lended a hand to The Web Standards Project. Web sites/software today is pretty much designed using CSS and Web 2.0 methods of prototyping. So when I was Lead Interface Designer at Kintera, I really enjoyed questioning every decision about interfaces, and how we use CSS so we’re not locked into decisions we can’t get out of.

No PX for font size

If the majority of your visitors use Internet Explorer, then specify PX on the BODY tag only. Let this be a starting point that the other tags will inheirit the relative sizing from. Don’t use pixels for anything else. Using percentages (or other relative values) to specify page layout in CSS allows readers adjust the font sizes. The exception being; You’re building a piece of software

Avoid Unnecessary Selectors

I’m still trying to explain this properly, so here it goes; In HTML layout, CLASS and IDs do not have to be filled out for every HTML element on the page. Tags are nested within each far enough, that they become unique quite easily. This is due to the DOM or Document Object Model, and all webpages ever made on the internet follow this structure. It simply means that what ever you put on a webpage is nested in some kind of container. In that sense, it is like a book with a Table Of Contents. Therefore, each webpage is a book with table of contents.

Here I’ve created a basic table. There is a header, and two columns. But notice how they have a layout which can be mapped to a table of contents. There is a Title, Subject, etc… Using this general format of a book, make it easy to communicate to someone else where content is on a page. Simplying say “it’s a title” is easier than “customformat_IU_600xLEFT” Because no-one wants to memorize the names of selectors.

If you want a tableless/CSS mapping for this convention; Using H1 -> H6 should be the HTML code equivalent. The H1 though H6 tags are the easiest way to apply style to your content, without having to manually type in the ID or CLASS of that element. If at all possible, you want to eliminate custom classes, because it’s just more things you have to remember on a daily basis. CSS does the hard work for you by rewriting these tags. It is acceptable to use HTML to align text right, left, center because using CSS to do this might create too many custom classes.

Here I put the above convention to use. Another benefit, is that software like Dreamweaver has keyboard shortcuts to select H1-H6 tags, eliminating the need to manualy have to type them out. Jack Slocum has a similar method using compass directions (North, South, but without the ability to use shortcut keys.)

CSS declarations on one line

I’ve always put my entire declaration on one line. Here’s an example to explain what I mean:

h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}
h2 {
   font-size:18px;
   border:1px solid blue;
   color:#000;
   background-color:#FFF;
   }

The second one may look prettier but it sure doesn’t help me find anything. When looking for something in a style sheet, the most important thing is the ruleset (that’s the part before the { and } ). I’m looking for an element, an ID or a CLASS. Having everything on one line makes scanning the document much quicker as you simply see more on a page. Once I’ve found the ruleset I was looking for, find the property I want is usually straightforward enough as there are rarely that many. Here is a stylesheet I use as a template.

#xxxx{}
#xxxx .input{}
#xxxx .selected{}
#xxxx .textarea{}
#xxxx a,#xxxx a:link,#xxxx a:visited{}
#xxxx a:hover{color:#FF6600}
#xxxx b{}
#xxxx h1,#xxxx .title{}
#xxxx h2,#xxxx .subject{}
#xxxx h3,#xxxx .regular{}
#xxxx h4,#xxxx .highlight{}
#xxxx h5,#xxxx .special{}
#xxxx h6,#xxxx .help{}
#xxxx i{}
#xxxx img{}
#xxxx p{}
#xxxx span{}
#xxxx td{}
#xxxx th{}
#xxxx th a,#xxxx th a:link,#xxxx th a:visited{}
#xxxx th a:hover{}
#xxxx ul li,#xxxx ol li{}
#xxxx ul,#xxxx ol{}

Software like Dreamweaver has keyboard shortcuts to select H1-H6 tags, eliminating the need to manualy have to type them out. - Jeff Knooren

Allow Block Elements To Fill Space Naturally

I set a width but not the margins or paddings. If setting margins or paddings, I don’t set a width. The box model is such a pain, especially with percentages. Therefore, width on the containers and then set margin and padding on the elements within them.

CSS Shorthand

It has been argued for quite some time that setting margin-top, margin-right, margin-bottom and margin-left is too verbose, and it will take fewer bytes to use shorthand. However, the savings won’t make that much difference. Additionally, paddings and margins are STILL not properly rendered in all browsers. The long form version is the only one that works without hacks.

Browser Support

Support only the latest browsers. That means dropping IE5 and IE5.5 support. phasing out these old browsers means having to use less hacks to get things working. Along with using very few hacks means I can avoid shovelling different style sheets to separate browsers. I have one sheet, and that’s it. You have to consider your audience before dropping browser support.

One of the good things about making a time tracking application from scratch, is that over time, you can make small improvements to it as the need arises. - Jeff Knooren

Containing Floats

After many frustrating attempts with relative and absolute position techniques, you might have figured out the only way to put things where you want them is to use the Float attribute. But only worry about containing your floats if you have a background you are trying to set on your container. The overflow should be set on the container. The content within the container should be designed to stay within the container. Anything too big and it’ll get clipped. Shifting things using negative margins outside the container will also get clipped. Here is an example, of floating images, from the main page of my website

This isn’t one floating image, it’s 7 images floating and overlapped. The arrows can be positioned using CSS.

Overflow

Overflow is usually where people get bit by IE. If you’ve got two floated elements and the content from the left container overflows then, in IE, the container grows and inevitably pushes the right container below it. This is usually a sign that you’ve messed up your margins, widths, or padding on one of these containers but Firefox (et al) won’t reveal this. Using something like overflow:hidden or overflow:scroll on a container can help prevent IE from allowing the content to push the width of the container but you’re better off trying to fix the issue in the design.

Floating multiple elements on the same line

For basic positioning, relative and absolute positioning work just fine. But when your layouts become a little more complex as they always tend to do, tyring to position div’s within div’s using this method can become a real struggle. The cool thing about Float, unlike the other positioning attributes it makes it so easy to position elements right next to each other. For example, if your wante to create a navigation menu that spanned left to right with say 5 different boxes, the Float attribute makes this so simple. When you create a floated div tag using the following code: float: left; providing it fits into the length of the page it will position this flush with the side of a previous floated element:

Spending an hour to prepare an estimate, along with 100 other people isn’t a productive way to do business. - Jeff Knooren

Summary

When you get to be in a position to lay down some rules for others to follow, you have to go beyond a preliminary examination of your choices. This questioning lead me to examining issues such as, WHY is that font THAT size? Or, why is this thing light blue, and not dark blue? To begin such a questioning process, you need to start somewhere, and document those choices. This post, is what the first version of that foundation might look like. Additionally, I think developers tend to go overboard in creating CSS selectors. Well, what have you got to say for yourselves?