Google

Monday, November 19, 2007

Managing CSS File

Deciding how many style sheets to maintain and what they should contain is more difficult. In a small, simple site it may be fine to keep all of your declarations in one file. But as sites grow larger, there seems to be a point at which it becomes simpler to deal with multiple files than it is to find the declaration or attribute you’re looking for in amile-long single style sheet. Because CSS includes the ability to import other style sheets, it’s relatively simple to link to one style sheet from your (X)HTML file, and then import additional style sheets from that one. Take a look at the following example:

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>untitled</title>
<link rel="stylesheet" type="text/css" href="http://yoursite.com/media/css/base.css" />:
</head>

<body>
<p>The content of our page.</p>
</body>
</html>

base.css:
@import url("layout.css");
@import url("typography.css");

Here, our linked style sheet, base.css, imports two additional style sheets, layout.css and typography.css. We’ve split our CSS into three separate files, but the browser will treat them as if they were one long style sheet. Personal preference is involved in deciding which is easier to wrap your brain around— one file or multiple files. Oftentimes, the scope of the project will dictate your methodology.

A small project with only a few pages may have far fewer styles, and thus be quite manageable in a single file. Larger projects are more likely to get complex, and breaking their style into multiple files may help you keep track of things more efficiently. You also may find special cases that warrant their own style sheet, such as groups of hacks and workarounds to compensate for browser bugs or styles specifically for a particular media type (such as print or handheld).

Whether you decide to break up your styles into multiple files is entirely up to you. With a little experimenting, you’ll find methods that make sense for you and your team.

from: pro css technique (Jeff Croft, Ian Lioyd and Dan Rubin)



No comments: