这一期不涉及框架更新，我们来简单介绍一个各种 CSS 写法。各种写法大致就是相互借鉴吧。
BEM
<ul class="menu">
<li class="menu__item menu__item--selected"></li>
<li class="menu__item"></li>
<li class="menu__item"></li>
</ul>
menu 是 block 区块，而 item 是 element 元素，selected 是 modify 状态。相比较普通的而言，它没有优先级问题。
由于我们的纯 css 面向的是前端页面，优先级问题出现的还是比较少。一些富交互的 UI 框架大多使用这种类型。
OOCSS
大概像这样，跟辅助类比较像。
<div class="size1of4 bgBlue solidGray mts mlm mrm mbm"></div>
或者这样，这里加了一个命名空间 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] { }
<section state:enabled={{isEnabled}}>
<button class="button">
<div class="icon" state:inverse={{isInverse}}></div>
{{value}}
</button>
</section>
AtomicCSS
这个像函数调用，在 class 上面有些异类，邪教的感觉。不过在 js 里面倒是感觉正常些，被 Block-CSS 接纳。
<div class="BfcHack M(10px)">
<a class="Fl(start) Mend(10px)">
<img >
</a>
</div>
.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- 命名空间，感觉也很奇怪.
网友评论