概述 | Aotu.io - 前端代码规范 https://guide.aotu.io/docs/

HTML 代码规范

头部声明
  • HTML文件必须加上 DOCTYPE 声明,并统一使用 HTML5 的文档声明:
<!DOCTYPE html>
  • 推荐使用属性值 cmn-Hans-CN(简体, 中国大陆),但是考虑浏览器和操作系统的兼容性,目前仍然使用 zh-CN 属性值
<html lang="zh-CN">
  • 一般情况下统一使用 “UTF-8” 编码(HTML5的默认编码为UTF-8)
<meta charset="UTF-8">
书写风格
  • HTML标签名、类名、标签属性和大部分属性值统一用小写

  • 不需要为 CSS、JS 指定类型属性,HTML5 中默认已包含

<link rel="stylesheet" href="" >
<script src=""></script>
    • 元素属性值使用双引号语法
    • 元素属性值可以写上的都写上
<input type="text">
<input type="radio" name="name" checked="checked" >
  • 纯数字输入框
    使用 type="tel" 而不是 type="number"
<input type="tel">

元素嵌套规范,每个块状元素独立一行,内联元素可选

<div>
    <h1></h1>
    <p></p>
</div>	
<p><span></span><span></span></p>
  • 段落元素与标题元素只能嵌套内联元素
<h1><span></span></h1>
<p><span></span><span></span></p>
注释风格
  • 单行注释

一般用于简单的描述,如某些状态描述、属性描述等
注释内容前后各一个空格字符,注释位于要注释代码的上面,单独占一行

<!-- Comment Text -->
<div>...</div>
  • 模块注释:
    一般用于描述模块的名称以及模块开始与结束的位置
    注释内容前后各一个空格字符,<!-- S Comment Text --> 表示模块开始,<!-- E Comment Text --> 表示模块结束,模块与模块之间相隔一行
<!-- S Comment Text A -->	
<div class="mod_a">
    ...
</div>
<!-- E Comment Text A -->
  • 嵌套模块注释:
    当模块注释内再出现模块注释的时候,为了突出主要模块,嵌套模块不再使用,而改用 <!-- /Comment Text -->
<!-- S Comment Text A -->
<div class="mod_a">
		
    <div class="mod_b">
        ...
    </div>
    <!-- /mod_b -->
    			
</div>
<!-- E Comment Text A -->
文件模板

https://guide.aotu.io/docs/html/template.html

Viewport Meta Tag
  • 通用类设置
<meta name="viewport" content="width=device-width, initial-scale=1.0, 
maximum-scale=1.0, user-scalable=no">

width – viewport的宽度
height – viewport的高度
initial-scale – 初始的缩放比例
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 是否允许用户缩放

图片引入

  • 测试内容图应该写上表明图片尺寸的占位图,可以用线上占位图生成服务,如:

http://placeholder.qiniudn.com/300x200

PlaceholderPic

  • HTML 中图片引入不需添加 width、height 属性,alt 属性应该写上
<img src="" alt="" >
  • CSS 中图片引入不需要引号
.jdc {
    background-image: url(icon.png);
}
  • CSS Sprites VS Data URIs
    • CSS Sprites特点

      • 减少请求数
      • 加速图片的显示
      • 维护更新成本大
      • 更多的内存消耗,特别是大体积或有过多空白的Sprites 图
      • 图片渗漏,相邻的不需展示的图片有可能出现在展示元素中,特别是在高清设备移动设备上
    • Data URIs(base64编码)

      • 减少请求数
      • 转换文件体积大,大约比原始的二进制大33%
      • IE6 / IE7 不支持
      • 图片显示相对较慢,需要更多的CPU消耗
    • CSS Sprites 使用建议

      • 适合使用频率高更新频率低的小图标
      • 尽量不留太多的空白
      • 体积较大的图片不合并
      • 确保要合并的小图坐标数值和合并后的 Sprites 图尺寸均为偶数
    • Data URIs(base64编码)使用建议

      • 适合更新频率高的小图片,如某些具备自定义功能的标题icon等
      • 转换成 Base64 编码的图片应小于 2KB
      • 移动端不使用 Base64 编码
      • 要兼容 IE6/IE7 的不使用

CSS 代码规范

头部

样式文件必须写上 @charset 规则,并且一定要在样式文件的第一行首个字符位置开始写,编码名用 “UTF-8”

@charset "UTF-8";

.jdc{}
代码风格
  • 统一使用展开格式书写样式
.jdc{
    display: block;
    width: 50px;
}
  • 样式选择器,属性名,属性值关键字全部使用小写字母书写,属性字符串允许使用大小写。

    • 尽量少用通用选择器 *
    • 不使用 ID 选择器
    • 不使用无具体语义定义的标签选择器
  • 为单个css选择器或新申明开启新行

.jdc, 
.jdc_logo, 
.jdc_hd {
    color: #ff0;
}
.nav{
    color: #fff;
}
  • 颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格,且取值不要带有不必要的 0
.jdc {
    color: rgba(255,255,255,.5);
}
  • 属性值十六进制数值能用简写的尽量用简写

  • 不要为 0 指明单位

  • css属性值需要用到引号时,统一使用单引号

  • 建议遵循以下顺序:

    1. 布局定位属性:display / position / float / clear / visibility / overflow
    2. 自身属性:width / height / margin / padding / border / background
    3. 文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
    4. 其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
  • CSS3 浏览器私有前缀在前,标准前缀在后

代码注释
  • 模块注释
/* Module A
---------------------------------------------------------------- */
.mod_a {}
  • 文件信息

在样式文件编码声明 @charset 语句下面注明页面名称、作者、创建日期等信息

@charset "UTF-8";
/**
 * @desc File Info
 * @author Author Name
 * @date 2015-10-10
 */
SCSS

https://guide.aotu.io/docs/css/sass.html

命名规范

目录命名
  • 项目文件夹:projectname
  • 样式文件夹:css
  • 脚本文件夹:js
  • 样式类图片文件夹:img
图片命名
  • 图片业务(可选) +(mod_)图片功能类别(必选)+ 图片模块名称(可选) + 图片精度(可选)
公共模块:
wx_mod_btn_goodlist@2x.png
wx_mod_btn_goodlist.png
mod_btn_goodlist.png 

非公共模块:
wx_btn_goodlist@2x.png
wx_btn_goodlist.png
btn_goodlist.png
  • 图片功能类别:
    • mod_:是否公共,可选
    • icon:模块类固化的图标
    • logo:LOGO类
    • spr:单页面各种元素合并集合
    • btn:按钮
    • bg:可平铺或者大背景
    • ...
ClassName

https://guide.aotu.io/docs/name/classname.html