css命名那些事儿秦熔

网易的命名是目前看到较为清晰易读的命名方式。可以看出网易彩票的命名采用模块的位置+功能+布局英文，顶部的菜单区采用top进行标识，正文区用doc进行标识。其次，模块的第一层用wrap或者box。

方式解读：

1.找到模块在网页中的物理位置：例如top,body,foot；

2.找到模块的容器性质，例如nav,tab.

3.找到模块所起的作用，例如wrap,box,content,title,list等；

4.将这些元素进行必要的驼峰式组合。

这样的好处是一眼就知道大概位置，作用域的大小，以及所起的作用。综合便可以快速定位这个元素。便于维护和写作。但是深层级里面用了下划线方式，还有部分并没有采用驼峰式，而是简单的小写组合，有点遗憾。不过在html结构中，网易彩票用到h5中article+section组合方式，查看的彩票网站中，这也是唯一一家这样做的，赞。

2.用模块的具体属性，例如：title,logo,list，copyright等

澳客网站首页采用总分的结构，外层用了一个container包含了里面的内容。里面的命名采用位置，属性，作用，网页的地址下划线组合的方式。

1.最外层用cantainer进行包裹。

2.找到页面的地址，例如index

3.找到模块的容器属性，例如content,box

4.找到模块的作用，例如title,lottory,copyright

澳客的页面在看过前几个网站后有种耳目一新的感觉，很清爽。命名也可以快速的找到模块所在的位置，但是命名有时夹杂了拼音和英文，感觉有些遗憾。

中国竞彩网采用容器+属性+作用下划线组合的方式。

1.找到模块在网页中的位置，例如head,wrap,footer。

2.找到容器的属性，例如box

3.用模块本身的作用，例如link,title等

之所以没有截取很详细的命名层级，是因为觉得参考性不强。大小写开头不一致，下环线和驼峰式不一致，部分还有数字的命名方式，略感觉随性了一点。

500.com命名方式有些杂乱，大模块可以找到位置，但是小模块很难。大概是因为500.com相对老牌的彩票网站，搭建网站的时候是很早的时候。

1.定义最外层的容器，footer,section,header

2.找容器content等

命名较为随意，基本没有规律。驼峰式，下划线，横杠，小写常规混杂，单从这个页面看来没有很大的参考性。

彩票365的命名采用了常规的小写串联，用了模块的作用+属性+品牌数字。

新浪彩票的命名采用驼峰式,命名也采用多种组合型，呀，不想看。

10.淘宝彩票

淘宝彩票基本命名上保持了统一的格式，而且清晰易懂。很赞。

结果显示行业基本是按照模块的物理位置+模块的容器属性+模块的作用组合，并采用驼峰式、横杠式、下划线或者小写串写。但是没有一个网站用了绝对一致的命名方式，大多数采用了混搭的形式。个人感觉不够严谨。

总结：

1.尽量统一组合方式：驼峰，下划线，横杠，英文小写选一个；

2.清晰易懂：一眼就知道模块的位置，作用；

3.不建议：英文、拼音、数字夹杂；不建议：随意命名，不考虑后来者维护。