今天，我要寫的是CSS檔案的模組化。
如果你看過CSS檔案，就會知道很難看懂它。每個CSS檔案有許多行，每一行就是一條命令，可以放在檔案的任何位置，都能夠同樣生效，而且後面的行隨時可以覆蓋前面的行的設定。所以，閱讀CSS檔案就好像猜謎一樣，必須努力將不同的線索拼起來，令人非常痛苦，這直接導致了日後難於維護和修改。
考慮到這一點，很早就有人提出了CSS檔案的模組化，就是將相關的設定都放在一起。一般來說，CSS中的設定可以分成下面幾個模組：
* typography（字型）
* colour（顏色）
* link（連結）
* forms（表單）
* layout（佈局）
* navigation（導航）
這些模組當然不是固定不變的，你可以根據自己的需要進行增刪。有時候，單單一個模組中就有許多行，這時候，你就可以把它獨立出來，作為一個單獨的CSS子檔案，然後在父檔案中進行呼叫。
比如，昨天的HTML模板中，呼叫CSS檔案是這樣寫的：
@import url(style.css);
在這裡，style.css就是父檔案，然後我們在其中呼叫子檔案：
/* typography styles */
@import url("typo.css");/* form elements */
@import url("forms.css");/* main layout */
@import url("layout.css");/* navigation */
@import url("horizontal-nav.css");/* colour scheme */
@import url("skin.css");
除了上面這些模組以外，CSS中有些設定是全域性性的，主要用於覆蓋瀏覽器的預設樣式，這被稱作CSS基準樣式。我們可以把基準樣式單獨做成一個base.css，將它也加入主樣式表。
/* basic styling */
@import url("base.css");
網上有很多別人已經寫好的CSS基準樣式，我下面採用的是Crucial Web Hosting提供的一份，我覺得寫得比較規範，內容也很充分。
/***** Global Settings *****/
html, body {
border:0;
margin:0;
padding:0;
}
body {
font:100%/1.25 Arial, Helvetica, sans-serif;
}
/***** Headings *****/
h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}
h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font-size:2em;
}
h2 {
padding:20px 0;
letter-spacing:-1px;
font-size:1.5em;
}
h3 {
font-size:1em;
font-weight:bold;
}
/***** Common Formatting *****/
p, ul, ol {
margin:0;
padding:0 0 1.25em 0;
}
ul, ol {
padding:0 0 1.25em 2.5em;
}
blockquote {
margin:1.25em;
padding:1.25em 1.25em 0 1.25em;
}
small {
font-size:0.85em;
}
img {
border:0;
}
sup {
position:relative;
bottom:0.3em;
vertical-align:baseline;
}
sub {
position:relative;
bottom:-0.2em;
vertical-align:baseline;
}
acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}
/***** Links *****/
a,
a:link,
a:visited,
a:hover {
text-decoration:underline;
}
/***** Forms *****/
form {
margin:0;
padding:0;
display:inline;
}
input, select, textarea {
font:1em Arial, Helvetica, sans-serif;
}
textarea {
width:100%;
line-height:1.25;
}
label {
cursor:pointer;
}
/***** Tables *****/
table {
border:0;
margin:0 0 1.25em 0;
padding:0;
}
table tr td {
padding:2px;
}
/***** Wrapper *****/
#wrap {
width:960px;
margin:0 auto;
}
/***** Global Classes *****/
.clear { clear:both; }
.float-left { float:left; }
.float-right { float:right; }
.text-left { text-align:left; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.text-justify { text-align:justify; }
.bold { font-weight:bold; }
.italic { font-style:italic; }
.underline { border-bottom:1px solid; }
.highlight { background:#ffc; }
.wrap { width:960px;margin:0 auto; }
.img-left { float:left;margin:4px 10px 4px 0; }
.img-right { float:right;margin:4px 0 4px 10px; }
.nopadding { padding:0; }
.noindent { margin-left:0;padding-left:0; }
.nobullet { list-style:none;list-style-image:none; }
有了HTML模板和CSS基準樣式以後，最後就剩下一個頁面佈局的問題了，這將是我明天要寫的內容。
（完）