css命名那些事儿

时间:2023-03-09 02:45:15
css命名那些事儿

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

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

 

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

css命名那些事儿

网易的命名是目前看到较为清晰易读的命名方式。可以看出网易彩票的命名采用模块的位置+功能+布局英文,顶部的菜单区采用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/

css命名那些事儿

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/

css命名那些事儿

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

方式解读:

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

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

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

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

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

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

css命名那些事儿

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

方式解读:

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

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

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

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

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

css命名那些事儿

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

方式解读:

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

2.找容器content等

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

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

css命名那些事儿

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

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

css命名那些事儿

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

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

css命名那些事儿

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

css命名那些事儿

10.淘宝彩票

css命名那些事儿

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

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

总结:

1.尽量统一组合方式:驼峰,下划线,横杠,英文小写选一个;

2.清晰易懂:一眼就知道模块的位置,作用;

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

4.严谨是一种美德。