Using modular stylesheets is the next step in creating modular and reuseable styles. The World Wide Web Consortium (W3C) decided to modularize the CSS3 spec, because modularization makes sense. You can use modularization concepts on your Web site to organize your CSS code and reduce bugs.

Why Modularization?

Modularization is the process of dividing your code into seperate components, that can be combined as needed. Rather than creating one large monolithic CSS stylesheet for your Web site, you can create smaller, more manageable CSS stylesheets that act as components.

Personally, I lose patience rather quickly when working with a long stylesheet, because it is usually:

• Inconvenient to edit the code — Ever had trouble finding the style for a particular class in a stylesheet that is 200 lines long? I get very tired of scrolling up and down and using Find to search for classes.
• Inconvenient to manage the designs — Besides just editing the CSS stylesheet, you also need to manage the design, ie, which pages use which styles. Trying to organize all your designs in a single stylesheet makes keeping track of which styles apply to which page designs difficult.
• More difficult to debug — First, debugging is much easier when you can more easily locate all the relevant code. Second, debugging is much easier when you can easily isolate parts of the code for debugging. With modular stylesheets you can remove the link to one or more stylesheets in order to narrow your focus and testing on smaller sections of the CSS code.

How to Think Modularization

Using modularization, you can divide the code for your various designs into component stylesheets that are easier to edit and manage. For example, rather than having all your CSS styles in long CSS file like:

• styles.css

You could modularize your code into multiple stylesheets like this:

• styles.css
• layout.css
• frontpage.css
• help.css

The way in which you modularize depends on each Web site's design needs and how much CSS code you need to manage. If all the code nicely fits in a single CSS file and is easy to manage, then there is no need to modularize. If you have many different table styles for displaying different types of content, then you might want just a tables.css file. It really depends on the needs of a particular Web site.

The whole idea to isolate code into sections that so you are dealing with smaller, manageable sections of code. Why have CSS that applies only the Forums section in a stylesheet used in the Support section? When you are working on Forums CSS styles, you should not have to wade through CSS for the Support section. Why scroll up and down a 200 line stylesheet looking for that one particular class? Why copy and paste sections of code from part of stylesheet to another part of the same stylesheet in an attempt to keep it organized? Just modularize your code into separate stylesheets.

Here are some common scenarios to give you ideas.

Scenario 1: Modularize by Site Design

When you modularize according to site design, you are dividing up the CSS code into one or more CSS stylesheets that would apply to certain sections of the Web site.

• styles.css — for most of your normal styles for fonts, color, etc.
• forums.css — just for the forums section of the site
• client.css — just for the client section of the site
• support.css — just for the support section of the site

Scenario 2: Modularize by Purpose

When you modularize according to purpose, you are dividing up the CSS code into one or more CSS stylesheets that define certain user-interface elements.

• layout.css — for your normal page layout styles, like columns, etc.
• tables.css — for tables that display content.
• text.css — for all text styles including heading, paragraphs, lists.

Scenario 3: Modularize by Language

When you modularize by language, you are creating different formatting styles for different languages, such as English and Japanese, which benefit from having their own set of margins, padding, fonts, line-heights, use of bold, etc.

• main.css — for all the layout and most of the styles such as color
• western.css — for Western languages such as English, Spanish, French, and German.
• eastern.css — for Eastern languages such as Chinese, Japanese, and Korean.

Scenario 4: Modularize by Technical Requirements

When you modularize by technical requirements, you are dividing up your CSS code hacks by categories such as Internet Explorer vs. Firefox and/or other technical requirements, such as a stylesheet just for printing.

• main.css — for all the layout and most of the styles such as color
• mozilla.css — just to support Mozilla-based browsers.
• ie.css — just to support Internet Explorer.
• print.css — just for print versions of your Web pages.

Scenario 5: Modularize by User Requirements

When you modularize by technical requirements, you are dividing up your CSS code hacks by categories such as Internet Explorer vs. Firefox.

• main.css — for all the layout and most of the styles such as color
• aural.css — just for speech synthesizers.
• large_text.css — just users who choose to have all text on the site enlarged.

Scenario 6: A Real-World Scenario

In a real-world scenario, you would probably have a mix of the above schemes.

• main.css — used to import most of the modular stylesheets needed across the site
• layout.css — for your normal page layout styles, like columns, etc.
• forums.css — just for the forums section of the site
• client.css — just for the client section of the site
• support.css — just for the support section of the site
• western.css — for Western languages such as English, Spanish, French, and German.
• eastern.css — for Eastern languages such as Chinese, Japanese, and Korean.
• large_text.css — just users who choose to have all text on the site enlarged, which might just apply to only Western text since I would not know how much larger to make asian characters.

Implementing Modularization

There are two methods to implement modular stylesheets: linking and importing.

Linking Stylesheets

Everyone who uses external stylesheets uses linking, but many people use only one stylesheet link. There is no reason you cannot use multiple links, like so:

 
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<link type="text/css" rel="stylesheet" href="css/layout.css" />
<link type="text/css" rel="stylesheet" href="css/frontpage.css" />

Importing Stylesheets

Importing stylesheets is not something everyone uses. I prefer importing over just linking. To use importing, you can use it directly in an HTML <style> tag, but then you might as well use link because import would be doing the same thing: including that stylesheet in the HTML page. In order to really take advantage of importing, you should import other stylesheets into a master stylesheet that is linked to the HTML page.

First link one stylesheet to the HTML page:

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

And then import the other stylesheets into the one linked to the HTML page. So in this example, import the other stylesheets into style.css:

 
/* Import the other stylesheets into main.css */
@import url("styles.css");
@import url("layout.css");

The main advantage of importing stylesheets is that updating stylesheet links is easier, because you update them in a singe CSS file that is imported rather than in every HTML page.

Concluding Examples

Now I will show you a more complete example of linking and importing stylesheets rather than just brief snippets.

HTML Page Links to Two Stylesheets

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
<link type="text/css" rel="stylesheet" href="css/docs.css" />
<title>Example</title>
</head>

Then main.css imports Two More Stylesheets and Also Defines Some Styles

 
/* Import the other stylesheets into main.css */
@import url("styles.css");
@import url("layout.css");
 
/* Now define some additional styles */
div.main-banner {border:none;width:600px;}
div.newsscroller {background-color:black;}