这一期不涉及框架更新，我们来简单介绍一个各种 CSS 写法。各种写法大致就是相互借鉴吧。
BEM
menu 是 block 区块，而 item 是 element 元素，selected 是 modify 状态。相比较普通的而言，它没有优先级问题。
由于我们的纯 css 面向的是前端页面，优先级问题出现的还是比较少。一些富交互的 UI 框架大多使用这种类型。
OOCSS
大概像这样，跟辅助类比较像。
或者这样，这里加了一个命名空间 s 。跟 BEM 结合起来画风像这样。
.btn.btn--small.btn--red.btn--blue.btn--large
SMACSS
- Base Rules (全局重置样式等)
- Layout Rules 用l-或layout-这样的前缀，例如：.l-header、.l-sidebar。见过京东的采用这种简写，不过他会加一个注释，注明 layout 的缩写是 l。
- Module Rules 用模块本身的命名，例如图文排列的.media、.media-image。
- State Rules 用 is- 前缀，例如：.is-active、.is-hidden。比如 bulma 里面的一些修饰符，其实都是 is 或者 has 开头的。
- Theme Rules 如果作为单独 class，用 theme- 前缀，例如 .theme-a-background、.theme-a-shadow。
.layout-header {}.layout-container {}.layout-sidebar {}.layout-content {}.layout-footer {} 也可以自定义
.todolist{}.todolist-title{}.todolist-image{}.todolist-article{} 在 Vue 中的单个文件，其实就是模块，加上了 scoped 之后，都会有自己的模块 ID，其实就相当于加上了这样的前缀，而 react 也有一种叫做 CSS-BLOCKS 的东西。
CSS-BLOCKS
好像只能用在 react 里面，在官网没看到单独使用的例子，它编译出来的 class 名称会自动缩短。笔者 react 经验不多，所以也就没有真正是实践与深究这个框架。
通过 scope 约束作用域，通过 state 创建状态，比如激活状态，不可用状态等等。
不过他也有一些缺点或者说强约定，一些伪类不支持嵌套，以及属性选择器，id 选择器等等。
:scope {}:scope[state|enabled] { }.sub-element { }// 任意值时，包括无值.sub-element[state|color] { }// 特殊值.sub-element[state|color="red"] { }.sub-element[state|color="blue"] { }.sub-element[state|color="yellow"] { } 当映射到 jsx 上面时候，要这样使用。
:scope { }:scope[state|enabled] { }.button { }.icon { }.icon[state|inverse] { } AtomicCSS
这个像函数调用，在 class 上面有些异类，邪教的感觉。不过在 js 里面倒是感觉正常些，被 Block-CSS 接纳。
.Fl\(start\) { float: left;}.M\(10px\) { margin: 10px;} ITCSS
用这个规则写 sass 嵌套会少一些。
设置
可被覆盖的配置项
- 基本 （重置样式）
- 颜色 （基本色调）
- 排版 （行高，字体，字号）
- 动画 （animation 帧）
工具
utils 函数
- 函数 （@function 定义的）
- 占位符 （sass 中 % 开头的，选择器的复用）
- 混合宏 （mixin，sass 中 = 开头的）
- 媒体查询
sass 混合宏
=from($device) @media screen and (min-width: $device) @content
sass 函数
@function powerNumber($number, $exp) $value: 1 @if $exp > 0 @for $i from 1 through $exp $value: $value * $number @else if $exp < 0 @for $i from 1 through -$exp $value: $value / $number @return $value
供应商
vendor ，会 php 的应该对这个文件很熟悉，noder 可以理解为 node_modules。即通过 npm 安装的第三方工具包，reset.css 等。
对象
通产有一个命名空间（o-）, Object 的缩写，所有页面都是用的对象类，比如容器，布局等。
- o-page 包裹一下，避免想要操作整个页面需要选取 html
- o-gird 网格布局
- o-container 某个组件外部容器类，固定最大宽度，可伸缩
- o-main 主体内容区域，跟 main 标签类似
- o-content 文本内容区域，或内部容器。
元素
element， 以 e- 开头
组件
component，以 c- 开头
作用域
scope 以 s- 开头
模式
pattern 以 p- 开头，组件的组合体，不可复用的结构。
其他命名空间
is- 和 js-，is- 表状态，js 表示 javascript 绑定的事件。
说了那么多，你喜欢哪一个呢？本 css 框架，不涉及任何 css 书写规范，这些更多应用于实际页面开发，而不是框架开发，为所有组件都添加一个 c- 命名空间，感觉也很奇怪.