前言
很多开发者觉得css很简单，如果有时间更愿意用在学习和研究js上，随着css3推出以及一些css的预处理语言和面对对象的编程css的方式的出现，css已经出现了更多的可变可提高空间。
而面对对象的css是指将可重用的元素样式定义为一个类，而与其对应的元素可以看成一个实例。这个类也支持继承，多态等，在大型项目中，为了降低维护成本，建议使用这样的方式。
作用以及注意事项
作用
- 增强代码可维护性
- 减少代码体积
- 提高渲染效率
- 组件库思想，栅格布局复用，减少选择器，方便扩展
注意事项
- 不要直接定义子节点所有样式，应该把共性申明到父类（子节点和父类存在必然捆绑关系，不是容器与组件的关系，而是组件内部的处理）
//bad codes(每个子节点都定义同一字号).m-section .inner1{font-size:12px}.m-section .inner2{font-size:12px}// better codes.m-section{font-size:12px;}- 结构和皮肤相分离，控制结构以及基本样式的类与控制皮肤样式的类分离
//bad codes<div class="m-demo">.m-demo{border:1px solid gray;background:#e5e5e5;}// better codes<div class="m-demo skin">.m-demo{border:1px solid gray;}.skin{background:#e5e5e5;}- 容器与内容分离，内容的样式不依赖于外部大容器或者布局环境，应该给出独立的样式。
//bad codes<div class="container"><ul></ul></div>.container ul{}// better codes<div class="container"><ul class="ranklist"></ul></div>.container{}.ranklist{}- 抽象出可重用的元素，建立组件库思想，发现页面可重用元素，用可重用元素拼接页面。
//bad codes<div class="container"> <section class="sec-a"></section> <section class="sec-b"></section> <section class="sec-c"></section></div>.container {}.container .sec-a {}.container .sec-b {}.container .sec-c {}// better codes<div class="container"> <section class="sec-primary"></section> <section class="sec-primary"></section> <section class="sec-special"></section></div>.container {}.sec-primary{}.sec-special{}- 对象本身的样式向对象本身添加class而不是对父类添加。
//bad codes(只有这个模块需要添加字体颜色以及向上间距)<div class="m-demo"> <section class="price"></section></div>.m-demo {padding-top:20px;color:#005;}.m-demo .price {}// better codes<div class="m-demo"> <section class="price"></section></div>.m-demo {}.m-demo .price{color:#005;margin-top:20px;}- 对象保持独立性。(可复用的独立性,与前面的共性申明到父类区分开，这里讲的是类与外部类的关系)
//bad codes(独立模块需要居中，依赖于外部容器)<div class="container"> <section class="m-price"></section></div>.container {text-align:center;}// better codes<div class="container"> <section class="m-price"></section></div>.m-price{text-align:center;}- 避免使用id选择器，权重太好，无法复用，
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。