“少用继承，多用组合”之CSS篇

分类 产品设计

“少用继承，多用组合”之CSS篇

继承是 css中经常要用到的技术，好处是可以尽量让页面的代码减少重复利用，但是随时项目越来越大，需求的不断变化，css代码就会变得越来越臃肿，后期难以控制和维护。其实，css代码和普通程序代码在编写的时候有很多的相似之处，下面我们就用试试用组合的方式是不是能更好的解决这个问题。

下面是一段普通的代码:
css:

  1. .box{
  2.   border:1px solid #ccc;
  3.   font-size:12px;
  4.   background:#f1f1f1;
  5.   padding:10px;
  6. }

html：

  1. <div class="box">this is  a gray box</div>

但是这个时候需求增加了，在页面中不仅要有一个灰色的盒子可能还有蓝色的盒子，可能还有绿色，通常我们会说用集成嘛，好我们就做如下更改
css:

  1. .box-gray,
  2. .box-green{
  3.   border:1px solid #ccc;
  4.   font-size:12px;
  5.   padding:10px;
  6. }
  7. .box-gray{background:#f1f1f1}
  8. .box-green{background:#66ff66}

Html:

  1. <div class="box-gray">this is  a gray box</div>
  2. <div class="box-green">this is a green box</div>

但是这个时候需求又有变化了，根与应用的不同，盒子中有些要用到12号字，有些要用到14号字，有些要变局10px有些要20px，估计这个时候你就要头大了，如果要用用继承css代码就会变得异常的复杂，那我们就来试验一下用组合的方式看能不能解决。
css:

  1. .fs-12{font-size:12px}
  2. .fs-14{font-size:14px}
  3. .pd-10{padding:10px}
  4. .pd-20{padding:20px}
  5.  
  6. .box{
  7.   border:1px solid #ccc;
  8. }
  9. .box.gray{background:#f1f1f1}
  10. .box.green{background:#66ff66}

Html

  1. <div class="box gray fs-12 pd-20">this a gray fontsize12px padding20px box</div>
  2. <div class="box green fs-14 pd-10">this a gray fontsize14px padding10px box</div>
  3. ….

我们看一些虽然 在class上引用了几个，但是代码和逻辑都非常清晰，而且非常容易维护，随意组合随意扩展。从上面可以看到“组合”的方式是不言而喻的，但是也不是十全十美的，再拆分组合的时候一定不要过度，不然效果可能适得其反，只有把组合+继承运用的恰到好处才能让我们的代码更加优雅和艺术。

十一 06

文章信息

标签

10 条评论 在 “ “少用继承，多用组合”之CSS篇 ”

  1. 白木堂 [wyqbailey] Says:
    十二月 28, 2007 at 7:15 下午

    “少用继承，多用组合”之CSS篇…

    继承是 css中经常要用到的技术，好处是可以尽量让页面的代码减少重复利用，但是随时项目越来越大，需求的不断变化，css代码就会变得越来越臃肿，后期难以控制和维护。其实，css代码和…

  2. 白木堂 [wyqbailey] Says:
    十二月 28, 2007 at 7:17 下午

    “少用继承，多用组合”之CSS篇[转]…

    继承是 css中经常要用到的技术，好处是可以尽量让页面的代码减少重复利用，但是随时项目越来越大，需求的不断变化，css代码就会变得越来越臃肿，后期难以控制和维护。其实，css代码和…

  3. Ghost Says:
    一月 23, 2008 at 11:08 上午

    .box{ border:1px solid #ccc; }
    .gray{ background:#f1f1f1font-size:12px;padding:20px }
    .green{ background:#66ff66;font-size:14px;padding:10px }

    this a gray fontsize12px padding20px box
    this a gray fontsize14px padding10px box

  4. greengnn Says:
    二月 14, 2008 at 1:55 上午

    对于class组合，其实也是集成，后者继承了前者，关键点是你的规划是否合理，也就是前者是否拥有足够的抽象，如果没有，那就是破坏结构，和table font 没什么区别

  5. greengnn Says:
    二月 14, 2008 at 1:57 上午

    ghost的代码也就是体现我说的话的意思，box具有更高的抽象了

  6. xw Says:
    二月 18, 2008 at 12:42 下午

    ghost的方式符合我上面的需求，可能我的举例是有些问题，如果我这时时候再加一个3，4个不同的box类型就好了，而3,4种box类型要共享统一的padding值和font值，这样的话就更能说明一些问题

  7. Rick Says:
    十二月 4, 2009 at 9:24 下午

    wow~原来css还能这样用的？！学习了！

  8. 敏敏 Says:
    十二月 23, 2009 at 8:41 下午

    牛B，，我才知道，，css这么用！学习了！

  9. rong8296 Says:
    七月 5, 2010 at 1:19 下午

    ghost的代码正合我意。
    考虑到博主的需求，意思应该是样式框架，比如jquery的css framework。
    样式框架得慎用，因为其针对性较强！考虑到网站的不同类型，ghost的代码正是解决之道！

  10. 热血洒红尘 Says:
    八月 27, 2011 at 9:08 上午

    说实话，我对组合不是很赞同。你这个在刚开始开发的时候好处是非常明显。但是突然想到如果是开发完之后，网站正式运营一段时间，页面已经很多了的时候。这时候要求改版，让你把左边变右边，字体大小换一下。你怎么换呢？原先我只要在唯一的一个css里面修改就可以了。现在你反而拆开来了。这时候我要该变字体大小就只能2种办法了。
    1.后台每一页面都去修改把CLASS里的类名F-12改成F-14.这样就要设置很多的变量了，速度会受到很大的影响，而且我不懂后台，这种是就只能交给后台做了。
    2.在它唯一的私有类里设置大小并且提高它的权重用来覆盖基类。
    这样的话组合不是没有意义了么

评论