Streamlining Your CSS File
August 18th, 2008It feels like a good week to post about CSS and Web design techniques. Today’s suggestion comes from one of the interaction designers I used to work with. A couple of years ago, I was reworking some tutorials and putting them into HTML. Because our designers work in CSS, I decided I needed to learn it. This designer reviewed my CSS for me, and one of the tips he gave me was to declare attributes as high in the CSS file as possible.
One of the objects of CSS is to cut down on the code in HTML files, which increases the speed at which browsers load the pages. You can also reduce the size of your CSS file itself with this technique.
When you’re designing with CSS, you lay everything out using divs, or containers. Divs can have IDs and classes. Divs that are inside of other divs can inherit attributes from their parents. Divs can also inherit attributes from the HTML body tag.
Here’s an example of some CSS:
body {
font-family: Arial, Helvetica, sans-serif;
color: #4C2A0E;
font-size: 90%;
line-height: 130%;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
color: #4C2A0E;
font-size: 120%;
line-height: 130%;
}
p {
font-family: Arial, Helvetica, sans-serif;
color: #4C2A0E;
font-size: 90%;
line-height: 130%;
}
That’s some pretty redundant styling. The idea here is to get rid of everything that’s repeated. When you declare something at the <body> level, it’s going to apply to everything unless you declare something different.
After some trimming out, here’s our code:
body {
font-family: Arial, Helvetica, sans-serif;
color: #4C2A0E;
font-size: 90%;
line-height: 130%;
}
h1 {
font-size: 120%;
}
p {
}
I set most of the styles in the <body> because I expect most of the text to use these styles. I’ve left the <p> tag there in case I want to specify some different styles later. Notice that I set a different size for the heading 1 style, but most of the text is going to have a size of 90%, so I put that in the <body> styles.
What if most of the text isn’t all going to look the same? For example, say your pages have a column for main content and a column for navigation. The font, sizes, and colors will be different. The same idea applies here. Put what makes sense in the <body> styles. Then specify the other styles as high up in the div hierarchy as you can. Here is an example with a “main” div and a “sidebar” div.
#main {
font-family: Arial, Helvetica, sans-serif;
color: #4C2A0E;
font-size: 90%;
line-height: 130%;
}
#sidebar {
font-family: Times New Roman, serif;
color: #000000;
font-size: 80%;
}
Note that for the purpose of this post, I didn’t worry about setting the attributes for the divs themselves. But no matter how many divs you place within the main and sidebar divs, as long as you don’t declare different attributes, the styles shown above would apply.
Once you’ve set these styles, drill down to child divs and specify the styles that are specific to them and their children. Styles that are applied closer to the divs and content override earlier styles. So even if the <body> is defined to use Arial, you can specify a different font for a particular div.
If you design Web pages or help topics using CSS, you can use this technique to clean up and steamline your CSS. If you’re nervous, work on it with a copy until you’re sure everything still looks the way you want it. One of the things I like about CSS is the reduction in HTML file size; when I reworked those tutorials, I watched the files drop from over 10 KB to between 3 and 5 KB. Then I trimmed the CSS file. Because some users of the tutorials still may be using dial-up connections, I’m sure they appreciate the difference.
Subscribe to the Journals
September 6th, 2008 at 6:02 am
[...] the CSS for your online documentation? Then you’ll want to look at these blog posts from Ben [...]