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

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

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

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

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

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



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


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



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

呃。。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的价值在于将这些命名规范化了。

你既然是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的适用范围你有所提及，但是它更像是搪塞乱吃偏方消费者的借口。

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

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

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

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

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

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

虽然是我随手举的例子，但是这并不随意。真正完全以实用为导向的方式，是优先考虑使用者的习惯，而不是优先考虑规则和完备性。类似的理念请参考：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：举上述例子，不代表我赞同偏方。

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



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

我们知道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预编译，来管理样式的复杂性。

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