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;}

经常做前端开发的童鞋自己的开发也经常有这样的做法，但是也许并没有总结跟提取。不了解前端开发的人可能就比较纳闷，就这样一大堆属性的css定义，有什么用啊？跟用style有什么区别吗？

?

从上面2份css代码中，我们可以看到前端设计师经常会提取一些只有一个属性的css类，用来做组合。以163的为例，它有一个left的类，是左浮动，开心网更简单，是l。如果一个按钮正常情况下是不浮动的，但是有些地方它要左浮动，就只要在元素的class上面加一个left或者l，通过这样的组合来达到目的。

?

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：非