Yesterday I came across My 5 CSS Tips by Mike Rundle and while I generally agree with his advice I differ on some points and thought why not add some of my own thoughts and practices to the mix. I agree too with Mike when he says that different css coders have different styles and while I too won’t call these best practices either they do work for me and will hopefully help you.
Organize Your CSS
I think this is the most important thing you can do with your css and I use a very similar style to Mike. I prefer to organize my css in blocks that refer to the corresponding block of xhtml. My navigation css is in a block of code, my content css is in a block of code, and my sidebar css is in a block of code. I will generally have a block for global styles where I define generic styles for the body, heading, paragraphs, images, and other default global styles.
I organize things a little differently then Mike in that I like to have my global styles at the top of the css file followed by the blocks for the different page elements. I’ll generally follow a top down and left to right approach listing css for the header first followed by a navigation bar, then a left column, main content area, right column, and footer. Of course this order will depend somewhat on the design of the site. My css might look something like:
body { }
h1 { }
img { }
#header { }
#header img { }
#nav { }
#nav ul { }
#nav a { }
#content { }
#content p { }
#footer { }
#footer a { }
Obviously there would be a lot more in general and a lot more specific code within each block, but hopefully you can get the idea from this incomplete set up.
Make Use Of Defaults
This is the major point where I completely disagree with Mike. Defaults can really clean up your code and reduce the size of your css file as well as the download time of your site. In general all of your <h1> tags will look the same across your pages so define their styles once instead of separately in every containing block of code. There are tags that you will often style differently such as lists and links, but it’s still a good idea to have a default style for them. You may use different colors for the links in your main content and your navigation, but they may all be the same font or font-size. Having defaults lets you place all these common styles in one place. The styles that will be different can be defined within the more specific containing block of code.
In addition to creating default styles I also make use of the default or initial values of many css properties. Often the initial value is the one you want to use so why specify it. One example is in css positioning. The default is top:0 and left:0 so if that’s where you were planning on positioning something you won’t need to specify those values. This isn’t always for the feint of heart though. Different browsers will often use different initial values and often specifying your values is really the best approach. Sometimes making use of the initial values can save a little bit of file size and typing and whether you realize it or not you’re making use of initial values all the time. How often do you specify your main content with a font-weight:normal. Porbably not too often, but that’s the initial value and you’re making use of it, but not specifying a font-weight on most of your content.
Use CSS Shorthand
Along with using defaults making use of css shorthand can keep your css cleaner and save file size. For example when styling a border in css there’s no need to have a separate
border-width:1px;
border-style:solid;
border-color:red;
Using the shorthand the styles can be applied as
border:1px solid red;
There are many more examples of css shorthand. The ones I find myself using most are the border property as above, background, and font. The values you don’t specify in the shorthand will use the default initial values.
Learn CSS Cascading Rules
You probably know the basic cascading rules about how an inline style will take precedence over styles defined in the head of the document and that styles defined in the head take precedence over external styles. There are many more rules though when it comes to what style to apply to a given element. Understanding how the specificity of a selector is calculated can help you understand why one of your css styles is or isn’t being applied. Often I’ve applied a css style thinking it would fix a layout issue only to have nothing change. The instinct is to think the style didn’t do what I wanted it to, but the case is sometimes that I’ve applied the right style only to have used the wrong specificity on the selector. The right css won’t help much if it’s not being applied in the first place.
Code to CSS Standards First
It’s true that Internet Explorer is by far the dominant browser and we all need to make sure out pages render there above all other browsers. Still you’re better off first writing your css to make it work first in a browser that is more compliant with the standards like Firefox. If you start by trying to make things work for Internet Explorer you’ll inevitably add a few hacks that while fixing things in IE will make it difficult to get the page to render properly in any other browser. IE is actually much more compliant than people give it credit for being, but it’s still better to code to a more standards compliant browser when you start and then tweaking things for IE.
I develop in Firefox, which happens to be my browser of choice and at certain points I’ll stop to take a look at the page in IE and fix a few things before continuing along in Firefox. If you follow this approach I think you’ll find it easier to get things working in IE at the end and also find yourself using less IE specific hacks.
Structure Your (x)HTML Better
This added 6th tip isn’t exactly a css tip, but I’ve found that when people have trouble with a css layout the problem is often the xhtml structure that needs to be changed. Starting with a good structure to your xhtml will make your css coding a much smoother process and often require less css to get the look you want. Not every css issue can be solved with good xhtml, but a lot can. Making good use of classes and ids can reduce your css code and make it much cleaner. Structuring your divs and other elements well can solve many issues simply that would otherwise keep you up at night trying to find a solution to a poor structure.
Hopefully these css tips will help improve your css coding and make your next project a little quicker to get through as well as making it easier to come back to a css file you’ve written months ago and make a few changes. The most important is how you organize both your css and xhtml, but I’ve found the other tips to help me many times in my css coding. Again these aren’t necessarily the best practices, but rather my practices. Feel free to share some of your own css coding tips and practices.
Download a free sample from my book, Design Fundamentals.