注释与命名
本章包含页面的注释规范与文件命名、样式表类名命名规范。
注释
提示
可通过编辑器的语法高亮功能，确保 HTML、CSS、JS 文件中注释语法正确
页面头部需要添加制作时间等信息。
在 head 区域中，title 标签下方的注释，按照下方格式分别加上页面设计、页面制作的公司名称，创建的年-月-日
<head>
<title>页面名称-产品中文全称-官方网站-腾讯游戏-产品slogan</title>
<!-- 页面设计：公司名称 | 页面制作：公司名称 | 创建：2017-09-09 -->
</head>
页面设计、页面制作填写具体公司名称，创建：填写页面创建的时间。
禁止注释中出现制作者的个人信息，如姓名、QQ 号、邮箱等。
合理的注释有助于后期维护。
较长的的 HTML 文件，请在板块之间加入注释，使得结构更清晰：
...
<!-- 活动板块 开始 -->
<div class="part-act">
...
</div>
<!-- 活动板块 结束 -->
...
如果是需要和后台开发联调的自定义函数。请注明函数的调用方式，包括函数的用途、参数类型等。
// 转盘初始化
// 参数1：是奖品的个数，数字类型
// 参数2：用来旋转的圆盘元素，可为dom元素 或 选择器字符串
var panel = new PanelLotery({
length: 8,
el: '#ltpanel'
});
命名
样式命名
- class、id 都需小写
- 命名使用英文，禁止使用特殊字符
- 样式名不能包含 ad、guanggao、ads、gg 是广告含义的关键词，避免元素被网页拓展、插件屏蔽
- 名称间隔使用-符号
- 涉及数据、交互等需要联调的部分，禁止通过 id 选择器定义样式，以免开发过程中 id 名变化，引起页局错乱
- 类名命名需要语义化，参考下面的示例：
.wrap {
} //外层容器
.mod-box {
} //模块容器
.btn-start {
} //开始
.btn-download-ios {
} //ios下载
.btn-download-andriod {
} //安卓下载
.btn-head-nav1 {
} //头部导航链接1
.btn-news-more {
} //更多新闻
.btn-play {
} //播放视频
.btn-ico {
} //按钮ico
.btn-lottery {
} //开始抽奖
.side-nav {
} //侧栏导航
.side-nav-btn1 {
} //侧栏导航-链接1
.btn-more {
} //更多
提示
命名词穷了怎么办？试下这个工具：codelf
图片命名
- 图片名称必须小写，禁止使用特殊字符、中文
- 使用英文或拼音缩写，禁止特殊字符
- 名称间隔使用-符号
- 命名需要能体现图片的大概用途
常用示例：
bg.jpg //背景图片
mod-bg.jpg //模块背景
sprites.png //精灵图
btn-start.png //开始按钮
ico-play.png //修饰性图片
- 禁止文件名和实际图片内容不符。反面例子：图片名为'weixin-qrcode'，图片内容却是头像。
文件命名
文件命名参照文件命名详细说明