CSS 规范

代码风格

代码格式化

样式书写一般有两种，团队约定使用展开格式
一种是紧凑格式 (Compact)

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

一种是展开格式（Expanded）

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

代码大小写

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

/* 推荐 */
.jdc{
    display:block;
}
    
/* 不推荐 */
.JDC{
    DISPLAY:BLOCK;
}

注意：如果是使用了css modules ，则使用驼峰命名

选择器

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

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

代码缩进

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

分号

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

.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: #ffffff;
}

不推荐：

.jdc {
    color: #fff;
}

不要为 0 指明单位

推荐：

.jdc {
    margin: 0 10px;
}

不推荐：

.jdc {
    margin: 0px 10px;
}

属性值引号

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

/* 推荐 */
.jdc { 
    font-family: 'Hiragino Sans GB';
}
/* 不推荐 */
.jdc { 
    font-family: "Hiragino Sans GB";
}

边框样式写法

线条粗细线条样式颜色

border: 1px solid #d9d9d9;

属性书写顺序

建议遵循以下顺序：

布局定位属性：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;
}

如果框架使用了auto-prefix，则不需要处理浏览器私有前缀

注释规范

单行注释

注释内容第一个字符和最后一个字符都是一个空格字符，单独占一行，行与行之间相隔一行

推荐：

/* Comment Text */
.jdc{}
/* Comment Text */
.jdc{}

不推荐：

/*Comment Text*/
.jdc{
    display: block;
}
.jdc{
    display: block;/*Comment Text*/
}

模块注释

注释内容第一个字符和最后一个字符都是一个空格字符，/* 与模块信息描述占一行，多个横线分隔符-与*/占一行，行与行之间相隔两行

推荐：

/* Module A 
---------------------- */
.mod_a {}


/* Module B
 ---------------------- */
.mod_b {}

不推荐：

/*Module A ---------------------- */
.mod_a {}


/* Module B ---------------------- */
.mod_b {}

文件信息注释

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

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

覆盖规范

尽可能少用 importent
vue 单文件组件统一使用 css/less/sass scoped
每个页面/组件需要有一个全局唯一的标识 id/class，属于它下面的样式都需要加上该唯一标识
避免全局修改已有样式，必须具体到页面上(通过权重)
禁用全匹配*选择器（特殊情况除外，如初始化）

vue 单文件组件修改样式不生效可使用 /deep/ 或 >>>

媒体查询

对于内部管理系统，商务多使用 ThinkPad 笔记本，屏幕分辨率为 1366*768。建议使用Chrome devtool进行适配

优先 PC 端

默认按最大尺寸进行布局，当尺寸缩小时逐步变成移动端布局

body {
  background: gray;
}
@media screen and (max-width: 1366px) {
  body {
    background: red;
  }
}
@media screen and (max-width: 1200px) {
  body {
    background: yellow;
  }
}
@media screen and (max-width: 920px) {
  body {
    background: green;
  }
}
@media screen and (max-width: 768px) {
  body {
    background: black;
  }
}

优先移动端

默认按最小尺寸进行布局，当尺寸放大时逐步变成 PC 端布局

body {
  background: gray;
}
@media (min-width: 768px) {
  body {
    background: red;
  }
}
@media (min-width: 920px) {
  body {
    background: green;
  }
}
@media (min-width: 1200px) {
  body {
    background: yellow;
  }
}
@media (min-width: 1366px) {
  body {
    background: red;
  }
}

如果需要做打印样式进行适配，需要使用@media print

@media print {
  body {
    background: #fff;
  }
}

单位规范

CSS 单位有两种，分别是绝对单位和相对单位。

常用绝对单位

px：像素 (计算机屏幕上的一个点)
cm：厘米
in：英寸
pt：磅 (1 pt 等于 1/72 英寸)

常用相对单位

%：父元素百分比
vw：视口宽度百分比
vh：视口高度百分比
em：当前字体倍数
rem：根元素字体倍数
rpx：微信小程序专用，规定屏幕宽为 750rpx

使用较多的单位有 px、%、rem 三种，建议 PC 端用 px 单位、移动端用 rem，需要具体控制尺寸还是使用 px
备注：如果需要计算不同单位下的值，可以使用 css3 方法 calc()_