Meta CSS框架公布,一个整合自开心网,163等大站的css定义集框架
Meta CSS框架发布,一个整合自开心网,163等大站的css定义集框架Meta CSS是一个很简单的CSS框架。可以点这里(
Meta CSS框架发布,一个整合自开心网,163等大站的css定义集框架
Meta CSS是一个很简单的CSS框架。可以点这里(下载)先一睹为快。
?
在深入介绍之前,我们来考虑几个web开发者非常容易遇到的问题:
?
同样的一个款式的按钮,有些页面它要在左边,但是有些页面要在右边同样作用的一段提示文字,有些地方字体要大号,有些却要小号同样风格的一段文字,有些要红色,有些却要绿色
这样的状况是相当频繁的。对此,通常有4种解决方法:
?
每种不同款式,定义一个css。按钮A一个css,按钮B虽然长得跟A一样,但是在右边,那就copy下A的css代码,然后改成在右边。
再来分析下4种方式各自的优缺点:
每种不同款式,定义一个css。随着代码量变大,css将会变得越来越难维护。当你需要修改一个按钮风格的时候,所有同样风格的按钮都要改过。你copy到那里,哪里就得改,很容易遗漏。并且代码量也会相对更大,很多可重复利用的资源没有利用起来。利用css层级覆盖来实现。利用css选择符的优先级来覆盖是很好的做法,也是很常用的做法。不过在很多情况下,例如大量的动态页面,我们没有办法完全预知定义的css的id或者类名,而无法定义特别样式。在一些可以控制的情况下,定义太多特殊类名用来区分,又会造成大量后期维护的困难。 良好的运用css组合方式,可以比较妥善的解决上面的2个问题。首先,公用样式都被提取了,你修改一个按钮,只需要改公共的部分。其次,不需要绞 尽脑汁去想一个不会冲突的css类名,遵循组合的规则就可以了。当然,这种方法也有缺点,较为复杂的组合需要代码作者自己熟悉覆盖的规则,在css代码里 面并不知道html页面拿哪一些规则拿来进行组合,修改一个规则可能导致调用css的地方出问题。内嵌style优点就是简单快速。缺点也很明显,不仅写起来有点麻烦,代码也难看,维护性也不好。很重要的一点,到处都是style会让人BS的,觉得你这前端div+css用得也忒不好了。所以代码洁癖的人往往宁可定义一个新样式,也不愿意页面有一个style。
我们来看看一些大型站点是如何来解决这个问题的:
?
这样的css引用语句。你可以将metacss中所有的css定义copy到你的css文件中合并到一起,所有的css文件可以怎么做,你都可以怎么做。
Meta CSS框架的局限性
css优先级的影响,你不能保证定义总会生效,如果之前的css类已经包含某些要覆盖的定义,则有可能因为优先级的关系,不能生效。我们稍微修改下上面的例子:
?
像这个例子里,.div1的text-align有比tar更高的优先级,所以用css组合这种方式就会不起作用。所以在应用框架的时候需要注意这一点。关于css优先级的讨论超出本文的范围,可以自己google一番。