【IT168 技術文檔】背景
Meta CSS是一個很簡單的CSS框架。
在深入介紹之前，我們來考慮幾個web開發者非常容易遇到的問題：
同樣的一個款式的按鈕，有些頁面它要在左邊，但是有些頁面要在右邊
同樣作用的一段提示文字，有些地方字體要大號，有些卻要小號
同樣風格的一段文字，有些要紅色，有些卻要綠色
這樣的狀況是相當頻繁的。對此，通常有4種解決方法：
1.每種不同款式，定義一個css。按鈕A一個css，按鈕B雖然長得跟A一樣，但是在右邊，那就copy下A的css代碼，然後改成在右邊。
a{/* 很多樣式定義 */}
.b{/* 很多樣式定義 */ text-align:center;}
.c{/* 很多樣式定義 */ text-align:right;}
<div class="a">按鈕A</div>
<div class="b">按鈕B</div>
<div class="c">按鈕C</div>
2.針對不同地方，利用css層級覆蓋來實現。比如按鈕A設定css，然後對於特別的頁面，設定特別的css來覆蓋
.a{/* 很多樣式定義 */}
#s1 .a{text-align:center;}
#s2 .a{text-align:right;}
<div class="a">按鈕A</div>
<div id="s1"><div class="a">按鈕B</div></div>
<div id="s2"><div class="a">按鈕C</div></div>
3.利用css組合來實現。如上面的代碼片段，設定css基礎類，然後進行組合。對於按鈕A，它的class為x，在右邊的按鈕B，它的class為x tar，對於B來說，它的樣式就是x與tar組合起來的。
a{/* 很多樣式定義 */}
.tac{text-align:center;}
.tar{text-align:right;}
<div class="a">按鈕A</div>
<div class="a tac">按鈕B</div>
<div class="a tar">按鈕C</div>
4.直接內嵌style來解決。
.a{/* 很多樣式定義 */}
<div class="a">按鈕A</div>
<div class="a" style="text-align:center">按鈕B</div>
<div class="a" style="text-align:right">按鈕C</div>
再來分析下4種方式各自的優缺點：
1.每種不同款式，定義一個css。隨著代碼量變大，css將會變得越來越難維護。當你需要修改一個按鈕風格的時候，所有同樣風格的按鈕都要改過。你copy到那裡，哪裡就得改，很容易遺漏。並且代碼量也會相對更大，很多可重複利用的資源沒有利用起來。
2.利用css層級覆蓋來實現。利用css選擇符的優先級來覆蓋是很好的做法，也是很常用的做法。不過在很多情況下，例如大量的動態頁面，我們沒有辦法完全預知定義的css的id或者類名，而無法定義特別樣式。在一些可以控制的情況下，定義太多特殊類名用來區分，又會造成大量後期維護的困難。
3.良好的運用css組合方式，可以比較妥善的解決上面的2個問題。首先，公用樣式都被提取了，你修改一個按鈕，只需要改公共的部分。其次，不需要絞 盡腦汁去想一個不會衝突的css類名，遵循組合的規則就可以了。當然，這種方法也有缺點，較為複雜的組合需要代碼作者自己熟悉覆蓋的規則，在css代碼裡 面並不知道html頁面拿哪一些規則拿來進行組合，修改一個規則可能導致調用css的地方出問題。
4.內嵌style優點就是簡單快速。缺點也很明顯，不僅寫起來有點麻煩，代碼也難看，維護性也不好。很重要的一點，到處都是style會讓人BS的，覺得你這前端div+css用得也忒不好了。所以代碼潔癖的人往往寧可定義一個新樣式，也不願意頁面有一個style。
我們來看看一些大型站點是如何來解決這個問題的：
/* 一段摘抄自開心網kaixin001.com的css代碼 */
.l{float:left;}.r{float:right; clear:right;}.c{clear:both;}
.tal{text-align:left;}.tar{text-align:right;}.tac{text-align:center;}
.c0,a.c0{color: #000; font-family:Arial;}
.c6,a.c6{color:#666; font-family:Arial;
/* 一段摘抄自163.com的css代碼 */
/* Font */
.fB {font-weight: bold;}
.f12px{ font-size:12px;}
/* Other */
.left{ float: left;}
.right{ float: right;}
.clear{ clear: both; font-size:1px; width:1px; height:0; visibility: hidden; }
.clearfix:after{content:"."; display:block; height: 0; clear: both; visibility: hidden;} /* only FF */
.hidden {display: none;}
.blank3{ height:3px; clear:both;display:block; font-size:1px;overflow:hidden;}
Meta CSS框架，就是為了滿足這樣的一個需求而設計的一個框架。
Meta CSS框架的實現參考了不少大型站點的css代碼，分析代碼裡的共性而總結出來的，該框架可以整合yui css框架或者blueprints框架來使用。它的作用在於以一個明確的命名規則，提供一個通用的css類集。正如這個框架的名字Meta，它規劃出最小的最通用的"元定義"。可以與目前了解的各類css框架共存。
框架的意義，其實就是提供一個良好的可遵循的規範以及底層功能，規範代碼的開發，提高開發的效率。Meta CSS也是遵循這樣的一個理念，先來看一個Meta CSS框架的代碼片段：
/* Font */
.fwb {
font-weight: bold;
}
.fwn{
font-weight: normal;
}
.tdn{
text-decoration: none;
}
.tdu{
text-decoration: underline;
}
.tdl{
text-decoration: line-through;
}
.fs10p{
font-size: 10px;
}
.fs11p{
font-size: 11px;
}
Meta CSS框架的命名規則
Meta CSS框架提供了一個簡單而有規律的命名。
規則1：非定義尺寸的css定義，以css屬性名的首字母+屬性值的首字母組合而成。例如：font-weight:bold，css類名就是fwb。text-align:center，css類名就是tac。float:left，css類名就是fl。
規則2：定義尺寸的css，以css屬性名的首字母+屬性值+屬性值單位的首字母。例如font-size:10px，css類名就是fs10p。border:1px solid #cccccc; css類名為b1sc。特別的，%的數值，採用percent的首2個字母pe。
規則3：多個屬性的定義，命名參考規則1與規則2，中間用-連接。例如font-size:10px,font-weight:bold。css類名就是fs10p-fwb。
為什麼要這樣定義呢?有些人可能比較偏好開心網的，極致簡單的，float:left，css類名是l，float:right，css類名就是 r，非常簡單。簡單是非常簡單，但是問題在於這樣的定義顯得很隨意，沒有規則。假設它定義的font-weight:bold的css類名是fb，那麼新的開發者一定要去看代碼才知道定義的名稱叫fb，它沒辦法通過一個明確的規則來知道想要的屬性是什麼名稱，有時候他還會很乾脆的另外定義一個。
而我們規定的這個命名規則，如果想要左浮動，就可以馬上得知是：fl。font-weight:bold，可以馬上知道是fwb，毫無疑惑。敏捷開發的一個很重要的思想，就是約定勝於配置，meta css框架中很多css類名看起來很不優雅，甚至顯得怪異，但是只要所有協同開發者了解這個約定，就可以大大減少記憶的工作量，所有的開發者都可以輕鬆的記住它。
Meta CSS框架的組成
對照w3c的手冊，Meta CSS將css定義分成了幾個部分，分別是：font字體，text文本，background背景，position位置，dimension元素尺寸，layout布局，margin外邊距，border邊框，padding內邊距，other其他以及combine聯合定義。
這裡概況下各個部分的定義：
font字體：定義了font-weight，text-decoration，font-size，color。
text文本：定義了text-align，text-indent
background背景：定義了background-color
position位置：定義了z-index
dimension元素尺寸：定義了width，height
layout布局：定義了float，overflow，display。特別的，有一個額外定義的css類c，可以在多瀏覽器環境下實現清除浮動。常常可以在一些css代碼中見到，常常也命名為clearfix。
margin外邊距：定義margin
border邊框：定義了border
padding內邊距：定義了padding
other其他：定義了cursor
combine聯合定義：用戶自行擴展定義。聯合定義規定了多個屬性的定義方法，比如font-weight加上font-size，定義的css類名為fs10p-fwb。
Meta CSS框架擴展與裁減
Meta CSS說白了本質上就是一個css文件而已，要進行改動是一件很容易的事情，任何開發者都可以隨意的往這個css文件裡面添加或者刪除任意屬性與定義。隨意的添加或刪除當然不是我們希望看到的結果，遵循框架的約定進行增刪改，才是真正意義上的擴展與裁減。
注意：根據你自己的項目，對Meta CSS進行擴展與裁減是非常正常的也是很有必要的。
擴展Meta CSS的方式很簡單，就是遵循命名規則，添加新的css類定義。假設你要增加一個margin是20px的定義，默認框架中是margin:10px，你就可以添加一個m20p的css類就可以了。具體可以查看Meta CSS文件中的注釋。
裁減Meta CSS同樣簡單，刪除文件中你確實不需要用到的屬性就可以了。大部分時候，默認的一些字體，內外邊距之類的定義往往不一定符合你的需求。
Meta CSS 使用方法
從語法上，你當然可以通過class="fwb tar mr10p pt20p"來創建一個加粗的，右對齊的，右內邊距10px，上外邊距20px的元素，但是從框架本身的意義來說，這不是最佳的適用環境。Meta CSS框架適用的環境是：
的確是單一屬性的定義。例如只是，加粗一個元素。
對某一個css定義給出特殊情況的補充。參考開頭部分提到的例子3。
代碼中使用的範例：
<style type="text/css">
.fwb{
font-weight:bold;
}
.tar{
text-align:right;
}
.div1{
border:1px solid #ccc;
padding:15px;
color:green;
width:200px;
margin-bottom:20px;
}
</style>
<div id="d1">
第一個div
</div>
<div id="d2">
第二個div，字體加粗
</div>
<div id="d3">
第三個div，右對齊
</div>
基本使用方法：下載metacss文件，放到你的css文件夾中，可以採用形如
<link rel="stylesheet" href="css/metacss.css" type="text/css" media="screen">
這樣的css引用語句。你可以將metacss中所有的css定義copy到你的css文件中合併到一起，所有的css文件可以怎麼做，你都可以怎麼做。
Meta CSS框架的局限性
css優先級的影響，你不能保證定義總會生效，如果之前的css類已經包含某些要覆蓋的定義，則有可能因為優先級的關係，不能生效。我們稍微修改下上面的例子：
<style type="text/css">
.fwb{
font-weight:bold;
}
.tar{
text-align:right;
}
.div1{
border:1px solid #ccc;
padding:15px;
color:green;
width:200px;
margin-bottom:20px;
text-align:left; /* 更高優先級，無法被tar覆蓋 */
}
</style>
<div id="d1">
第一個div
</div>
<div id="d2">
第二個div，字體加粗
</div>
<div id="d3">
第三個div，預期右對齊，但是事實上不會生效。
</div>
像這個例子裡，.div1的text-align有比tar更高的優先級，所以用css組合這種方式就會不起作用。所以在應用框架的時候需要注意這一點。關於css優先級的討論超出本文的範圍，可以自己google一番。