css命名那些事儿

　根据目前彩票行业的公司进行css命名的层级解析，此次选择了网易彩票，QQ彩票，澳客彩票网，中国竞彩网，500.com，彩票365，新浪彩票，新浪爱彩，凤凰彩票，淘宝彩票的首页进行css命名的采集和分析。

　这篇文章来源于我的一个困惑。前端编写代码时你是否出现过不知道怎么命名的时候，冥思苦想，百思不得其解。而且不光是想不出来，慢慢发现周围人每个人都有自己的命名风格，大家组合在一起，也是各成一派。我在想是不是只有我有这样的困惑，于是我想着去了解行业的网站命名的方法。这篇文章也许可以给你一些启示。　

　

1.网易彩票首页-- http://caipiao.163.com/

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

方式解读：

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

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

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

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

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

2.QQ彩票-- http://888.qq.com/

QQ彩票采用的是横杠的方式进行命名，位置+功能+详细内容的形式。

方式解读：

1.找到模块所处的位置，QQ将他们简单的分为header,main,foot

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

3.在页面主体命名时，QQ用了评论盖楼的方式，first-floor,thirst-floor,fifth-floor等，在语义上不是很清晰，不知道实际做项目的人会不会感觉很好找到。

总体上，QQ彩票的命名方式还是比较清晰的，虽然感觉有些地方粗暴了一点。

3.澳客网首页-- http://www.okooo.com/

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

方式解读：

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

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

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

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

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

4.中国竞彩网首页-- http://www.sporttery.cn/

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

方式解读：

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

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

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

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

5.500.com --http://www.500.com/

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

方式解读：

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

2.找容器content等

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

6.彩票365首页-- http://www.caipiao365.com/

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

7.新浪彩票-- http://lottery.sina.com.cn/

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

8.新浪爱彩首页-- http://www.aicai.com/tempIndex.jsp

9.凤凰彩票-- http://zx.cp.ifeng.com/

10.淘宝彩票

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

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

总结：

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

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

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

4.严谨是一种美德。