---
title: css的命名规范
date: 2017-07-17 10:51:20
tags: [css命名规范]
categories: CSS
---
## 关于 css 的一些命名规范

* css设计模式：SMACSS
* BEM 命名规范
* javascript Hook

### SMACSS

首先，它定义了五种样式：

* base（基本）
* layout（布局）
* module（模块）
* state（状态）
* theme（皮肤）

#### base（基本）

* 在该样式中不适用class，id等选择，只对标签元素本身做设定，可以有属性选择器和伪类：

```css
html{}
input[type=text] {}
a:hover {}
```

#### layout(布局)

* 整个网站的【大架构】的外观，类似header，footer

```css
#header {}
.sidebar {}
```

> 通常只有一个选择器，一个id，或一个class

#### module（组件）

* 可复用组件，不需要任何prefix，

#### partial

比 layout 范围小，可以是特定单一领域下特别的设定，通常会将名称加在子 class 作为 prefix 

```css
.nav--main_item {}
```

#### state

* 定义状态，例如：.active, .on 

```html
<ul>
    <li> </li>
    <li class="active"> </li>
<ul>
```

> .is-active 比.active 来的好读

#### skin（皮肤）

* 画面上所有主视觉的定义，例如：border-color，background-image，font-family等，负责大架构上的视觉样式。

### BEM 命名规范

* BEM 即 block，element，modifier 缩写
* 将 block 区块作为起始开头，element为 block下的元素，modifier为该元素的属性。
* block 和 element 用 __ 双下划线区分， 不同的modifier 则用 两个--区分，一个-表示这个 class 不依赖任何 block 或者 element ，是个独立的存在：.page-container.

```css
.sidebar {
    .sidebar--left__section {
        .sidebar--left__section--header {}
    }
}
```

### javascript hook

* 我理解的是，在 css 选择器的前缀加个动作或者 “js”，来表示该标签被 js 调用过
> html 里 class 之间用两个空格比一个空格好阅读