2xup

Division management of CSS

お好みの言語が英語で無い場合は、日本語でどうぞ。

In this PDF file, the order of the set format rule and property's appearing was announced. This time, the method of separately managing the CSS file used on the site is announced.

Why is CSS divided?

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

style-arch.pngWhen 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

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" />

I will share XHTML and CSS based on this guideline. And, it will obtain feedback from you, and become better.