Front Coding Standard
Front Coding Standard
目录:
基本原则
HTML
CSS
JavaScript
资料引用
一. 基本原则
1. 结构、样式、行为分离
* 尽量确保文档和模板只包含 HTML 结构，样式都放到样式表里，行为都放到脚本里。2. 能使用html/css解决的问题就不要使用JS
3. 使用不带 BOM 的 UTF-8 编码。
* 在 HTML中指定编码 <meta charset="utf-8"> ；4. 一律使用小写字母
/* Recommended */
color: #e5e5e5;
/* Not recommended */
color: #E5E5E5;
5. 省略外链资源 URL 协议部分
* 省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址，避免 Mixed Content 问题，减小文件字节数。
* 其它协议（ftp 等）的 URL 不省略。
6. 统一注释
1. HTML 注释
模块注释
<!-- 文章列表列表模块 -->
<div class="article-list">
...
</div>
区块注释
<!--
@name: Drop Down Menu
@description: Style of top bar drop down menu.
@author: Ashu(Aaaaaashu@gmail.com)
-->
2. CSS 注释
1. 组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；
/* ==========================================================================
组件块
============================================================================ */
/* 子组件块
============================================================================ */
.selector {
padding: 15px;
margin-bottom: 15px;
}
/* 子组件块
============================================================================ */
.selector-secondary {
display: block; /* 注释*/
}
.selector-three {
display: span;
}
JavaScript注释
单行注释
必须独占一行。// 后跟一个空格，缩进与下一行被注释说明的代码一致。
多行注释
避免使用 /*...*/ 这样的多行注释。有多行注释内容时，使用多个单行注释。
函数/方法注释
函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识。；
参数和返回值注释必须包含类型信息和说明；
当函数是内部函数，外部不可访问时，可以使用 @inner 标识；
文件注释
文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西。 应该提供文件的大体内容, 它的作者, 依赖关系和兼容性信息。如下:
/**
* @fileoverview Description of file, its uses and information
* about its dependencies.
* @author user@meizu.com (Firstname Lastname)
* Copyright 2015 Meizu Inc. All Rights Reserved.
*/
二. HTML
1. Class 与 ID
1. class 应以功能或内容命名，不以表现形式命名；
2. class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔；
3. 使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class；2. HTML 属性应该按照特定的顺序出现以保证易读性。
1. id
2. class
3. name
4. data-xxx
5. src, fro, type, href
6. title, alt
7. aria-xxx, role3. 引号 - 属性的定义，统一使用双引号。
三. CSS
1. Class 和 ID
1. 使用语义化、通用的命名方式；
2. 使用连字符 - 作为 ID、Class 名称界定符，不要驼峰命名法和下划线；
3. 避免选择器嵌套层级过多，尽量少于 3 级；
4. 避免选择器和 Class、ID 叠加使用；
5. 出于性能考量，在没有必要的情况下避免元素选择器叠加 Class、ID 使用。2. 声明顺序
1. Positioning
2. Box model
3. Typographic
4. Visual
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box model */
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #e5e5e5;
border-radius: 3px;
margin: 10px;
float: right;
overflow: hidden;
/* Typographic */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
/* Visual */
background-color: #f5f5f5;
color: #fff;
opacity: .8;
/* Other */
cursor: pointer;
}