QMUI 本身的代码遵循一系列的规范编写,这是由于 Web UI 代码(CSS 与 HTML 为主)语法较为松散,引入编码规范有助于提高团队内协助的效率以及代码的可维护性。
为最大限度解决协同合作过程中出现的命名冲突问题、方便理解代码上下文、提高代码的执行效率,同时缩短项目交接时间、有必要制定一套简单易用的命名规范。基本原则是 class 需要遵循其代表的功能语义,模块化开发,不同业务模块使用不同前缀,公共部门使用项目缩写为前缀。
.dm_toolbar {
...
}
.dm_toolbar_header {
...
}
.dm_toolbar_header_title {
...
}
.resume_mod {
...
}
.resume_mod_header {
...
}
.resume_mod_footer {
...
}
.dm_btn {
...
}
.dm_btn_Big {
...
}
.resume_mod {
...
}
.resume_mod_List {
...
}
.resume_mod_cnt {
...
}
.resume_mod_List .resume_mod_cnt {
...
}
正确示范:/* 注释内容 */
错误示范:/*注释内容和注释符头尾要有空格*/
正确示范:
/**
* 注释内容
* @author xxx
*/
错误示范:
/*
注释符第一行应该是“/**”,每一行开头是“* ”
*/
/**
*每一行注释内容与开头的“*”之间要有空格
*/
/**
* 注释符结尾只需要“*/”即可
**/
/**
* ftnlist.css 中转站列表的样式文件,同时也用于写信超大附件的文件列表样式
* @author molice
* @date 2014-08-27
*
* #reset
*
* #layout 主框架布局
* #list 文件列表
* #function 公共方法函数
* #...
*/
/* #reset */
body {
font-size: 14px;
}
...
/**
* .qm_list_item
* + .qm_list_item_BorderNone 不显示item底部的分隔线
* + .qm_list_item_Accessory 在item右边显示向右箭头
* + .qm_list_item_Style2 标题、副标题上下排列
*
* > [.qm_list_item_control] 可选。在列表左边显示一个控制控件,例如checkbox、radio等
* > .qm_list_item_content 包裹item内容的容器
* > [.qm_list_item_icon] 可选。在内容左边显示一个图片
* > .qm_list_item_textWrapper 包裹item文字内容的容器,内部只能摆放文字
* > .qm_list_item_title item的标题,默认为黑色
* > .qm_list_item_subtitle item的副标题,默认会灰色
*
*/
.qm_list_item {
...
border-bottom:1px solid #000;
...
}
.qm_list_item_BorderNone {
border-bottom:none;
}
这个节点可选,所以注释里用中括号“[]”包起来
这个节点必须放在textWrapper内,所以注释里有缩进和“>”关系
.layout_left {
float: left;
margin-right: 10px;
}
.layout_right {
overflow: hidden; /* 产生BFC,隔开左右两部分内容 */
}