Recipe 1.11. Organizing Style Sheet Files

Problem

You want to effectively manage and organize your CSS files.

Solution

Manage CSS files by placing them in their own directory. The following CSS files live in their own css directory.

/_assets/css/print.css /_assets/css/screen.css

For a large or complex sites, rather than having one CSS file for each type (print, screen, and so on), break out CSS by function. These are in the same directory as the simple version.

/_assets/css/layout.css /_assets/css/color-imagery.css /_assets/css/type.css

Then, in the HTML file, link to these files by placing the following in the head element:

<link rel="stylesheet" type="text/css" media="print"                 href="/_assets/css/print.css" /> <link rel="stylesheet" type="text/css" media="screen"                 href="/_assets/css/screen.css" />

For the large sites, the screen.css would include methods for importing the separate CSS files that dictate the design for screen delivery. Here's what the screen.css would look like in this solution:

/* import style sheets */ @import url("/_assets/css/layout.css"); @import url("color-imagery.css"); @import url("type.css");

Discussion

If you are using external style sheets (Recipe 1.6) for smaller or easily managed sites, breaking out style sheets by media type (print, screen, and so on) does the job nicely.

Taking this approach with larger or more complex site can make it difficult to search the files to see how the CSS is set up.

Currently, there isn't a standard or recommended approach for managing CSS-related files. Like the previous recipe, you may discover another approach that works better for you. Experiment with file and content organization until you find one that works well.

Problem

Solution

Discussion

See Also