通用规范

最佳原则

不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。

命名规则

项目命名

统一采用驼峰命名法。

例如：baieMall

目录命名

全部采用小写方式，尽量以英文单词命名，如需要多个单词命名的， 以下划线分隔。

例如：member、wallet_bank

HTML、CSS、JS文件命名

全部采用小写方式，尽量以英文单词命名，如需要多个单词命名的， 以下划线分隔。

例如：index.html、index.css、index.js、error_report.html、error_report.css、error_report.js

推荐约定

基本要求：

  1. 命名简短、语义化、禁用拼音
  2. 标签语义化
  3. 基本符合 W3C Markup Validation与W3C CSS Validation检测规则

共同约定：

  1. UI组件前缀：baie-
  2. 推荐__组层级连接符，-承担功能前缀或后缀连接符
  3. id或者js-前缀类名供JS专用

项目通用目录：

层级规范

z-index顺序：Content < Navigation < Bubble < Mask < Popup

Content: < 10

Navigation: 10 ~ 19

Bubble: 20 ~ 100

Mask: 1000

Popup: 5000 ~

注释

UI组件需要注释开始和结束：

HTML:
<!-- baie-tab START -->
<div class="baie-tab">
    ......
</div>
<!-- baie-tab END -->

CSS:
/* baie-tab START */
.baie-tab {
    ......
}
/* baie-tab END */

CSS多行注释及重要注释：

/**
 * 多行注释
 */

/*!
 * CSS 重要注释（不会被编译、压缩工具丢弃）
 */

js禁用单行注释，统一用多行注释：

/* 打印 */
console.log('Hello World~')

HTML5 video和audio 中的src资源引用，禁用本地路径(切不能提交至git仓库)，务必一律上传CDN

/* bad */
<video width=”100%” height=”auto>  
    <source src=”/assets/video/movie.mp4” type=”video/mp4” />  
    <source src=”/assets/video/movie.ogv” type=”video/ogg” />  
    <source src=”/assets/video/movie.webm” type=”video/webm” />  
    你浏览器不支持 video 功能，点击这里下载视频： <a href=”/assets/video/movie.webm”>下载视频</a>.   
</video> 


/* good */
<video width=”100%” height=”auto”>  
    <source src=”//static.yoro.com/assets/video/movie.mp4” type=”video/mp4” />  
    <source src=”//static.yoro.com/assets/video/movie.ogv” type=”video/ogg” />  
    <source src=”//static.yoro.com/assets/video/movie.webm” type=”video/webm” />  
    你浏览器不支持 video 功能，点击这里下载视频： <a href=”//static.yoro.com/assets/video/movie.webm”>下载视频</a>.   
</video>

results matching ""

    No results matching ""