CSS 面向对象注意事项

参考网站：OOCSS

主要的两个原则

2.   结构与皮肤相分离 

age structure (width, height, margins, padding) from appearance (fonts, colors, animations)

/* Structure */

.side-widget {

   width : 100% ;

   padding : 10px 5px ;

}

 

/* Skinning */

.recent-posts {

   font-family : Helvetica , Arial , sans-serif ;

   color : #2b2b2b ;

   font-size : 1.45em ;

}

class contaner simpleExt ，表示同时引用两个类

3. 容器与内容分离

错误做法

<div class = "container"><ul><li></li></ul></div>

css: 

.container ul{

}

正确做法：

<div class = "container"><ul class="myList"><li></li></ul></div>

.list ul{

}

开发建议：

1. 共性属性应该放到父类。