2010,正心,修身,养性。
焚我残躯,毁我意志,复我记忆。
子曰:“知之者不如好之者,好之者不如乐之者。”
子曰:“吾尝终日不食,终夜不寝,以思,无益,不如学也。”

快乐的生活,快乐的分享。

一些css书写的小技巧~

最近在做收藏的二期改进时,遇到一些问题。虽然Dom结构发生的只是一些小变动,但是视觉上的变化好大。当然写出来样式时没问题的,关键在于如何保证两个版本都能完整的存在。因为开发那边和我们这边上线是存在误差的,不可能同时上的,所以我必须保证新写的样式不会影响线上的版本,而旧的版本同时不会影响到新的版本。很快,我发现这很容易做到,因为在之前旧版本的样式书写上,我有统一的前缀,也就是我只需要在新的Dom结构上改一下那个名字即可,^_^。

在每一个单独的小项目里,保留一些特定的前缀还是有些必要的,顺便提一下很久之前已经改掉的三个坏习惯:

1.之前有很长一段时间,我以为写样式的时候层次写的越深越详细越好,但是后来我发现那样子很不好,一是给后期维护带来挺多麻烦,二来覆盖的时候还是要写很长,三是增加了文件的大小,所以,越简单越好,但是主要的还是要保留的,现在我会尽量吧层次控制到4层以内。

2.在写background属性的时候,在以前一段时间,我经常会这么写:background:url(url) 0 0 no-repeat,但是很多时候我们会使用css-sprite,那么在后期调整的时候我们一般会只保留backgroud-position,这么写,我们操作起来不是很方便,所以我改成了这种方式:background:url(url) no-repeat 0 0,然后可以批量替换~

3.还有一个就是不要在li里继续嵌套ul。。。会死人的。。。

这篇文章发布于 2009年07月15日,星期三,08:11,归类于 CSS。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论,或者从您的站点trackback

2 条评论

  • colinivy (2009.08.04 @ 21:50)

    对于第二点,这样写怎么样:
    .testA,
    .testB,
    .testC {background-image: url(x.gif);background-repeat: no-repeat;}

    .testA {background-position: 0 20px ;}
    .testB {background-position: 0 40px ;}
    .testB {background-position: 0 60px ;}

  • 金冈 (2009.12.04 @ 10:47)

    Chrome英文如何设置10px字体大小,无论怎么设置都只能显示12px

    px,pt,em各种都试过,但是在chrome里面就是无法显示小于 12px的英文字体

    IE, FireFox, Safari下都没问题,是不是Chrome不支持12px以下的字体,或者有什么其它hack办法?

雁过留声

Rss
渴望孩子的纯真、诚实、可爱、无忧无虑。。。。。。

这位姐姐,你好,你的浏览器版本太低了,为了避免您中毒,请您升级您的浏览器!