先思考选择器、层级有哪些特性

1. 一般来说选择器的层级不可以过深，据说过深在解析渲染时会有性可以问题

2. 层级会限制作使用域，相似于PHP中的命名空间的概念

3. 层级会影响优先级的计算（多一层权值就会多一点）

而我们面临的辣手问题：

1. 命名

2. 作使用域

1：我们总是苦苦思索合适的命名，同时不得不担心会与已有的名称发生冲突。

2：我们也讨厌很深的层级，倒是希望所有的都是一层才好，但是这样有两个缺点，一是不容易区分板块，二是我们常习惯于用层级作使用域来避免样式冲突的问题。

所以，我们喜欢用层级，而后再起一个合适的名字。

但是这个层级究竟几层才最合适呢？

小明爷爷 > 小明爸爸 > 小明 {}

显然层级很大程度上是由结构关系决定的，但是说可以保证明际结构都很浅呢？

小明太太爷爷 > 小明太爷爷 > 小明曾爷爷 > 小明爷爷 > 小明爸爸 > 小明

(完整的html结构关系，实际项目中可可以会更复杂)

尽管我们开发时能尽量去避免，但是得承认这很难完全的避免。

那这个时候怎样办呢？

再回想一遍我们的辣手问题，命名似乎不是问题了，那么就剩一个作使用域了。

我们要定位这里小明（局部而非全局的小明），其实只要要两层即可以了：

小明太太爷爷 > 小明 {}

小明太太爷爷 就是给 小明 充任父级，限制作使用域的。

这样我们的目的也达到了，层级不会那么臃肿冗长了。

而假如不是为理解决冲突，或者者说没有冲突要处理的话，那就无需父级来限制作使用域，直接一级即可以了：

小明 {}

这样最简洁直观。css不同于html，它有自己的运行方式，它不需要那么死板循规蹈矩的套结构，没必要写完整的结构。所以不要有思维定性，写css时应该站在css的角度，去考虑css的特性。

分析完。

补充：尽量少使用过深的层级，Google的网站就很简洁，基本上所有元素都是一层，哪怕把类名写长一点，不要为了显示元素的身份（元素的上下文）而成心加上层级关系，不要觉得这样看起来直观少量，这样的层级结构只是人看起来比较直观而已，对计算机来说，没有任何意义。很多时候，人赋予代码的意义，对计算机来说，并不感冒。

另外，避免层级关系能很方便的实现组合，这也符合了“少使用继承，多使用组合”的准则。

好的 CSS 命名规范能节约 Debug 时间

假如定义头上的头发，手上的指甲该怎样定义，属于元素吗？