【IT168 技术文档】背景

　　Meta CSS是一个很简单的CSS框架。

　　在深入介绍之前，我们来考虑几个web开发者非常容易遇到的问题：

　　同样的一个款式的按钮，有些页面它要在左边，但是有些页面要在右边

　　同样作用的一段提示文字，有些地方字体要大号，有些却要小号

　　同样风格的一段文字，有些要红色，有些却要绿色

　　这样的状况是相当频繁的。对此，通常有4种解决方法：

　　1.每种不同款式，定义一个css。按钮A一个css，按钮B虽然长得跟A一样，但是在右边，那就copy下A的css代码，然后改成在右边。

 　　2.针对不同地方，利用css层级覆盖来实现。比如按钮A设定css，然后对于特别的页面，设定特别的css来覆盖

 　　3.利用css组合来实现。如上面的代码片段，设定css基础类，然后进行组合。对于按钮A，它的class为x，在右边的按钮B，它的class为x tar，对于B来说，它的样式就是x与tar组合起来的。

　　4.直接内嵌style来解决。

　　再来分析下4种方式各自的优缺点：

　　1.每种不同款式，定义一个css。随着代码量变大，css将会变得越来越难维护。当你需要修改一个按钮风格的时候，所有同样风格的按钮都要改过。你copy到那里，哪里就得改，很容易遗漏。并且代码量也会相对更大，很多可重复利用的资源没有利用起来。

　　2.利用css层级覆盖来实现。利用css选择符的优先级来覆盖是很好的做法，也是很常用的做法。不过在很多情况下，例如大量的动态页面，我们没有办法完全预知定义的css的id或者类名，而无法定义特别样式。在一些可以控制的情况下，定义太多特殊类名用来区分，又会造成大量后期维护的困难。

　　3.良好的运用css组合方式，可以比较妥善的解决上面的2个问题。首先，公用样式都被提取了，你修改一个按钮，只需要改公共的部分。其次，不需要绞 尽脑汁去想一个不会冲突的css类名，遵循组合的规则就可以了。当然，这种方法也有缺点，较为复杂的组合需要代码作者自己熟悉覆盖的规则，在css代码里 面并不知道html页面拿哪一些规则拿来进行组合，修改一个规则可能导致调用css的地方出问题。

　　4.内嵌style优点就是简单快速。缺点也很明显，不仅写起来有点麻烦，代码也难看，维护性也不好。很重要的一点，到处都是style会让人BS的，觉得你这前端div+css用得也忒不好了。所以代码洁癖的人往往宁可定义一个新样式，也不愿意页面有一个style。

　　我们来看看一些大型站点是如何来解决这个问题的：

　　Meta CSS框架，就是为了满足这样的一个需求而设计的一个框架。

　　Meta CSS框架的实现参考了不少大型站点的css代码，分析代码里的共性而总结出来的，该框架可以整合yui css框架或者blueprints框架来使用。它的作用在于以一个明确的命名规则，提供一个通用的css类集。正如这个框架的名字Meta，它规划出最小的最通用的"元定义"。可以与目前了解的各类css框架共存。

　　框架的意义，其实就是提供一个良好的可遵循的规范以及底层功能，规范代码的开发，提高开发的效率。Meta CSS也是遵循这样的一个理念，先来看一个Meta CSS框架的代码片段：

　　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联合定义。

　　这里概况下各个部分的定义：

　　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框架适用的环境是：

　　的确是单一属性的定义。例如只是 class="fwb"，加粗一个元素。

　　对某一个css定义给出特殊情况的补充。参考开头部分提到的例子3。

　　代码中使用的范例：

　　基本使用方法：下载metacss文件，放到你的css文件夹中，可以采用形如

　　这样的css引用语句。你可以将metacss中所有的css定义copy到你的css文件中合并到一起，所有的css文件可以怎么做，你都可以怎么做。

　　Meta CSS框架的局限性

　　css优先级的影响，你不能保证定义总会生效，如果之前的css类已经包含某些要覆盖的定义，则有可能因为优先级的关系，不能生效。我们稍微修改下上面的例子：

　　　像这个例子里，.div1的text-align有比tar更高的优先级，所以用css组合这种方式就会不起作用。所以在应用框架的时候需要注意这一点。关于css优先级的讨论超出本文的范围，可以自己google一番。