【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。