论坛首页 Web前端技术论坛

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

浏览 22007 次
该帖已经被评为良好帖
作者 正文
   发表时间:2009-10-19   最后修改:2009-10-21
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来覆盖
  3. .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>
  4. 利用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>
  5. 直接内嵌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

   发表时间:2009-10-20  
来看的时候,没有任何回帖。。。还被评良好?
0 请登录后投票
   发表时间:2009-10-20  
我很遗憾,因为这个meta css只是集合了那些网站对css的错误使用。也就是他不是集best practice之大成,而是集反面案例于一身。
0 请登录后投票
   发表时间:2009-10-20  
没有回复的良好贴是一件有趣的事情。我猜想,这表示许多人觉得终于找到支持他们想法的证据了。
0 请登录后投票
   发表时间:2009-10-20  
写的太多了。
我感觉是在介绍为什么要使用CSS框架,而不是介绍为什么使用Meta框架。
请介绍一些Meta框架相对于其他的流行css框架的优势,也便于我们选择。
0 请登录后投票
   发表时间:2009-10-20  
ops2000 写道
写的太多了。
我感觉是在介绍为什么要使用CSS框架,而不是介绍为什么使用Meta框架。
请介绍一些Meta框架相对于其他的流行css框架的优势,也便于我们选择。

meta css框架只是一个补充。它可以与yui css,blueprints css等这些框架共存使用。

作为一个发布出来共享的东西,我还是希望整理足够的文档,可以让使用的人充分了解框架的完整应用背景与方式。
0 请登录后投票
   发表时间:2009-10-20   最后修改:2009-10-20
hax 写道
我很遗憾,因为这个meta css只是集合了那些网站对css的错误使用。也就是他不是集best practice之大成,而是集反面案例于一身。


在新闻的页面我也做了一下回复:

呵呵,能博得2位的一句中肯的评价可以受益不少。的确,这是一个很容易意识到的问题,这样的css定义,不语义化,css不应该是这样用的。并且,这并不能提高可维护性

但是我们也可以来考虑下,既然不是best practice,为什么会有这么多站点采用这种模式呢?

除了开心网跟163,腾讯,淘宝,新浪,几乎我们所熟知的大部分大型站点,都会有一部分这样的css代码。这么多的前端开发人员采用这种方式为啥?我觉得本质的原因在于它可以提高开发效率,我之前另外的一篇帖子http://www.iteye.com/topic/467394也提到了自己做开发的一个观点:所谓的技术与标准,都是为现实需求服务的,只要能实现需求,综合考虑时间效率与成本,都是可以拿来用的。

在面对一个页面庞大而复杂的情况,而上面又催着你赶快完成的时候,什么东西可以最有效率的实现需求,才是开发者最关心的事情。

整理这个css框架的目的就是在此。希望hax与fins二位愿意再细看下这篇完整的介绍,提出更多的意见

文档中我也提出了这个框架的适用的范围,我觉得在适用的范围内,这种方式不能称之为错误。
0 请登录后投票
   发表时间: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那样把偏方当补药。
0 请登录后投票
   发表时间:2009-10-21  
playfish 写道
除了开心网跟163,腾讯,淘宝,新浪,几乎我们所熟知的大部分大型站点,都会有一部分这样的css代码。


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

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

长期需要维护的页面,尽量语义化,提高可读性和可维护性是很重要的
0 请登录后投票
   发表时间: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增强语法。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics