<style type="text/css">
  @import(mystylesheet.css);
</style>

vs.

<link rel="stylesheet" type="text/css" href="mystylesheet.css">

Which is the way to go? It’s link, and here’s why:

link is easy to skim. @import very quickly gets hard to skim as it’s more than a single line. If you’re trying to quickly browse through a lot of source, you’ll want as few lines as possible. If you’re searching through source, it’s quicker to type "link" then glance to the right.

What about including multiple stylesheets on a single page? Well, that depends on two things: how many stylesheets you’ll have on a single page and who is going to be maintaining those pages.

If you have a ton of stylesheets, it’s best to create a single, master sheet, then use that to @import what you need: write it once, include it where you need it, and it’s done. The same holds true for the latter point: unless you’re going to be the one maintaining those pages and you’re absolutely sure that you’ll remember exactly which page needs exactly which stylesheet, use the one-sheet-only approach.

Get rid of the need to keep track of more than one stylesheet in all but a single place. If you need to make an update, you’ve got an all-in-one fix, otherwise you’ll have to go page-by-page, and that’s never good.

Finally, I like the modular approach to stylesheets: make a separate sheet for separate page types or pieces of content (put your navigation in one, promos in another, and content in a third). Yes, it makes for more stylesheets in the long run, but you’ll save a great deal of maintenance effort, and that’s what counts the most: it’s just easier to find things when they’re kept in sensible modules than when they’re all lumped together.

Tags: stylesheets, css, link

This entry was posted on Monday, January 21st, 2008 at 5:39 pm and is filed under code. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.