关于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那样把偏方当补药。
分享到:
相关推荐
诊断性meta分析手把教你做临床Meta分析——诊断试验性Meta-Disc分析.doc
Meta:开拓新市场攻略——越南篇.pdf
meta演示 _引入 css 样式文件 _链接a href的使用 _表格(Table)的使用 _表单(form)演示 _列表演示 _frameset演示 _iframe 演示;
一、页面自定义meta标签 ...若hid不配置成description 则会有两个meta标签 其中 一个的hid是description(默认的) 另一个的hid是自己配置的 从而产生重复 导致一些问题 因此hid要配置成description 以覆盖默
ASP.NET源码——[整站程序]Meta网站系统.zip
meta源信息功能之页面定时跳转与刷新 几乎所有的网页头部都有<meta>源信息。除了我们常用的定义编码、关键字(name=”keywords”)、描述(name=”description”)(for SEO),...实现,下面几个典型代码示例: CSS
网站SEO——关于页面META标签、文章标签和导读的使用规范.pdf
如何撰写高质量的流行病学研究论文第七讲随机对照试验Meta分析的报告规范——QUOROM介绍
html+css简单的用法及style+meta+img的简单用法及自己的领悟
1.4 编写第一个HTML文件 8 1.4.1 HTML文件的编写方法 8 1.4.2 手工编写页面 9 1.4.3 使用可视化软件制作页面 10 1.4.4 使用浏览器浏览HTML文件 14 1.4.5 使用HTML开发的明日图书网 14 1.5 小结 15 ...
meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”> width-viewport的宽度 height-viewport的高度 initial-scale 初始的缩放...
元宇宙银行(Meta Bank)——虚拟银行2.pdf元宇宙银行(Meta Bank)——虚拟银行2.pdf
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”...一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下: <meta name=”viewport” content
meta标签详解meta标签详解meta标签详解meta标签详解meta标签详解
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">... js css3实现的多个图片3D旋转轮播特效,很好看的网站焦点图立体旋转切换代码。
这是一个关于文本溢出属性的实例。 这是一个关于文本溢出属性的实例。 ; line-height: 30px; clear: both"> 本特效由<a href="http://www.viewcss.com" target="_blank">ViewCss网页特效网收集和整理,请支持...
Meta分析论文写作,数据提取,这方面的指导很全面
很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文档...