注释与命名

本章包含页面的注释规范与文件命名、样式表类名命名规范。

注释

[info] 提示 可通过编辑器的语法高亮功能,确保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'
});

命名

样式命名

  1. class、id都需小写
  2. 命名使用英文,禁止使用特殊字符
  3. 样式名不能包含adguanggaoadsgg是广告含义的关键词,避免元素被网页拓展、插件屏蔽
  4. 名称间隔使用-符号
  5. 涉及数据、交互等需要联调的部分,禁止通过id选择器定义样式,以免开发过程中id名变化,引起页局错乱
  6. 类名命名需要语义化,参考下面的示例:

     .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{}             //更多
    

    [info] 提示 命名词穷了怎么办?试下这个工具:codelf

图片命名

  1. 图片名称必须小写,禁止使用特殊字符、中文
  2. 使用英文或拼音缩写,禁止特殊字符
  3. 名称间隔使用-符号
  4. 命名需要能体现图片的大概用途

    常用示例:

     bg.jpg          //背景图片
     mod-bg.jpg      //模块背景
     sprites.png     //精灵图
     btn-start.png   //开始按钮
     ico-play.png    //修饰性图片
    
  5. 禁止文件名和实际图片内容不符。反面例子:图片名为'weixin-qrcode',图片内容却是头像。

文件命名

文件命名参照文件命名详细说明

results matching ""

    No results matching ""