页面制作规范整理

命名规范

1. 命名所选用的单词应选择不过于具体表示某一状态（如颜色、字号大小等）的单词，以避免当状态改变时名称失去意义。
2. 样式类名由以字母开头的小写字母（a-z）、数字（0-9）、下划线（_）、减号（-）组成。
3. ID名称由不以数字开头的小写字母（a-z）、数字（0-9）、下划线（_）组成。

[ 模块前缀 ] _ 类型 _ ( 作用 | 状态 ) n _ [ 位置 n ] _ [ 后缀 ]

图例说明：

• ( 必选 )：必需存在。
• [ 可选 ]：可根据需要选择。
• |：多选一。
• n：可有多个。

名词说明：

• 模块前缀：模块定义时使用的前缀。
• 类型：定义类的内容类型。如输入框、文本、段落等等。
• 作用：定义类的作用，用于对类型的补充。
• 状态：定义类的状态，用于对类型的补充。
• 位置：定义类所使用的位置，如首页、导航等等，不排除使用左、右这样的词，但应尽量避免。
• 后缀：用于说明类的具体功能等，如“_cont”

例：

中文解释	命名
文本输入框	.input_tx
段落文本颜色	.c_tx_p
密码输入框	.input_pw
相册弹出的设置层	.pop_set_photo
登录密码输入框	.input_pw_login
日志设置成功提示	.hint_suc_blogset
文本颜色	.c_tx
公共提示	.hint_gb

通用名词缩写

• 设置 set
• 成功 suc
• 提示 hint
• 失败 lost
• 按钮 bt
• 文本 tx
• 颜色 color,c
• 背景 bg
• 边框 bor
• 上 top,t
• 下 bottom,b
• 左 left,l
• 右 right,r
• 居中 center,cnt
• 添加 add
• 删除 del
• 间隔 sp
• 段落 p
• 图标 icon
• 弹出 pop
• 公共 global,gb
• 标题 title,tit
• 操作 op
• 密码 pw
• 菜单 menu
• 内容 cont
• 透明 tran
• 信息 info
• 重点 hit
• 预览 pvw
• Tips tips
• input input
• 导入 inc
• 大 b
• 小 s
• 导航 nav

模块前缀

• 首页 index
• 日志 blog
• 相册 photo
• 工具栏 toolbar

注释

注释信息应写在标签开始之前和结束之后

例1(区域注释)：
<!-- S 注释内容 -->
<div>
...
</div>
<!-- E 注释内容 -->

例2(单行注释)：
<div>
<!-- 注释内容 -->
...
</div>

注释层级

HTML

<!-- S 注释内容 -->
...
<!-- S 注释内容 -->
...
<!-- S 注释内容 -->
...
<!-- E 注释内容 -->
...
<!-- E 注释内容 -->
...
<!-- E 注释内容 -->

CSS

/* S 注释内容 */
...
/* E 注释内容 */

样式规则书写顺序

display || visibility list-style : list-style-type || list-style-position || list-style-image position top || right || bottom || left z-index clear float

width
max-width || min-width
height
max-height || min-height
overflow || clip
margin : margin-top || margin-right || margin-bottom || margin-left
padding : padding-top || padding-right || padding-bottom || padding-left
outline : outline-color || outline-style || outline-width
border
background : background-color || background-image || background-repeat || background-attachment || background-position

color
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font : caption | icon | menu | message-box | small-caption | status-bar
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor