Meta CSS框架发布，一个整合自开心网，163等大站的css定义集框架

(本文内容较多，论坛上格式较乱，推荐到原站点阅读http://www.fangyuqiang.com/metacss )

如果你对这个框架有兴趣，建议你应该阅读下下面的评论与回复，hax对Meta css提出了很深刻的批评与见解，也有我的一些观点与回复，我希望你在采用它之前，你应该知道它可以带给你什么。

 

背景

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：非定义尺寸的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联合定义。

 

具体的内容可以查看：metacss.css，这里概况下各个部分的定义：

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

1. 的确是单一属性的定义。例如只是 class="fwb"，加粗一个元素。
2. 对某一个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" class="div1">
	第一个div
</div>
<div id="d2" class="div1 fwb">
	第二个div，字体加粗
</div>
<div id="d3" class="div1 tar">
	第三个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" class="div1">
	第一个div
</div>
<div id="d2" class="div1 fwb">
	第二个div，字体加粗
</div>
<div id="d3" class="div1 tar">
	第三个div，预期右对齐，但是事实上不会生效。
</div>

 

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

 

来自：http://www.fangyuqiang.com/metacss

评论

26 楼 nodonkey 2010-06-05  

标记 回来再看

25 楼 playfish 2009-10-29  

bluemeteor 写道

<div class="quote_title">playfish 写道</div>
<div class="quote_div">

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

</div>
 

我认为这是最理想的解决方法，不必在乎别人是否鄙视，重要的是让代码看上去很清爽。同时坚信正确的业务理解和不懈的页面重构可以让这种方法替代其他的方法，class的名称应该向tag和id一样，目标是语义的最大化，让你的HTML代码成为一篇文档。

 

路程艰辛曲折，对于页面不能完全得理解，各种HACK的存在，一时的懒惰甚至性能优化都能轻易得让我们放弃对这种目标得追求。

 

有种看法是，完全的语义化根本不可能存在，.bold和.hidden类会永远存在，但是这不应该影响我们的初衷.

语义最大化的目标当然没错。不过事实上开头列出来的4种解决方案都是可用的，关键是看应用的上下文环境，不存在所谓的最理想的解决方案，这里是一定要纠正你的。

例如：
如果2个按钮以后可能往不同的方向去变化，用第一种方法最好。
特定页面显示特定的菜单，显然，第二种继承的方式最好。
第三种组合的例子，见上面的例子
style的应用，style当然不是不能用，假设你整个网站，就只有2，3个地方需要一个特殊的样式，再写一个css类放到css文件里面去，显然不是好方法。

24 楼 bluemeteor 2009-10-29  

<div class="quote_title">playfish 写道</div>
<div class="quote_div"><ol>
<li>利用css层级覆盖来实现。利用css选择符的优先级来覆盖是很好的做法，也是很常用的做法。不过在很多情况下，例如<strong>大量的动态页面，我们没有办法完全预知定义的css的id或者类名，而无法定义特别样式。在一些可以控制的情况下，定义太多特殊类名用来区分，又会造成大量后期维护的困难。</strong>
</li>
</ol></div>
<p> </p>
<p>我认为这是最理想的解决方法，不必在乎别人是否鄙视，重要的是让代码看上去很清爽。同时坚信正确的业务理解和不懈的页面重构可以让这种方法替代其他的方法，class的名称应该向tag和id一样，目标是语义的最大化，让你的HTML代码成为一篇文档。</p>
<p> </p>
<p>路程艰辛曲折，对于页面不能完全得理解，各种HACK的存在，一时的懒惰甚至性能优化都能轻易得让我们放弃对这种目标得追求。</p>
<p> </p>
<p>有种看法是，完全的语义化根本不可能存在，.bold和.hidden类会永远存在，但是这不应该影响我们的初衷.</p>

23 楼 ops2000 2009-10-24  

我看playfish通过Meta CSS能得到hax这么耐心的指点，值了。不过也幸亏playfish态度好。hax不应该总是一开始就打击开发者的热情，有热情比有知识更重要。总不能说每个人都得成为超级高手才能总结自己的经验吧。希望hax老大，经常能保持克制。哈哈

22 楼 让你笑了 2009-10-23  

按照肉包子所言，inline style“写起来有点麻烦，代码也难看，维护性也不好”，然而这些都不构成本质差别。或许最大的因素是“到处都是style会让人BS的，觉得你这前端div+css用得也忒不好了”。

快速开发、提取公用、补充其他CSS框架，其实都是废话，只要说，许多同学觉得这样方便，这一个理由就足够了。

支持这两句....

21 楼 whaosoft 2009-10-22  

看标题，不禁要下了看一下

20 楼 chenyu 2009-10-21  

简言之，使用起来就像一般人用 Word 排版的过程，手工设置各种排版细节。

当然更语义化的方法是在Word中通过样式和样式编辑器进行排版（类似传统的 Tex/Latex 排版方式），不过一般人不会用样式编辑器的。

yahoo，淘宝，大家都用它就说明有可取之处的，搞工程不是搞学术，不可能那么完美，多快好省才是硬道理。

有些不成熟想法，如果能再封装一个语义层（类似word样式编辑器）会不会更好？ 如何实现还没想，还得备明天课。。。

19 楼 hax 2009-10-21  

我们知道HTML和CSS是正交的。这意味着可以分离内容结构（html文档）与外观样式（stylesheet）。

尽管是分离，但是最终页面需要把两者结合起来。这个结合机制就是selector。在基本selector中，tag和id是天然语义化的。问题在于class。很多时候我们发现添加class只是为了为html文档增加一个钩子，通过这个钩子，我们可以对文档的这个部分应用样式。有时候我们可以很容易将这个钩子语义化，即作为tag语义的细化或者补充。但是有时候也会无法语义化，从而出现纯粹的样式类。

样式类，有三种典型原因。

第一是语义归纳能力不足或者语义化的动力不足。比如你可能很容易识别出交错背景色，并用.row-even和.row-odd来细化语义。但是你可能却不能想到交错浮动（一张图片左对齐，下一张图片右对齐，以此类推）。又如“同样风格的一段文字，有些要红色，有些却要绿色”。基本上颜色背后很可能暗藏着语义（比如两种不同的醒目标示），但是客户只告诉你，这里要红色，这里要绿色，他不会告诉你语义，就好像导演给女演员hotel的房间号但是通常不会明确告诉她要干啥，此乃潜规则。对此的解决之道，一是靠猜（看你对潜规则有多少经验），二是直接问导演你究竟想干嘛（当然需要点沟通技巧），三，对于一些你确定是ONS的（One occurreNce Style，一次性样式，也就是只适用于这个特殊页面的特殊部分），也可以考虑直接用inline style。

第二是缺乏对selector的认识。还是以交错对齐为例，img.odd/img.even与img.fl（float:left）/img.fr有什么区别？如果说前者就是语义化的，有些同志就不服气，因为你还是要返回去改html加上odd/even的钩子，而且它们貌似只是为了样式而存在。但是img:nth-of-type(2n+1){float:right} 和 img:nth-of-type(2n){float:left} 如何呢？高级selector的组合具有极强的描述能力。即使我们现在为兼容性仍然要用odd/even作为钩子，但是你确实知道这是一个高级selector的折中，而不是附加的样式缩写。

第三是CSS本身的不足。最典型的例子是layout。layout通常要用一组rules来设定，而且常牵涉复杂的hack。CSS本身缺乏高级布局能力，再加上布局本身的复杂性，所以我们有复用布局的需求。而布局所需的钩子就是预先设定的。虽然这些钩子仍然能被语义化（比如在多栏布局中不是写.top-bar、.left-col、.right-col，而可以写做.header、.main、.sidebar），但确实是由样式表预先决定了文档标签。对于这个问题，我们要承认CSS不是完美的，而且布局有其内在复杂性。除了接受这个不完美，以及等待它变得更完美之外，另一个方式是引入像lesscss那样的CSS预编译，来管理样式的复杂性。

总之样式类虽然不至于罪大恶极，但还是应该也可以尽量避免的。

18 楼 hax 2009-10-21  

对CSS进行增强是个有趣的话题，Bert Bos（CSS规范的主要编辑）有个著名的反对意见：Why “variables” in CSS are harmful

QuakeWang 写道

受限于CSS弱弱的语法格式，我觉得Meta CSS这种做法挺好的，喜欢其中提到约定大于配置的想法（因为我是Rails控，呵呵）
另外推荐一个做法，扩展CSS的语法：http://lesscss.org/，然后批处理转换成标准CSS，它除了实现组合定义（Mixins）外，还包括变量等其它CSS增强语法。

lesscss是个好主意，Bert Bos也不会反对，因为它工作在正确的层次上。事实上，也因为有了lesscss类似的预编译手段，Meta CSS更显得是个糟糕的主意。因为lesscss做的是对CSS进行更高层级的抽象，Meta CSS却反其道而行。

17 楼 hax 2009-10-21  

引用

r b或者是right bold这样的显然是比较随意的

虽然是我随手举的例子，但是这并不随意。真正完全以实用为导向的方式，是优先考虑使用者的习惯，而不是优先考虑规则和完备性。类似的理念请参考：Worse is better

如果认可GASiC是偏方，只是为了处理那些最常见的无语义的附加样式，那么就不应该首先考虑命名规则和完备性，而应该考虑哪些无语义的附加样式最为常见，以及那种命名最直接和方便。除了观察“大型网站”的做法之外，另一个方式是考虑html混杂样式的习惯。

所以，fwb不如fb。开发者为什么要记font-weight？又，fb不如bold。除了font可以bold之外，还有什么能bold？而bold又不如b，因为html就有b元素，而且bold是如此常用（当然这是一个假设，你可以否定它），分配一个单字母是值得的。

当然，没有命名规范，意味着某些事情需要斟酌，比如left或l表示text-align:left还是float:left？我的建议是参考html。所以我会设置为：
.l { text-align:left }
.r { text-align:right }
.center { text-align:center }
img.l { float:left }
img.r { float:right }
table.l { float:left }
table.r { float:right }
table.center { margin-left:auto; margin-right:auto; }

即使你要采用命名规范，也不必严格，而可以更宽松：
.b, .bold, .fb, .fwb { font-weight:bold }
.al, .align-left, .tal { text-align:left }
.fl, .fleft, .float-left { float:left }
.cl, .cleft, .clear-left { clear:left }
.\31 0px, .f10px, .fs10p { font-size:10px }
.\#333, .c3 { color:#333; }
.bg\#ccc, .bcc { background-color:#ccc; }


Warning：举上述例子，不代表我赞同偏方。

16 楼 playfish 2009-10-21  

hax 写道

你既然是css framework的拥戴者，就更应该谨慎使用framework这样的big word。还有，我还没有发表偶对css framework的详细观点，但是我说了至少有两点：

1. “要有CSS框架”的想法是有道理的。
2. 我也对所谓CSS框架持怀疑态度。

另外，不管我的观点看上去有多少自相矛盾，也不代表我反对在实践中使用某个CSS框架（我反对也没用，啊哈）。

另外，什么是framework，可以拿wikipeida条目Software framework来衡量，或者拿其他自称CSS framework的来横向比较。我说Meta CSS不是framework，绝不是嫌它太简单（其实我说了，就是以完全实用化的考量，它并不足够简单），而是Meta CSS既不符合software framework的一般定义，也没有做其他CSS framework做的事情（我就拿Elements来说，它就是预定义的样式和class，或许还包含了一些组织文件的惯例）。

对我个人来说，是否叫framework是一个次要的问题。但是对其他人未必。我给出的三条，其实意思是一致的。如果你认为讨论是否该叫framework是跑题了，那你可以倒序阅读这三条。

说的直白点，从framework到Meta CSS的名字到文档的叙述，完全可以类比一个保健品广告。尽管你自己知道“css不应该是这样用的，并且，这并不能提高可维护性”，但是你的文档并没有提及这一点。对于Meta CSS的适用范围你有所提及，但是它更像是搪塞乱吃偏方消费者的借口。

嗯，是的。。文档方面没有更具体的说明偏方的副作用，不过我并没刻意隐瞒meta css本身的缺陷，只是文档的遗漏，刚发布还有待完善，本身的不足以及真正解决问题的最佳实践，我会后续继续补充。

谢谢hax这么用心的批评指正，让我受益匪浅。

ps：早之前关于IE的渲染bug问题得到过你的指点，着实很深刻，直指本质，之后再碰到类似状况都可以轻松解决，这里也一起表示下我的谢意。。

15 楼 hax 2009-10-21  

像我前面建议的GASiC的名字所指的，Meta CSS的核心思想就是利用class来缩写inline style，为什么不痛痛快快的把话说明白？快速开发、提取公用、补充其他CSS框架，其实都是废话，只要说，许多同学觉得这样方便，这一个理由就足够了。

至于说btn fr是符合语义化的，那style="float:right"是不是语义化的呢？如果后者不是语义化的，难道一缩写就语义化了？

问题其实都说过了，如果是样式为中心的行为模式（比如外包网页制作），那么确实存在这样的情形：客户的需求本身就是针对样式，而不是针对语义的（这个地方就是要左对齐，那个地方就是要右对齐）。Ok，我们满足他们，但我们用不着因此就修改字典吧。

14 楼 hax 2009-10-21  

你既然是css framework的拥戴者，就更应该谨慎使用framework这样的big word。还有，我还没有发表偶对css framework的详细观点，但是我说了至少有两点：

1. “要有CSS框架”的想法是有道理的。
2. 我也对所谓CSS框架持怀疑态度。

另外，不管我的观点看上去有多少自相矛盾，也不代表我反对在实践中使用某个CSS框架（我反对也没用，啊哈）。

另外，什么是framework，可以拿wikipeida条目Software framework来衡量，或者拿其他自称CSS framework的来横向比较。我说Meta CSS不是framework，绝不是嫌它太简单（其实我说了，就是以完全实用化的考量，它并不足够简单），而是Meta CSS既不符合software framework的一般定义，也没有做其他CSS framework做的事情（我就拿Elements来说，它就是预定义的样式和class，或许还包含了一些组织文件的惯例）。

对我个人来说，是否叫framework是一个次要的问题。但是对其他人未必。我给出的三条，其实意思是一致的。如果你认为讨论是否该叫framework是跑题了，那你可以倒序阅读这三条。

说的直白点，从framework到Meta CSS的名字到文档的叙述，完全可以类比一个保健品广告。尽管你自己知道“css不应该是这样用的，并且，这并不能提高可维护性”，但是你的文档并没有提及这一点。对于Meta CSS的适用范围你有所提及，但是它更像是搪塞乱吃偏方消费者的借口。

13 楼 playfish 2009-10-21  

hax 写道

关于Meta CSS的价值我想再多几句嘴。

Meta CSS的价值可以用“偏方”两个字概括。偏方当然也是有价值的，但是有几点需要注意的：

1. 偏方就是一个方子（guideline），不是某某治疗法（framework）
2. 偏方的名字应该是褪黑激素（GASiC = The Guideline of Abbreviating Style in Class）而不是脑白金（Meta CSS Framework）
3. 偏方是处方药，而不是超市里随处可买。并且说明书应该声明这一点，并附上适用范围和副作用。

另外，即使在这些前提下，Meta CSS也没有充分贯彻猫论的精髓。比如，比起class="tar fwb fs11p"，显然，class="r b 11px"或者class="right bold font-11px"更直白、更容易使用及维护。

偏方的价值在于好用，而不在于好看。严谨的命名规范和完整性并不提升偏方的价值。

呃。。hax不认同的是我将Meta CSS这样一些简单的css组合称之为framework吧。我觉得如果再讨论framework是什么的话就有点跑题，我将这个偏方称之为framework的是因为我认为的framework就是提供一套规则，一个可以共同遵循的开发规范，即可称之为framework，可能我对于框架概念的理解还太肤浅,也有可能是受了早期的css框架Elements：http://elements.projectdesigns.org/index.html的影响,觉得一套规范即可称框架。

至于适用范围与副作用，局限性，扩展性我已经提供了如上尽量详细的文档说明了。

最后的几句，我是完全不认同的。Meta CSS的最大价值就在于命名规范跟完整性。你或许再看看文档提到的命名规范，它是一个非常容易理解，几乎不需要记忆的规范，一个可以快速上手的规则。这是最精心考虑的地方。r b或者是right bold这样的显然是比较随意的，就是开心网这些网站采用的无规律的命名，meta css的价值在于将这些命名规范化了。

12 楼 playfish 2009-10-21  

hax 写道

全文见http://hax.iteye.com/blog/497338

引用

说实话，在“大型网站”里看到class="left"这样的代码，完全可以理解。越是商业网站，越可能需要在有限资源下做出折中或妥协，因为make it work是第一位的。既然do business难免要do evil，那么降低犯罪成本、提高犯罪效率就是硬道理——尤其对于通常总疲于奔命应对产品部、设计部、业务部、技术部、客服部……外加什么都懂的boss 的前端开发小兵来说。Meta CSS的贡献是把这些罪行（我觉得“行”读做“性”比较有力量）提炼萃取，并正当化、规范化，从而给我们一个anti-pattern的活标本。……显而易见，Meta CSS反映了以样式为中心的行为模式，而所谓“正确”行为模式，则是以语义为中心。……从某种意义上说，如果设计者本身就不关心是什么而只关心看起来啥样，那么实现者采用以样式为中心的行为模式也是很正常的。不过我很反感拿这个做借口，正如历史学不能代替伦理学，犯罪学研究不能用做纵容犯罪的理由。必须区分真正的现实主义和看似有理实则荒谬绝伦的白猫黑猫论。……既然认定Meta CSS是一个anti-pattern，那么也应该给出解决的方法（称之为重构之道？）。其实Meta CSS的原文提出过4个方式，结合使用方式2（层叠）、3（class组合），正是CSS设计的一般方式。唯一需要指出的是，html与css的结合点，即selector，总应该是语义化的。tag和id天然就是语义化的，主要问题出在class上。应该尽量限制所谓的样式类，虽然有时无可避免（正如有时你会用inline style），但是至少不要像Meta CSS那样把偏方当补药。

谢谢hax详细的分析。我很认真的阅读了几遍，并给了第一个顶。

是的，我完全认可你提到的关于meta css是一个为了make it work的产品。事实上，这个我称之为框架的东西，也是我自己不停的做页面开发时候形成的一个产物。接到一个网页设计的单子的时候，一般来说客户要求你1-2个星期就完成整个项目设计，期间还需要不停的与客户交流设计。这种情况下，如何快速开发迭代，并提供一个可交付的产物就是最现实的问题。这也是出现meta css的一个原动力，我希望提取更多公用的东西，并应用到更多的项目，yui css跟blueprints，都很丰满很完整，但是还不够。

引用

说到底，如果你确信那些网页两年内不会有什么修改，或者在两周之后就会彻底重做，那你完全可以用FrontPage来制作

如果是认为应用meta css这样的模式会导致网页不可维护，我觉得这个有点太夸张了一些。关于维护与修改，我认为现实场景中，真的不修改html而要完全改变样式不是总能那么美好的，你还是往往需要去修改html模板，至少要加上一些另外的css类名。一次改版可能整个html都重写了。网页本身引用类似meta css这样的定义又不会很多。除非是像文档中提到的反例来做：

引用

从语法上，你当然可以通过class="fwb tar mr10p pt20p"来创建一个加粗的，右对齐的，右内边距10px，上外边距20px的元素，但是从框架本身的意义来说，这不是最佳的适用环境

前面的回复，我也提到了一点，就是在适用的范围内，meta css的用法不能称之为错误。背景中假设的场景，同样样式的按钮，一个左边，一个在右边，我用btn表示普通样式按钮，用btn fr的组合表示这是一个普通按钮，但是它是右浮动的，我认为这样的写法也是符合语义化的，并且也很直观。

引用

关于所谓CSS框架，正淳有一篇文章可资参考，除了阅读正文外，你也应该读一下以下几个人的comments：Realazy、Leechael、爆牙齿（这个名字让我邪念丛生……）。如这些评论者一样，基本上我也对所谓CSS框架持怀疑态度。但是我又有一些其他想法，主要是样式的复用问题。也许可以做为下一篇blog的主题。

嗯，taobao UED的博客我一向也很关注。hax提到的几个Realazy，JunChen的comments我也仔细看了下。关于css框架，我的观点与你不同。我认为采用css框架是非常好的做法。如果你尝试用yui css或者blueprints这些css框架来做页面，或者是淘宝的DPLhttp://assets.taobaocdn.com/tbra/dpl/，就会发现开发效率几乎是成倍的提高。布局变换，维护性，也都是可以得到极大的提升。包括团队协作也是，大家采用一致的布局技巧，可以减少很多折腾。

11 楼 hax 2009-10-21  

关于Meta CSS的价值我想再多几句嘴。

Meta CSS的价值可以用“偏方”两个字概括。偏方当然也是有价值的，但是有几点需要注意的：

1. 偏方就是一个方子（guideline），不是某某治疗法（framework）
2. 偏方的名字应该是褪黑激素（GASiC = The Guideline of Abbreviating Style in Class）而不是脑白金（Meta CSS Framework）
3. 偏方是处方药，而不是超市里随处可买。并且说明书应该声明这一点，并附上适用范围和副作用。

另外，即使在这些前提下，Meta CSS也没有充分贯彻猫论的精髓。比如，比起class="tar fwb fs11p"，显然，class="r b 11px"或者class="right bold font-11px"更直白、更容易使用及维护。

偏方的价值在于好用，而不在于好看。严谨的命名规范和完整性并不提升偏方的价值。

10 楼 lifesinger 2009-10-21  

CSS有个很大的特点就是 简单

也正因为简单，所以设计师等也能快速学会

高级特性，比如增加变量，嵌套等，个人觉得对 css 的流行和普及不利

保持简单，有时就是最大的优点

9 楼 QuakeWang 2009-10-21  

我觉得这个问题的根源是CSS不支持组合定义，如果CSS能够让我们这样定义：

.a{/* 很多样式定义 */}
.b{
  .a
  text-align:center;
}
.c{
  .a
  text-align:right;
}

就可以兼有语义化和灵活度的优点了。
受限于CSS弱弱的语法格式，我觉得Meta CSS这种做法挺好的，喜欢其中提到约定大于配置的想法（因为我是Rails控，呵呵）

另外推荐一个做法，扩展CSS的语法：http://lesscss.org/，然后批处理转换成标准CSS，它除了实现组合定义（Mixins）外，还包括变量等其它CSS增强语法。

8 楼 lifesinger 2009-10-21  

playfish 写道

除了开心网跟163，腾讯，淘宝，新浪，几乎我们所熟知的大部分大型站点，都会有一部分这样的css代码。

有一部分这样的css代码，不代表就推荐使用这种方式书写css代码

得看场景，比如临时性的活动页面，用table布局快速搞定，甚至dw托托拽拽直接生成也未尝不可

长期需要维护的页面，尽量语义化，提高可读性和可维护性是很重要的

7 楼 hax 2009-10-21  

全文见http://hax.iteye.com/blog/497338

引用

说实话，在“大型网站”里看到class="left"这样的代码，完全可以理解。越是商业网站，越可能需要在有限资源下做出折中或妥协，因为make it work是第一位的。既然do business难免要do evil，那么降低犯罪成本、提高犯罪效率就是硬道理——尤其对于通常总疲于奔命应对产品部、设计部、业务部、技术部、客服部……外加什么都懂的boss 的前端开发小兵来说。Meta CSS的贡献是把这些罪行（我觉得“行”读做“性”比较有力量）提炼萃取，并正当化、规范化，从而给我们一个anti-pattern的活标本。……显而易见，Meta CSS反映了以样式为中心的行为模式，而所谓“正确”行为模式，则是以语义为中心。……从某种意义上说，如果设计者本身就不关心是什么而只关心看起来啥样，那么实现者采用以样式为中心的行为模式也是很正常的。不过我很反感拿这个做借口，正如历史学不能代替伦理学，犯罪学研究不能用做纵容犯罪的理由。必须区分真正的现实主义和看似有理实则荒谬绝伦的白猫黑猫论。……既然认定Meta CSS是一个anti-pattern，那么也应该给出解决的方法（称之为重构之道？）。其实Meta CSS的原文提出过4个方式，结合使用方式2（层叠）、3（class组合），正是CSS设计的一般方式。唯一需要指出的是，html与css的结合点，即selector，总应该是语义化的。tag和id天然就是语义化的，主要问题出在class上。应该尽量限制所谓的样式类，虽然有时无可避免（正如有时你会用inline style），但是至少不要像Meta CSS那样把偏方当补药。