Division management of CSS

Why is CSS divided?

I think that most reasons are the improvements of the work efficiency.

• The access to the revision part becomes early
• They are combined and correspond to various styles

When succeeding in the division of the CSS file and making, it means the completion of an original CSS library. And, it is like a base station of a strong union robot!!

CSS division management example

• common/
  • css/
    • themes/
      • elephant/
        • theme-elephant.css
        • images/
    • common.css
    • modules.css
    • fonts.css
    • layouts/
      • one-column.css
      • two-column-right.css
      • two-column-left.css
      • three-column.css
      • three-column-right.css
      • three-column-left.css
    • alternate/
      • print.css
      • mobile.css
      • no-style.css
      • outline.css
      • zoom.css

It explains the outline of each directory and the CSS file.

themes/

themes directory stores CSS and the image that takes charge of the decoration.

common.css

common.css takes charge of reset of the browser style and it takes charge of an original style definition.

modules.css

modules.css modulates the style frequently used, and manages the module.

fonts.css

fonts.css takes charge of the specification of the font family of the entire fontsize and a specific element. I will learn from Yahoo! UI Library の Fonts CSS and make fonts.css.

layouts/

A directory is a directory that manages the CSS file in which only layout information is defined. I have aimed to achieve two or more layouts with one HTML file. To achieve it, it divides like this.

alternate/

alternate directory is a directory that stores alternate stylesheet such as print.css and mobile.css.

How do you import to HTML?

<link type="text/css" rel="stylesheet" media="screen" href="/common/css/default.css" />
<link type="text/css" rel="stylesheet" media="screen" href="/common/css/layouts/two-column-right.css" />
<link type="text/css" rel="stylesheet" media="print" href="/common/css/alternate/print.css" title="Print Stylesheet" />
<link type="text/css" rel="stylesheet" media="tty,handheld" href="/common/css/alternate/mobile.css" title="mobile Stylesheet" />
<link type="text/css" rel="alternate stylesheet" rev="zoom" media="screen" href="/common/css/alternate/zoom.css" title="Zoom Layout" />

default.css reads common.css, module.css, fonts.css and theme style.

@charset "utf-8";

@import url("common.css"); /* common stylesheet */
@import url("modules.css"); /* modules stylesheet */
@import url("fonts.css"); /* font stylesheet */

/* theme stylesheeet */
@import url("theme/elephant/theme-elephant.css");

To change the theme, it only has to add an easy change to default.css. And to change the layout, CSS that defines the layout is selected and it import. If some alternate stylesheet is unnecessary, it is possible to import a little more simply.

<link type="text/css" rel="stylesheet" media="screen" href="/common/css/default.css" />
<link type="text/css" rel="stylesheet" media="screen" href="/common/css/layouts/two-column-right.css" />