title: 注释与命名

注释与命名

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

注释

:::tip 可通过编辑器的语法高亮功能，确保HTML、CSS、JS文件中注释语法正确 :::

页面头部需要添加制作时间等信息。

禁止注释中出现制作者的个人信息，如姓名、QQ号、邮箱等。

合理的注释有助于后期维护。

较长的的HTML文件，请在板块之间加入注释，使得结构更清晰：

  1. ...
  2. <!-- 活动板块 开始 -->
  3. <div class="part-act">
  4. ...
  5. </div>
  6. <!-- 活动板块 结束 -->
  7. ...

如果是需要和后台开发联调的自定义函数。请注明函数的调用方式，包括函数的用途、参数类型等。

  1. // 转盘初始化
  2. // 参数1：是奖品的个数，数字类型
  3. // 参数2：用来旋转的圆盘元素，可为dom元素 或 选择器字符串
  4. var panel=new PanelLotery({
  5.     length:8,
  6.     el:'#ltpanel'
  7. });

命名

样式命名

  1. class、id都需小写
  2. 命名使用英文，禁止使用特殊字符
  3. 样式名不能包含ad、guanggao、ads、gg是广告含义的关键词，避免元素被网页拓展、插件屏蔽
  4. 名称间隔使用-符号
  5. 涉及数据、交互等需要联调的部分，禁止通过id选择器定义样式，以免开发过程中id名变化，引起页局错乱
  6. 类名命名需要语义化，参考下面的示例
    1. .wrap{}                 //外层容器
    2. .mod-box{}              //模块容器
    3. .btn-start{}            //开始
    4. .btn-download-ios{}     //ios下载
    5. .btn-download-andriod{} //安卓下载
    6. .btn-head-nav1{}        //头部导航链接1
    7. .btn-news-more{}        //更多新闻
    8. .btn-play{}             //播放视频
    9. .btn-ico{}              //按钮ico
    10. .btn-lottery{}          //开始抽奖
    11. .side-nav{}             //侧栏导航
    12. .side-nav-btn1{}        //侧栏导航-链接1 
    13. .btn-more{}             //更多

    图片命名

  7. 图片名称必须小写，禁止使用特殊字符、中文
  8. 使用英文或拼音缩写，禁止特殊字符
  9. 名称间隔使用-符号

  10. 命名需要能体现图片的大概用途

    常用示例：

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