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的建议是：将一些基本样式（包子所谓“元定义”）缩写为一个样式类，比如

，fwb和tar就是Meta CSS提供的“元类”，fwb就是font-weight:bold，tar则是text-align:right。若不考虑div1可能覆盖定义，则该div元素会应用粗体和右对齐的样式。

考虑一下这与

有何本质差别？

答案是没有。

当然你可以争辩说，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%）。

以一个粗俗而不恰当的比喻：比傻逼更令人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那样把偏方当补药。