FE

前端开发规范

规范概述

开发规范是我们在工作中积累与沉淀的产物，可以帮助我们更快、更好地完成任务。开发规范的主要目的在于：降低组员介入项目的门槛；统一代码风格,便于后期维护；提高工作效率及协同开发的便捷性；提供一整套HTML、CSS、JS解决方案，减少重复劳动，帮助开发人员快速做出高质量的页面，完成项目需求。

通用约定

目录结构

项目名
└─ index.html
├─ css/
├─ js/
├─ img/
└─ lib/
    ├─ bootstrap/
    ├─ fontawesome/
    ├─ jquery/
    └─ knockout/

代码缩进

每次缩进“4个空格”，不要用水平制表位的“\t”缩进。

文件命名

所有文件的文件名用小写英文，可以使用中划线 - 作为连接符，文件名中不要出现空格。

字符编码

所有文件采用UTF-8（不含BOM）编码。
<head>
    <meta charset="utf-8">
<head/>

使用小写

  • 所有的HTML标签小写；
  • 所有的HTML属性小写；
  • 所有的样式名及规则小写。

多写注释

大的模块处必须加注释。容易出错的地方要写注释，说明问题及注意事项。

其他

  • 为表单元素添加 <label> 标签，并赋予 for 属性，对其进行描述；
    for属性能让鼠标点击label标签的时候，同时focus到对应的表单元素上，增加响应区域。
  • 为 img 元素添加 alt 属性。
    alt属性的内容为对该图片的简要描述，这对盲人用户和在图像无法加载时都非常有意义。

HTML 规范

文档类型

  • 统一使用HTML5的标准文档类型：<!DOCTYPE html>；
    HTML5文档类型前后兼容，易记易写。
  • 在文档doctype声明之前，不允许加上任何非空字符。
    任何出现在doctype声明之前的字符都将使得HTML文档进入非标准模式。

省略type属性

引入CSS和JavaScript文件时一般不指定他们的type属性。
在HTML5规范中， text/css 和 text/javascript 分别是他们的默认值。
错误写法：
<link type="text/css" rel="stylesheet" href="base.css">
<script type="text/javascript" src="base.js"></script>
正确写法：
<link rel="stylesheet" href="base.css">
<script src="base.js"></script>

省略自闭合标签尾部斜线

例：用 <br> 而不用 <br/>。
HTML5 规范中已明确说明这是可选的。

结构

  • 结构、表现、行为三者分离，避免（减少）内联样式和脚本。
    使用 <link> 标签引入css文件，并置于 <head> 中
    使用 <script> 引入js文件，并置于 <body> 底部。
  • 将每个块元素、列表元素或表格元素都放在新的一行；大的模块之间用空行隔开，使模块更清晰，方便后期维护。
  • 减少不必要的标签嵌套，保持最小的复杂度。

语义化

根据HTML标签本身的用途去使用。
错误写法：
<p>这是一个标题</p>
正确写法：
<h1>这是一个标题</h1>

属性顺序

HTML标签的属性按照以下顺序排列，提高代码易读性：
  • class
  • id
  • src、for、type、href
  • alt

HTML模板

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <title>...</title>
    <meta name="keywords" content="...">
    <meta name="description" content="...">
    <meta name="robots" content="...">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="img/apple.png">
    <link rel="stylesheet" href="css/....css">
</head>
<body>
    <div>
    ...
    </div>
    <script src="js/....js"></script>
</body>
</html>

CSS 规范

文件引用

  • 使用 <link rel="stylesheet" href="base.css"> 的方式调用外部样式；
  • 不要在CSS文件中使用 @import ；
  • 不要在HTML文件中写行内样式。
一般来说，页面中只允许使用 <link> 标签引入CSS文件。

书写格式

CSS 说明：
.container 选择器 {background-color属性: #123456值;声明 padding属性: 20px 16px值;声明}
  • 多个选择器使用同一声明块时，每个独立的选择器占用一行；
  • 一个声明块中的多条声明，每个独立的声明占用一行；
  • 声明块的左括号前保留一个空格；
  • 每条声明的“:”后保留一个空格；
  • 所有的十六进制值都用小写，并尽量简写；
  • 不为0值指定单位；
  • 每条声明的最后都以“;”结束；
  • 带前缀的属性： 
    img {
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
       -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
        -ms-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
         -o-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}
不推荐写法 
h1,h2,h3{padding:0px;background-color:#DDEEFF;font-weight:normal }
推荐写法 
h1,
h2,
h3 {
    padding: 0;
    background-color: #def;
    font-weight: normal;
}

选择器命名

  • 命名必须由单词、数字和中划线 - 组成；
  • 命名中不允许使用拼音（约定俗成的除外，如：weibo, baidu），尤其是缩写的拼音、拼音与英文的混合。
使用中划线（减号） - 作为连接符，而不是下划线 _ 。

声明顺序

定位与显示
display、visibility、position、z-index、float、clear、overflow...
盒模型相关
width、height、padding、margin、border、box-shadow...
背景
background...
文字排版
font、color、text-align、line-height、text-indent...
CSS3动画
transition、animation...

开发工具

关于规范

规范名称 前端开发规范
当前版本 1.05 beta
最后更新 2016/08/13

</> with ❤ by linking

arrow_upward