本文主要参考了 @mdo 的代码风格，这里从中摘选了需要被强调的部分，以及给出了在 CreditCloud 实践中与其不一样的地方。以下所列的风格指导在 CreditCloud P2P 产品开发中必须遵守，而 @mdo 的风格作为推荐可做参考。
本文包括对 HTML 和 CSS 的代码风格指导。
- 不使用 tab 制表符，无论 HTML、CSS、JS 文件均使用 4 个空格作为缩进，设置编辑器将 tab 键自动输出 4 个空格
- 设置编辑器将文件保存为 UTF-8 编码
静态文件均放在 /assets 目录下，CSS/Less 文件放在 /assets/css 下，JS 文件放在 /assets/js 下，图片文件放在 /assets/img 下。
对于代码中的文件引用地址，均使用 /assets 开头的绝对路径，而不使用相对路径。所以需要运行 P2P 开发代码或者启动静态文件服务器，访问相应的本机服务器的 http:// 开头的地址，而不是直接访问静态文件（浏览器地址以 file:// 开头）
- 对于属性的定义，确保全部使用双引号，绝不要使用单引号。
- 必须在自闭合 (self-closing) 元素 (如
link、img、br) 尾部添加斜线<img scr="/assets/a.jpg" alt="..." />——虽然在 HTML5 规范中是可选的，但是这个结尾斜线对我们使用的模板解析器来说是必须的。 - 不要省略可选的结束标签（closing tag）（例如，
</p>、</li>或</body>），原因同上。
必须添加 doctype，一般是加到 layout 文件头部：<!DOCTYPE html>
添加以下这些标签在 <head> 中
- 指定字符编码：
<meta charset="UTF-8"> - 指定国产套壳浏览器使用 webkit 内核：
<meta name="renderer" content="webkit"> - 不让百度搜索结果为用户返回你的网站“移动版”：
<meta http-equiv="Cache-Control" content="no-siteapp" />
前面文件组织这部分提到过，引用 CSS、JS 及图片文件均使用 /assets/ 开头的绝对路径。不使用 @import 引入 CSS 而只使用 <link> 标签，不使用不必要的 type 属性。
StartKit 的静态服务器包含了即时编译 less 文件的功能，可以选择用 less 来开发 CSS，也可以直接写 css 文件。
使用 typo.css 作 CSS Reset，使用包含了除了 normalize.css (reset 功能) 的 Bootstrap 作为基础框架，另外使用 Font-Awesome 以及 Pure.css 的网格系统。
StartKit 里已包含这些框架，请在此基础上开发。
尽量不修改全局 tag 的样式，如有必要只通过改变 variables.less 文件来修改。注意 base.css 只在静态文件服务器启动后第一次访问时编译，如改动过 base.less 或 variables.less，需重启静态文件服务器。
如果要使用等分的网格系统，请使用 Pure.css 框架的，而不使用 Bootstrap 的，注意 .pure-g .pure-u-* class 名改为 .p-g .p-u-*，并且添加了 7 等分的网格（用于日历）。
<div class="p-g">
<div class="p-u-1-5">1/5</div>
<div class="p-u-4-5">
<div class="p-g">
<div class="p-u-1-7">1/7</div>
<div class="p-u-1-7">1/7</div>
<div class="p-u-1-7">1/7</div>
<div class="p-u-1-7">1/7</div>
<div class="p-u-1-7">1/7</div>
<div class="p-u-1-7">1/7</div>
<div class="p-u-1-7">1/7</div>
</div>
</div>
</div>命名方式为小写字母、数字加连字符-，所有 class 除了是用于复用的功能性 class 使用 u- 作为前缀外（如 u-h20 表示上下空 20 像素），都添加 s- 前缀
.s-header {
/* ... */
}
.s-header-menu {
/* ... */
}
.u-h20 {
clear: both;
height: 20px;
overflow: hidden;
}对于从基础上衍生出来改变个别属性的，在后面加两个下划线__后加状态或分类名
.s-loan-in-list {
/* 列表内投资项目基础样式 */
}
.s-loan-in-list__scheduled {
/* 针对计划中的投资项目改动的样式 */
}如果只有两个状态，状态名应该加一个 is 前缀
.s-header-nav-item {
/* ... */
}
.s-header-nav-item__is-active {
/* ... */
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent