代码规范

京东凹凸实验室前端开发规范

概览 📋

内容 👹

命名

类名使用小写字母，以中划线分隔
id 采用驼峰式命名
scss 中的变量、函数、混合、placeholder 采用驼峰式命名
ID 和 class 的名称总是使用可以反应元素目的和用途的名称，或其他通用的名称，代替表象和晦涩难懂的名称

.fw-800 { font-weight: 800; }
.red { color: red; }

.heavy { font-weight: 800; }
.important { color: red; }

选择器

css 选择器中避免使用标签名

从结构、表现、行为分离的原则来看，应该尽量避免 css 中出现 HTML 标签，并且在 css 选择器中出现标签名会存在潜在的问题。

使用直接子选择器

很多前端开发人员写选择器链的时候不使用直接子选择器（注：直接子选择器和后代选择器的区别）。有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而，在任何情况下，这是一个非常不好的做法。如果你不写很通用的，需要匹配到 DOM 末端的选择器，你应该总是考虑直接子选择器

.content .title { 
  font-size: 2rem; 
}

.content > .title { 
    font-size: 2rem; 
}

尽量使用缩写属性

border-top-style: none; 
font-family: palatino, georgia, serif; 
font-size: 100%; line-height: 1.6;
padding-bottom: 2em; 
padding-left: 1em;
padding-right: 1em; 
padding-top: 0;

border-top: 0; 
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

每个选择器及属性独占一行

button {
     width: 100px; 
     height: 50px;
     color: #fff;
     background: #00a0e9;
 }

button { 
    width: 100px;
    height: 50px;
    color: #fff;
    background: #00a0e9;
}

省略 0 后面的单位

div {
    padding-bottom: 0px;
    margin: 0em; 
}

div {
    padding-bottom: 0;
    margin: 0; 
}

避免使用 ID 选择器及全局标签选择器防止污染全局样式

#header { 
    padding-bottom: 0px;
    margin: 0em;
 }

.header { 
    padding-bottom: 0px;
    margin: 0em;
}

编码规范

样式文件必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 “UTF-8”
字符 @charset “”; 都用小写字母，不能出现转义符，编码名允许大小混写
考虑到在使用“UTF-8”编码情况下 BOM 对代码的污染和编码显示的问题，在可控范围下，坚决不使用 BOM。（更多关于 BOM 可参考 BOM的介绍和「带 BOM 的 UTF-8」和「无 BOM 的 UTF-8」有什么区别？）

@charset "UTF-8";

.jdc{}

/**
 * @desc File Info
 * @author Author Name
 * @date 2015-10-10
 */
 
/* @charset规则不在文件首行首个字符开始 */
@charset "UTF-8";

.jdc{}
---
@CHARSET "UTF-8";
/* @charset规则没有用小写 */

.jdc{}
---
/* 无@charset规则 */
.jdc{}

代码风格

代码格式化

统一使用展开格式

样式书写一般有两种：一种是紧凑格式 (Compact)

.jdc{ display: block;width: 50px;}

一种是展开格式（Expanded）

.jdc{
    display: block;
    width: 50px;
}

代码大小写

样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。

.jdc{
	display:block;
}

.JDC{
	DISPLAY:BLOCK;
}

选择器

尽量少用通用选择器 *
不使用 ID 选择器
不使用无具体语义定义的标签选择器

/* 推荐 */
.jdc {}
.jdc li {}
.jdc li p{}

/* 不推荐 */
*{}
#jdc {}
.jdc div{}

代码缩进

统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）

.jdc {
    width: 100%;
    height: 100%;
}

分号

每个属性声明末尾都要加分号；

.jdc {
    width: 100%;
    height: 100%;
}

代码易读性

左括号与类名之间一个空格，冒号与属性值之间一个空格

.jdc { 
    width: 100%; 
}

.jdc{ 
    width:100%;
}

逗号分隔的取值，逗号之后一个空格

.jdc {
    box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

.jdc {
    box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

为单个css选择器或新申明开启新行

.jdc, 
.jdc_logo, 
.jdc_hd {
    color: #ff0;
}
.nav{
    color: #fff;
}

.jdc,jdc_logo,.jdc_hd {
    color: #ff0;
}.nav{
    color: #fff;
}

颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要带有不必要的 0

.jdc {
    color: rgba(255,255,255,.5);
}

.jdc {
    color: rgba( 255, 255, 255, 0.5 );
}

属性值十六进制数值能用简写的尽量用简写

.jdc {
    color: #fff;
}

.jdc {
    color: #ffffff;
}

不要为 0 指明单位

.jdc {
    margin: 0 10px;
}

.jdc {
    margin: 0px 10px;
}

属性值引号

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

.jdc { 
	font-family: 'Hiragino Sans GB';
}

.jdc { 
	font-family: "Hiragino Sans GB";
}

属性书写顺序

建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

CSS3浏览器私有前缀写法

CSS3 浏览器私有前缀在前，标准前缀在后

.jdc {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

# 代码规范

# 概览 📋

# 内容 👹

# 命名

# 选择器

# css 选择器中避免使用标签名

# 使用直接子选择器

# 尽量使用缩写属性

# 每个选择器及属性独占一行

# 省略 0 后面的单位

# 避免使用 ID 选择器及全局标签选择器防止污染全局样式

# 编码规范

# 代码风格

# 代码格式化

# 代码大小写