CSS中的层分离编程详解

  
.product-image {   
       width: 400px;   
    overflow: hidden;   
}   
  
.product-description {   
    width: 500px;   
    min-height: 200px;   
    overflow: auto;   
}   
  
.box-padded {   
    background: #FFF;   
   padding: 10px;   
}   
“`  

内容与容器分离：

CSS Code复制内容到剪贴板

<div class="wrapper recently-viewed"></div>   
<div class="wrapper suggested-products"></div>   
  
.wrapper {   
   width: 400px;   
   margin: 0 auto;         
   overflow: hidden;   
}   
.recently-viewed {   
       border: solid 1px #ccc;   
       background: #FFF;   
   color: ￡666;    
}   
.suggested-products {   
       border: solid 1px #ccc;   
       background: #FFF;   
   color: ￡666;    
}  

这种面向对象的工作方式创建了一系列可以用来设置CSS属性的多种用途类。这种工作方式可以提高站点性能和维护以及保持CSS文件的DRY原则。

即使标记的多个主题是一致的，一个面向对象方法可以添加矫正的CSS用来覆盖或删除不想要的继承样式。

CSS Code复制内容到剪贴板

product-delivry.padded-box {   
   padding:0   
}  

SMACSS

SMACSS像OOCSS一样以减少重复样式为基础。然而SMACSS使用一套五个层次来划分CSS给项目带来更结构化的方法。

Base – HTML elements & defaults
Layout -Page structure
Module – Re-usable code bloks
State – Active/Inactive etc
Theme – Typography and colour schemes etc

这个增加的组织和结构提高了输出的CSS的效率。这个方法同样适用于需要添加或者删除层次的地方。
ITCSS

ITCSS是一个完全不同于SMACSS的全新的方法，它创造了一系列的层次来管理依赖关系和促进可扩展性。基础的层次包括通用和广泛的选择器。顶部的层次包含了局部模块具体化的选择器。整套的层次如下…