zoukankan      html  css  js  c++  java
  • CSS之少用继承,多用组合

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

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

    html:

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

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

    .box-gray, 
    .box-green{ 
    border:1px solid #ccc; 
    font-size:12px; 
    padding:10px; 

    .box-gray{background:#f1f1f1} 
    .box-green{background:#66ff66} 

    Html: 

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

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

    .fs-12{font-size:12px} 
    .fs-14{font-size:14px} 
    .pd-10{padding:10px} 
    .pd-20{padding:20px} 

    .box{ 
    border:1px solid #ccc; 

    .box.gray{background:#f1f1f1} 
    .box.green{background:#66ff66} 

    Html 

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

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

  • 相关阅读:
    WP2Sinablog使用后的后遗症
    .NET Framework 4 与 .NET Framework 4 Client Profile
    360浏览器也有了开发人员工具了
    让你的手机号“变”qq号
    首次体验 Live Writter
    判断素数
    SqlServer文件挂起
    vni—2015:验证错误
    成功者善于模仿(转)
    dbms_output缓冲区溢出
  • 原文地址:https://www.cnblogs.com/sjqq/p/6381020.html
Copyright © 2011-2022 走看看