Web網站可用性的關鍵指標是速度，更確切地說，是頁面能以多快的速度出現在訪問者的浏覽器窗口裡。影響速度的因素有很多種，包括Web服務器的速度、訪問者的Internet連接情況，以及浏覽器必須下載的文件大小。盡管你無法控制服務器和連接的速度，但是你可以控制構成網站Web頁面的文件大小。
為了讓網站能夠更快，Web的建設者都會按常規地壓縮和優化網站上的每一個圖像文件，這常常使得為了將文件的大小減少幾個百分點而犧牲了圖像的質量。由於CSS樣式表是純文本文件，和圖像相比相對較小，所以Web建設者很少考慮采取措施減少其CSS樣式表文件的大小。但是，通過使用CSS縮寫以及其他的一些簡單技巧，你可以在很大程度上減少樣式表的大小。在我對自己樣式表的一次非正式的特別測試中，我把文件的大小降低了大約25-50%。
使用CSS的縮寫性質
CSS的縮寫性質(shorthand property)是一些專用的性質名，用來代替多個相關性質的集合。例如，間隙性質(padding property)是頂部間隙(padding-top)、右側間隙(padding-right)、底部間隙(padding-bottom)和左側間隙(padding-left)的縮寫。
使用速寫性質讓你能夠把多個性質/屬性對(property/attribute pair)壓縮進CSS樣式表的一行代碼裡。例如，想一想下面的代碼：
.sample1 {
margin-top: 15px;
margin-right: 20px;
margin-bottom: 12px;
margin-left: 24px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 8px;
border-top-width: thin;
border-top-style: solid;
border-top-color: #000000;
}
將它用一些縮寫性質來替代就能夠把代碼減少為下面這樣，兩者的實際效果是完全一樣的：
.sample1 {
margin: 15px 20px 12px 24px;
padding: 5px 10px 4px 8px;
border-top: thin solid #000000;
}
要注意，縮寫性質還有多個屬性，每一個(屬性)都對應一個被組合進入縮寫性質的常規性質。屬性由空白隔開。
當屬性是類似的值的時候，例如用於邊框空白性質(margin property)的線性測量的時候，接在縮寫性質之後的屬性的順序很重要。屬性的次序是從頂部(頂部的邊框空白)開始，然後圍繞格子(box)按順時針次序繼續。
如果縮寫性質的所有屬性都是相同的，那麼你可以簡單地列出單個屬性，然後在前面將它復制四遍。因此，下面的兩個性質是相等的：
margin: 5px 5px 5px 5px;
margin: 5px;
類似的，你可以使用接在邊框空白或者間隔性質之後的兩個屬性來代表頂部/底部和右側/左側屬性對。
margin: 5px 10px 5px 10px;
margin: 5px 10px;
屬性的順序在它們是不相似的值的時候是不重要的。因此，邊框顏色、邊框風格和邊框寬度等屬性可以以任何順序接在大綱性質(outline property)之後。忽略某個屬性等同於從樣式規則裡忽略掉對應的常規性質。
下面是CSS縮寫性質的列表以及它們所表示的常規性質。
Background(背景)：背景附件、背景顏色、背景圖像、背景位置、背景重復
Border(邊框)：邊框顏色、邊框風格、邊框寬度
border-bottom(底部邊框)：底部邊框顏色、底部邊框樣式、底部邊框寬度
border-left(左側邊框)：左側邊框顏色、左側邊框樣式、左側邊框寬度
border-right(右側邊框)：右側邊框顏色、右側邊框樣式、右側邊框寬度
border-top(頂部邊框)：頂部邊框顏色、頂部邊框樣式、頂部邊框寬度
cue(聲音提示)：前提示、後提示
font(字體)：字體、字號、字體樣式、字體粗細、字體變體、線高度、字體大小調整、字體拉伸
list-style(列表樣式)：列表樣式圖像、列表樣式位置、列表樣式類型
margin(空白)：頂部空白、右側空白、底部空白、左側空白
outline(大綱)：大綱顏色、大綱樣式、大綱寬度
padding(間隙)：頂部間隙、右側間隙、底部間隙、左側間隙
pause(暫停)：後暫停、前暫停
減少空白
減少CSS樣式表大小的另一種方法是從文檔裡刪掉大多數無用的空白。換句話說，將每條規則打破放進一行代碼裡，即把原來插入到代碼裡用來把每個性質/屬性分割到不同行的換行符和縮進符刪掉。
例如，下面的代碼示例在內容上相同，但是第二個要精煉得多：
h1 {
font-size: x-large;
font-weight: bold;
color: #FF0000;
}
h1 {font-size: x-large; font-weight: bold; color: #FF0000}
刪掉注釋
將注釋從你的CSS代碼裡刪掉是減少文件大小的另一種方式。盡管注釋對於代碼的閱讀很有用，但是它無助於浏覽器生成你的Web頁面。很多Web建設者都習慣給每一行代碼都加上注釋，或者至少給每一條規則聲明都加上。這樣的慷慨注釋在CSS樣式表裡是極少需要的，因為大多數CSS性質和屬性都很容易閱讀和理解。如果你對類、ID，以及其他的選擇器都使用有意義的名稱，你就可以省掉大多數的注釋，同時仍然能夠保持代碼的可讀性和可維護性。
h1 { /* Heading 1 style www.webjx.com */
font-size: x-large; /* x-large size */
font-weight: bold; /* Bold */
color: #FF0000; /* Red */
}
使用速寫性質、刪除無用的空白、省略注釋都能夠在很大程度上減少你CSS樣式表文件的大小。這反過來會對加速你Web網站速度的總體目標作出小的、但是可能會是顯而易見的貢獻。