class命名

2017-02-13  本文已影响0人  小猫520

在写页面时,对于标签的命名总是很头疼,特别是对于可复用以及后期可能会修改的标签命名,今天特地查找了一些资料,总结了class命名的几条规范:

1、命名可以包含英文、数字以及 - ,但是不能以数字或者是 - 后加数字开头(无法调用)。

2、命名应该以功能命名,不以表现命名。这点对后期修改有很大帮助,例如对于侧边栏,命名为“boxLeft”,似乎也没有问题,但是后期可能侧边栏修改到页面右侧,这时可能就会导致混乱。命名为“sideBar”则会避免此类问题。

常用功能命名如下:

.wrapper  用于最外层的外套

.content/.container  容器

.head/.header  头部

.foot/.footer  页脚

.menu  菜单

.submenu  子菜单

.sideBar  侧栏

.main  主体

.title  标题

.copyright  版权

.joinus  加入我们

.parther  合作伙伴

.siteinfo  网站信息

.siteinfoLegal  法律声明

3、要预防命名冲突,可以采用功能模块名+结构名的方式命名。例如:热点问题功能模块的头部,可以命名为“hot-head”

4、命名为ID还是class,一般采用的原则是主要的、特殊的、最外层的采用ID命名。

上一篇下一篇

猜你喜欢

热点阅读