（一）写 CSS 时，是否用父子选择器？
如果有一个结构如下：
|
1
2
3 |
<div class="bounder"> <div class="content my-content"></div></div> |
如果需要设置 content 的样式，我们会如何选中这个元素呢？
方法一：.bounder .content 父子选择器
方法二： .my-content 直接选中
上面这个例子，只是抛砖引玉，一个是父子选择器（方案 A ），一个是直接选中（方案 B ）
二者有何区别呢？
（1）A 没有 B 效率高
（2）A 涉及了父元素和子元素，使样式和 HTML 结构产生了耦合，不便于维护，如果 HTML 结构发生了变化，那么样式可能会丢失
当然，方案 B 的弊端也是明显的，需要保持命名的唯一性，因此类名会越来越长，但是相对于性能的提升和解耦，这点劣势也是可以接受的。
（2）jQuery 中，用什么选择器选中元素？
推荐：属性选择器、ID
不推荐：父子选择器、 class
原因：（1）解耦：属性选择器和 ID 一般是不会用来写样式的，这样就和样式解耦了，如果使用 class 作为选择器，则和样式耦合，如果某天为了修改样式而修改了 class 名字，那么会直接影响到 JS 的运行。
（2）效率：显然，父子选择器用在 jQuery 选择元素的效率是很低的，而 ID 选择器的效率是很高的。
（3）写样式时，如何安排 HTML 和 CSS 的结构？
推荐结构：一个包裹层(bounder)、一个内容层(content)
包裹层(bounder)：负责 float、position 等整个区块的位置、形状等信息
内容层(content)：负责具体的样式
原文地址：http://www.cnblogs.com/yiyang/p/3766712.html
