Meta CSS —— 一个Anti Pattern的典型

关于Meta CSS框架，可以看http://www.fangyuqiang.com/metacss，或者JavaEye上的新闻或论坛良好贴（实际上在还没有产生任何讨论之前，就被评为良好贴——显然这是另一个可能引起我兴趣的话题）。

虽然作者肉包子声称Meta CSS是一个“框架”，但是在我看来，它基本上只是一个guideline和一组貌似“放之四海”的style rules。如果说它可以表现出框架的一些特征（如extensibility），毋宁说CSS本身就是一个框架。

其实是否能算做“框架”并不是重点。一个良好的guideline或者一组实用的patterns比大而无当的framework要更有意义。不幸的是，Meta CSS不仅没能总结Best Practice，反而充当了典型反例，行内黑话叫做“Anti-Pattern”。

简单来说，Meta CSS的建议是：将一些基本样式（包子所谓“元定义”）缩写为一个样式类，比如<div class="div1 fwb tar">，fwb和tar就是Meta CSS提供的“元类”，fwb就是font-weight:bold，tar则是text-align:right。若不考虑div1可能覆盖定义，则该div元素会应用粗体和右对齐的样式。

考虑一下这与<div class="div1" style="font-weight:bold; text-align:right">有何本质差别？

答案是没有。

当然你可以争辩说，inline style无法被覆盖，Meta CSS更灵活。然而考虑明确使用fwb和tar的用意，就会发现，fwb和tar可以被覆盖，恰恰是缺点。

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

所以，你知道嘛，Meta CSS是赎罪券——你觉得写style="font-weight:bold; text-align:right"是罪恶的，而class="fwb tar"消除了这种罪恶感。与此同时，它还鼓励你更多的犯罪（因为fwb tar只要7次击键，而原来需要35次——降低犯罪成本80%）。

以一个粗俗而<span style="text-decoration: line-through">不</span>恰当的比喻：比傻逼更令人BS的是把傻逼当牛逼（简称装逼）。

Meta CSS的出现是有原因的，正如一个帖子没有被讨论过就被评为良好贴，也肯定有原因的（或者是个启示）。

肉包子指出设计Meta CSS的原因来自于“大型网站”的“需求”。

说实话，在“大型网站”里看到class="left"这样的代码，完全可以理解。越是商业网站，越可能需要在有限资源下做出折中或妥协，因为make it work是第一位的。既然do business难免要do evil，那么降低犯罪成本、提高犯罪效率就是硬道理——尤其对于通常总疲于奔命应对产品部、设计部、业务部、技术部、客服部……外加什么都懂的boss的前端开发小兵来说。Meta CSS的贡献是把这些罪行（我觉得“行”读做“性”比较有力量）提炼萃取，并正当化、规范化，从而给我们一个anti-pattern的活标本。

其实我并不担心这个anti-pattern会被广泛传播和使用，至少不会比某某征途更令我担心。说到底，如果你确信那些网页两年内不会有什么修改，或者在两周之后就会彻底重做，那你完全可以用FrontPage来制作（只是记得把meta name="generator"那句删了，这可以大大减少你被BS的概率）。

我更感兴趣的是不同的行为模式和背后的机制。显而易见，Meta CSS反映了以样式为中心的行为模式，而所谓“正确”行为模式，则是以语义为中心。

从某种意义上说，如果设计者本身就不关心是什么而只关心看起来啥样，那么实现者采用以样式为中心的行为模式也是很正常的。

不过我很反感拿这个做借口，正如历史学不能代替伦理学，犯罪学研究不能用做纵容犯罪的理由。必须区分真正的现实主义和看似有理实则荒谬绝伦的白猫黑猫论。

另一方面，样式的设计和维护，本身确有独立的价值。举个例子来说，对于字体的使用，追求完美的设计师会总结出一些特定的字号和字体替换系列的组合。更典型的是layout，它本身就一定是一组互相配合的rules。所以“要有CSS框架”的想法是有道理的。遗憾的是，这恰恰是Meta CSS（有意）忽略的地方。

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

最后，既然认定Meta CSS是一个anti-pattern，那么也应该给出解决的方法（称之为重构之道？）。其实Meta CSS的原文提出过4个方式，结合使用方式2（层叠）、3（class组合），正是CSS设计的一般方式。唯一需要指出的是，html与css的结合点，即selector，总应该是语义化的。tag和id天然就是语义化的，主要问题出在class上。应该尽量限制所谓的样式类，虽然有时无可避免（正如有时你会用inline style），但是至少不要像Meta CSS那样把偏方当补药。

评论

8 楼 kaelzhang 2010-09-25  

留意了很古老的文章，原来在几年前，爆牙就和hax有过激烈的交火。

7 楼 hax 2010-08-26  

还有看看讨论帖 http://www.iteye.com/topic/494214

6 楼 hax 2010-08-26  

@ileile
我不知道你如何得出我“无视事情真正的本质”。建议你把我的文章好好再读一遍。还有后面那篇：http://hax.iteye.com/blog/500015

5 楼 ileile 2010-08-26  

还你一句话：

“比傻逼更令人BS的是把傻逼当牛逼”

HTML/XHTML的不纯洁性是因为网页应用本身造成的，大多数时候网页必须重视表现而不是其他。世界上从来就没勊有一种单一的统一方法。

比如某文档的一个node，从语义讲它是一个意思，重要性是一个级别，导致它在文档里嵌在某处并具有相应的class，但是这个文档在不同的展示是环境中，该node的视觉位置和效果经常会完全不同；这时候怎么办？

多页面就是这种情况。而如果禁止破坏语义的重用方式，很多时候就只能重做文档，这个成本从来不是空口说白话的废物来承担的。这才是出现这些问题的根本。

很多人使用xhtml也好，css也好，只是因为这件工具能满足他们的目的：制作一组网页。这种情况下根本犯不着关心什么语义。实际上把语义强加在如今完全是为了做界面而不是展示文档的web开发界，只是少数没脑子的人的2B行为。

我不知道你从爆牙齿或者别人的话里看到了什么。说实话我至少不偏向于支持这种所谓的“框架”，但我更反感楼主和JE上好多人无视事情真正的本质（如这个例子中本质是某开发者要借用某工具来做一组页面），而只在意某几个宣讲者嚼剩下的“本质”，用以荣耀自己心智的无赖行为。

让我来回答一下一楼的加粗吧：是什么？是一个它长啥样的重要性超过一切其它的东西。

4 楼 saberma 2009-10-21  

一看到这个Meta css,就跟你同样的感觉
不过那标题是起得不错:)

偶尔把一些样式meta一下是可以的,比如.floatRight
但就这一个floatRight已经被很多设计师BS了

3 楼 hax 2009-10-21  

更多讨论参见http://www.iteye.com/topic/494214

2 楼 skyblue1984 2009-10-21  

引用

所以，你知道嘛，Meta CSS是赎罪券——你觉得写style="font-weight:bold; text-align:right"是罪恶的，而class="fwb tar"消除了这种罪恶感。与此同时，它还鼓励你更多的犯罪（因为fwb tar只要7次击键，而原来需要35次——降低犯罪成本80%）。

充满想象力啊..很精辟的类比.

1 楼 s5s5 2009-10-21  

精辟！特别是哪一句“不关心是什么而只关心看起来啥样”，这个不只是设计者，只要是地球上的生物都是这样，这一句在电影电视中被应用的炉火纯情~