CSS规范

## 编码规范

### 1. 推荐采用竖向排版方式，便于选择器的寻找和阅读

```html
.king-class1 .itm{
    height:17px;
    line-height:17px;
    font-size:12px;
}

/* 这是一个有嵌套定义的选择器 */
@media all and (max-width:600px) {
    .king-class1 .itm {
        height:17px;
        line-height:17px;
        font-size:12px;
    }
    .king-class2 .itm {
        width:100px;
        overflow:hidden;
    }
}
```

### 2. 省略值为 0 时的单位

为节省不必要的字节同时也使阅读方便，我们将 0px、0em、0%等值缩写为 0。

```html
.king-tree-box {
    margin:0 10px;
    background-position:50% 0;
}
```

### 3. 使用单引号

省略 url 引用中的引号，其他需要引号的地方使用单引号

```html
.magic-box {
    background:url(bg.png);
}
.magic-box:after {
    content:'.';
}
```

### 4. 根据属性的重要性按顺序书写

只遵循横向顺序即可，先显示定位布局类属性，后盒模型等自身属性，最后是文本类及修饰类属性

- 私有在前，标准在后 先写带有浏览器私有标志的，后写 W3C 标准的

```html
.magic-box {
    -webkit-box-shadow:0 0 0 #000;
    -moz-box-shadow:0 0 0 #000;
    box-shadow:0 0 0 #000;
}
```

### 1.【强制】使用垂直排版

```css
/* ✗ 不推荐 */
.demo {width: 100px; height: 100px; color: #666;}

/* ✓ 推荐 */
.demo {
    width: 100px; 
    height: 100px; 
    color: #666;
}
```

### 2.【强制】选择器和左`{`之间空一格，属性和值之间空一格

```css
/* ✗ 不推荐 */
.demo{
    width:100px; 
    height:100px; 
    color:#666;
}

/* ✓ 推荐 */
.demo {
    width: 100px; 
    height: 100px; 
    color: #666;
}
```

### 3. 【强制】组合选择器不要在一行

```css
/* ✗ 不推荐 */
.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td{
    vertical-align: middle;
}

/* ✓ 推荐 */
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td {
    vertical-align: middle;
}
```

## 命名规范

注意：命名可以使用 class 选择器，也可以使用 id 选择器。但希望尽量使用 class 选择器

### 1. 使用语义化命名，尽量不使用表现化的或没有语义的命名

```css
/* ✓ 推荐 */
.magic-search-box{}
.king-btn{}
/* ✗ 不推荐 */
.text-left{}
.green-text{}
.abc{}
```

### 2. 命名统一使用`-`来连接

```css
/* ✓ 推荐 */
.magic-header .magic-footer .magic

/* ✗ 不推荐 */
.magic_header .magic_footer .magicHeader .magicFooter
```

### 3. 命名统一添加前缀

使用前缀是让类名容易识别，同时避免和其它组件冲突。因为引用的 UI 库很多，如 bootstrap、kendoui，后面会接入更多 UI 库和组件，所以在 css 命名的时候能尽量使用前缀。

```css
/* ✓ 推荐 */
.magic-header .magic-content
/* 表格 table1为模块名 */
.king-table1-title .king-table1-header .king-table1-footer
/* ✗ 不推荐 */
.item-grid .item-table
```

### 4. 相同语义的不同类命名

- 方法：直接加数字或字母区分即可（如：.magic-list、.magic-list2、.magic-list3 等，都是列表模块，但是是完全不一样的模块）。
- 扩展类必须和其基类同时使用于同一个节点：class="g-xxx g-xxx-1" class="m-xxx m-xxx-1" class="u-yyy u-yyy-1" class="xxx xxx-yyy"。

```html
.magic-logo2、.magic-logo3、.ling-btn、.ling-btn2
```

### 5. CSS 的分类，主要包括以下类型

- 布局样式（layout）：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！
- 模块样式（common）：通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册、各种列表、评论、搜索等！
- 元件样式（unit）：通常是一个不可再分的较为小巧的个体，常被重复用于各种模块中！比如按钮、输入框、loading、图标等
- 辅助样式（fun）：将一原子样式独立出来，如清浮动，字体大小、padding、margin

```css
/* 布局样式 */
.magic-header,.magic-footer a{
    background:url(images/sprite.png) no-repeat;
}
.king-table1-header{}
.king-form2-group{}

/* 模块样式 */
.magic-common-search{}
.king-common-nav{}

/* 元件样式 */
.magic-unit-btn{}
.magic-unit-loading{}

.king-table2-btn{}
.king-table2-loading{}

.king-fun-fl{float: left;}
```

## 注释规范

内容比较少时可以只在顶部加注释，内容比较多时在尾部加结束标签`/* 注释内容 end */`

```css
/* 新建任务 start */

.new-task{}

/* 新建任务名 */
.task-name{color:\#333;}

/* 新建任务时间 */
.task-created-time{background:url(img/clock.png) no-repeat;}

/* 新建任务 end */
```

## 常用命名

### 1. 布局

| 语义   | 命名      |
| ------ | --------- |
| 容器   | container |
| 头部   | header    |
| 脚部   | footer    |
| 侧栏   | sidebar   |
| 盒容器 | wrap/box  |
| 内容   | content   |

### 2. 状态

| 语义 | 命名     |
| ---- | -------- |
| 成功 | success  |
| 警告 | warning  |
| 失败 | failure  |
| 错误 | error    |
| 失效 | disabled |
| 选中 | selected |
| 展开 | expand   |
| 收起 | packup   |
| 打开 | open     |
| 关闭 | close    |

### 3. 模块

| 语义   | 命名   |
| ------ | ------ |
| 导航   | nav    |
| 菜单   | menu   |
| 选项卡 | tab    |
| 表格   | table  |
| 列表   | list   |
| 搜索   | search |
| 轮播图 | slide  |
| 提示   | tip    |

## 常用值

### 1. 颜色

| 颜色    | 相应值  | 效果 |
| ------- | ------- | ---- |
| info    | #88c3ff |      |
| primary | #57a3f1 |      |
| warning | #ffc349 |      |
| danger  | #ff7979 |      |
| success | #5bd18b |      |

### 2. 字体

> 常看到有些字体名称变成了乱码，这是由于编写者将中文字体的名字直接写成了中文，并且再上传或者拷贝复制的时候无意间变成了乱码。为了避免这种状况出现，在 CSS 文件中使用中文字体时，最好使用中文字体的英文名称，常用中文字体的英文名称对照表如下:

| 中文名   | 英文名          | Unicode              |
| -------- | --------------- | -------------------- |
| 宋体     | #SimSun         | \5B8B\4F53           |
| 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 黑体     | SimHei          | \9ED1\4F53           |

### 3. 字体全局统一设置

font-family: -apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,Helvetica Neue,Arial;