前端开发规范：CSS 代码规范指南

CSS 代码规范指南

代码风格

代码格式化

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

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

一种是展开格式（Expanded）

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

团队约定: 统一使用展开格式书写样式

代码大小写

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

/* 推荐 */
.web {
    
    
  display: block;
}

/* 不推荐 */
.web {
    
    
  display: BLOCK;
}

选择器

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

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

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

分号

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

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

代码易读性

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

/* 推荐 */
.web {
    
    
  color: rgba(255, 255, 255, 0.5);
}

/* 不推荐 */
.web {
    
    
  color: rgba(255, 255, 255, 0.5);
}

不要为 0 指明单位

/* 推荐 */
.web {
    
    
  margin: 0 10px;
}

/* 不推荐 */
.web {
    
    
  margin: 0px 10px;
}

CSS3 浏览器私有前缀写法

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

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

class 命名

避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
class 名称应当尽可能短，并且意义明确。
随着项目模块增多，防止因为不同页面或者组件中定义的 css 冲突，所以规范 css 语法也变得至关重要，推荐:BEM，分别代表着:Block(块)、Element(元素)、Modifier(修饰符)

.user-info {} # user-info 是一个块，我理解是一个模块
.user-info--feature {} # user-info--feature 是一个修饰符，用来表示这个块的不同状态
.user-info__title{} # user-info__title 是一个元素，属于userinfo模块下的，多个元素组成块

<div class="user-info">
  <div class="user-info__title">张三</div>
  <div class="user-info__age">18</div>
</div>

<div class="tabs">
  <div class="tab tab-active">选中的标签</div>
  <div class="tab ">标签二</div>
  <div class="tab ">标签三</div>
</div>

css 属性声明顺序

Positioning
Box model
Typographic
Visual
Misc

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。

其他属性只是影响组件的内部或者是不影响前两组属性，因此排在后面。

.declaration-order {
    
    
  /* Positioning  定位和层级等属性*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model 盒子模型或者浮动相关*/
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography 字体配置*/
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual 背景色边框等*/
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc 透明度和动画等*/
  opacity: 1;
  transition: all 0.5s;
}

SCSS 规范

我们开发将使用 SCSS 来作为 css 的预处理器

变量

可复用属性尽量抽离为页面变量，易于统一维护

// CSS
.web {
  color: red;
  border-color: red;
}

// SCSS
$color: red;
.web {
  color: $color;
  border-color: $color;
}

混合(mixin)

根据功能定义模块，然后在需要使用的地方通过 @include 调用，避免编码时重复输入代码段

// CSS
.web_1 {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.web_2 {
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

// SCSS
@mixin radius($radius: 5px) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
.web_1 {
  @include radius; //参数使用默认值
}
.web_2 {
  @include radius(10px);
}

// CSS
.web_1 {
  background: url(/img/icon.png) no-repeat -10px 0;
}
.web_2 {
  background: url(/img/icon.png) no-repeat -20px 0;
}

// SCSS
@mixin icon($x: 0, $y: 0) {
  background: url(/img/icon.png) no-repeat $x, $y;
}
.web_1 {
  @include icon(-10px, 0);
}
.web_2 {
  @include icon(-20px, 0);
}

function 函数

@function pxToRem($px) {
  @return $px / 10px * 1rem;
}
.web {
  font-size: pxToRem(12px);
}

运算规范

运算符之间空出一个空格

.web {
  width: 100px - 50px;
  height: 30px / 5;
}

注意运算单位，单位同时参与运算，所以 10px 不等于 10，乘除运算时需要特别注意

// 正确的运算格式
.web {
  width: 100px - 50px;
  width: 100px + 50px;
  width: 100px * 2;
  width: 100px / 2;
}