如何讓 CSS 代碼簡潔而易于編寫？這恐怕是許多開發(fā)者都關(guān)心的問題。我想，大概沒有什么魔法，可以保證一下就把你的樣式表縮小到百分之多少，但合理的 CSS 編碼與組織技巧，的確能夠幫助你的更有效率地寫出更清楚高效的代碼，自然，樣式表大小的縮減還能減少下載的時(shí)間。

組織你的樣式表

　　盡管我們有種種 CSS 的開發(fā)工具，比如 TopStyle，比如 StyleMaster，它們可以讓你對(duì)當(dāng)前這個(gè)樣式表里面定義了哪些規(guī)則，涉及哪些 class，哪些 ID 一目了然，但這不等于說你的樣式表就組織清楚了，隨寫，隨看，隨改大概是我們常用的開發(fā)方式，一開始樣式表還有點(diǎn)層次，后面這里加一點(diǎn)，那里加一點(diǎn)，就越來越亂了。所以不妨考慮規(guī)范一下你的寫作方式。

　　大概有兩種組織方式，一種是我們常用的，把所有的描述同一個(gè)元素 (和它的子元素) 的規(guī)則都放到一起來，那么假如需要查閱頁面中某個(gè)元素究竟受哪些規(guī)則影響的時(shí)候，就不必在整個(gè)樣式表中翻來翻去了。

　　另一種也值得參考，即，把描述某些特性的規(guī)則放到一處，把描述另一些特性的放到另一處，比如說關(guān)于顏色的定義，放到 color.css 文件中，描述字體的定義，放到 font.css 中，描述布局的定義，放到 layout.css 中，這也能讓你的樣式表結(jié)構(gòu)清楚，方便理解。最大的優(yōu)點(diǎn)是，假如你希望換一套配色方案，可以只修改一下 color.css，完全不必?fù)?dān)心其他的規(guī)則是否會(huì)影響頁面的顏色。

　　在傳統(tǒng)的程序設(shè)計(jì)中，我們經(jīng)常提到程序的風(fēng)格是如何重要，培養(yǎng)良好的編碼風(fēng)格甚至遠(yuǎn)比把握程序的語法和語義重要，盡管 Web 設(shè)計(jì)者不一定要把握那些程序設(shè)計(jì)的技巧，但培養(yǎng)良好的 CSS 編寫風(fēng)格的確是很有用的。

使用屬性縮寫

　　屬性縮寫的介紹可以參考MB5U.com上的其它相關(guān)文章，這里我們來小結(jié)一下：
　　首先，有這么幾個(gè)常用的屬性縮寫：


　　多數(shù)是可以把幾個(gè)常規(guī)屬性合并到一起使用的，也就是說，可以給這些簡記屬性賦予好幾個(gè)值，每個(gè)值之間用空格分隔。
　　第三，margin, border 和 padding 都遵循中順時(shí)針原則，假如給定了四個(gè)值，從上方開始每次順時(shí)針轉(zhuǎn) 90 度。
　　假如給定了三個(gè)值，則是上側(cè)一種，左右同一種，下側(cè)一種。
　　假如給定了兩個(gè)值，就是上下一種，左右一種。
　　假如只給了一個(gè)值，那就是都一樣。
　　簡記屬性（屬性縮寫）的使用，見仁見智，一方面，它的確是可以大大縮短代碼 (假如用得頻繁的話)，另一方面，修改的時(shí)候又未免帶來不直觀和不方便。

利用繼續(xù)和默認(rèn)值

　　同樣參見 書寫高效的 CSS 中的相關(guān)章節(jié)，我想，這也得斟酌使用，首先，繼續(xù)和默認(rèn)值在 W3C 標(biāo)準(zhǔn)中都沒有嚴(yán)格 (must) 的規(guī)定 (BTW, 就算有又如何呢？)，瀏覽器未必真的會(huì)像你預(yù)期的那樣去實(shí)現(xiàn)，某些屬性的默認(rèn)值真的是 0 么？在所有瀏覽器里都是 0 么？需要反復(fù)嘗試后總結(jié)經(jīng)驗(yàn)；再者，假如代碼中含有過多的這樣的“隱喻”，就未免不大好讀了，某某元素會(huì)顯示出某某特性，乃是繼續(xù)自它的父元素……在編寫樣式表的當(dāng)天你可能還清楚，過一段時(shí)間忘了，就會(huì)很希奇為什么不曾定義這個(gè)規(guī)則卻又顯現(xiàn)出那個(gè)特性了。
　　所以建議，假如你要用到繼續(xù)和默認(rèn)值來簡化代碼的話，最好寫下一些注釋予以說明。

利用多個(gè) class 和多元選擇符

　　一個(gè) HTML 元素可以屬于多個(gè)類，比如這樣：


　　你可以給“合總”的那些表格欄設(shè)定一個(gè)樣式，再給包含負(fù)數(shù)的那些表格欄設(shè)定一個(gè)樣式，把它們疊加在上面：


　　這種特性有時(shí)能夠讓你很靈巧地實(shí)現(xiàn)一些功能，即縮短了 HTML 代碼，又清楚了 CSS 規(guī)則。
　　關(guān)于多個(gè) class 的具體說明 (包括選擇符的兼容性測試..) 請(qǐng)參考MB5U.com的相關(guān)文章介紹。

小結(jié)

　　選擇一種 CSS 規(guī)則的組織方式，并堅(jiān)持使用它！
　　謹(jǐn)慎地使用一些雖然能夠簡短代碼，但會(huì)影響可讀性的書寫方式！
　　適時(shí)地了解一些已經(jīng)普遍實(shí)現(xiàn)的 CSS2 新特性，能夠大大方便你的設(shè)計(jì)！