根据目前彩票行业的公司进行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.严谨是一种美德。

css命名那些事儿的更多相关文章

  1. (转)面向属性的CSS命名

    原文链接:戳这里 自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根 ...

  2. 面向属性的CSS命名

    自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根想不出用什么名字来 ...

  3. CSS命名规范

    DIV+CSS规范命名大全集合 前端人员必看CSS命名规范 整理: 文件名必须由小写字母.数字.中划线组成 ).所有的命名最好都小写,一律采用小写加中划线的方式,不允许使用大写字母或 _2).属性的值 ...

  4. 精简高效的css命名准则

    对于css,为了避免样式冲突,我们总会赋予相当特殊的命名,或是在选择符上添加html标记,或是使用层级.我们为避免在冲突上做文章,就会把代码的命名变得复杂化. 如果css的重用性越高,相比就越高效.如 ...

  5. html,css命名规范 (转)

    HTML+CSS命名规范总结 1.HTML部分 1.1添加必须的utf-8的字符集,并且使用HTML5的简洁 方式: <meta charset="utf-8"> 1. ...

  6. Div+CSS命名规范

    注意事项:1.命名遵循驼峰式  2.尽量用中文  3.不加中杠和下划线   4.尽量不缩写,除非一看就明白的单词 头:header   标志:logo  友情链接:friendlink    内容:c ...

  7. CSS命名

    CSS命名规范 CSS样式命名整理 页面结构 容器: container/wrap 整体宽度:wrapper 页头:header 内容:content 页面主体:main 页尾:footer 导航:n ...

  8. 常用的css命名规则:

    关于团队合作的css命名规范 常用的css命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制 ...

  9. 常用的css命名规则

    头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left rig ...

随机推荐

  1. iptables不生效解决办法

    修改完iptables之后,如果不生效,需要修改一下这个参数 echo 1 > /proc/sys/net/ipv4/ip_forward   使iptables转发开启生效,如果设置为0,则不 ...

  2. maven nexus-staging-maven-plugin exception-connect timed out

    不知道是国内的网络的问题还是别的原因,在deploy一个maven的artifact到oss server的时候总是报错: Failed to execute goal org.sonatype.pl ...

  3. Windows环境下面搭建Object C开发环境[转]

    1.安装编译器 Objective-C的编译器有很多,其中LLVM属于从GCC发展出来的,主要使用在苹果的平台中,GNU可以使用GnuStep,网址是http://wwwmain.gnustep.or ...

  4. android 虚线

    <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...

  5. WOL远程开机

    最近在一直都在研究PC机硬件和软件相结合的软件,硬件信息都是通过C++与驱动结合获取.对于一个好久都没有接触C++的人来说看这些东西太费劲了,必须的重新捡一下C++的基础知识,必然也少不了C知识,底层 ...

  6. window_x64微信小程序环境搭建

    所需文件地址如下: http://pan.baidu.com/s/1nv0IHhn(ylk7)   1.下载微信开发工具0.7.0_x64 安装完成后,打开程序,进行微信扫码登录 2.下载微信开发工具 ...

  7. WebApi中直接返回json字符串的方法

    [HttpPost] public HttpResponseMessage Upload() { string json = "{\"result\":\"tr ...

  8. 哈夫曼算法(haffman)实现压缩和解压缩-C语言实现

    /* * ===================================================================================== * * Filen ...

  9. 使用jQuery开发一个带有密码强度检验的超酷注册页面

    在今天的jQuery教程中,我们将介绍如何使用jQuery和其它相关的插件来生成一个漂亮的带有密码强度检验的注册页面,希望大家喜欢! 相关的插件和类库 complexify - 一个密码强度检验jQu ...

  10. linux下备份mysql命令

    一,数据库的备份与导入 1),数据库的备份 1.导出整个数据库mysqldump -u 用户名 -p 数据库名 > 导出的文件名例:mysqldump -u dbadmin -p myblog ...