CSS工程化演进、6种组织CSS的方法、现代CSS进化史、CSS in JS 简介

2018.4.17 二 21:41

A [CSS工程化演进]

https://zhuanlan.zhihu.com/p/32117359
<!– 原文
 $_WX
$_YX

由饿了么@cottom分享 –>

CSS 技术的演进

Web开发模块化趋势

预处理与后处理

预处理

比较流行的CSS预处理器有 Sass, Less 和 Stylus，CSS 预处理器的出现主要针对于 CSS 缺少编程语言的灵活性而生的，是引入了一些编程概念而生的 DSL，开发者编写简介的语义化 DSL 代码，由预处理器编译成 CSS。

以Sass为例，该预处理器支持.scss，.sass 文件类型，其语法支持变量、选择器嵌套、继承（extend）、混合（mixin）和一些逻辑语句，同时还支持跨文件的导入功能，因而使得开发者能够很好的使用编程思想书写样式。

从实际使用情况来看，几个预处理器各有优缺点，社区活跃度上看 Sass > Less > Stylus，在于
….

后处理

后处理器是对原生 CSS 进行处理并最终生成 CSS 的处理器，广义上还是个预处理器，与上面不同的是，它处理的对象是标准 CSS，比较典型的后处理工具有：

clean-css — 压缩 CSS
AutoPrefixer — 自动添加 CSS3 属性各浏览器的前缀
Rework — 取代 stylus 的插件化框架
PostCSS

PostCSS

PostCSS 一开始是从 AutoPrefixer 项目中抽象出来的框架，它本身并不对CSS做具体的业务操作，只是将CSS解析成抽象语法树（AST），样式的操作由之后运行的插件系统完成。正如其本身所言“Tra nsforming styles with JS plugins”

更多时候我们讨论的 PostCSS ，并不止是其解析 CSS 的核心工具，更包括它创建的插件系统，而今 PostCSS 最为吸引开发者的正是其扩展性较强的插件系统和丰富的插件支持。
…
常用的插件:

autoprefixer — 自动补全CSS属性兼容性前缀
postcss-cssnext — 使用最新的 CSS 语法
postcss-modules — 组件内自动关联样式至选择器
stylelint — CSS 语法检查器

namespace 约束

一方面我们需要关注技术能够带来代码上的模块化，另一方面我们又要思考如何使用一个良好的风格架构起项目中的 CSS。CSS 除了代码外，另一个很重要的就是 CSS 选择标记，但 CSS 选择器的命名空间是全局的，并没有局部的概念，因而如何利用好这个全局的空间，选择良好的结构风格，也是在开发过程中必须考虑的。

OOCSS

OOCS （Object-Oriented CSS）即面向对象 CSS，主要有两个核心原则

分离结构和皮肤（separate structure and skin）

皮肤即一些重复的视觉特征，如边框、背景、颜色，分离是为了更多的复用；结构是指元素大小特征，如高度，宽度，边距等等。

分离容器和内容（separate container an content）

打破容器内元素对于容器的依赖，元素样式应该独立存在。

从实践中看出，使用OOSCC范式，遵守了 DRY 的原则，能够大量减少重复的样式代码，提高代码复用；
同时，视觉元素可以意灵活组合各个类名，展示不同的效果，丰富的类名也同时使得元素有着更好的可读性；
另一方面，由于容器和内容的分离，CSS 完成了与 HTML 结构解耦。

但同时也会带来一些缺点，抽象复用会使class越来越多，极端情况会产生可能产生很多原子类，这对于那些偏向于“单一来源原则”的开发者来说并不受欢迎。

SMACSS

SMACSS(Scalable and Modular Architecture for CSS) 即模块化架构的可扩展CSS，它主要是将规则分为5类

基础（Base）
tag select的样式，定义最基础全局样式，如CSS REST。
布局（Layout）
将页面分为各个区域的元素块
模块（Module）
可复用的单元。在模块中需要注意的是选择器一律选择 class selector，避免嵌套子选择器，减少权重，方便外部覆盖。
```
<divclass="pod pod-constrained">...</div>
<divclass="pod pod-callout">...</div>
.pod { width: 100%; } .pod .pod-callout { width: 200px; } .pod .pod-constrained{}
```
状态（State）
状态 class 一般通过js动态挂载到元素上，可以根据状态覆盖元素上特定属性。
```
.tab{background-color:purple;...}
.is-tab-active{background-color:white;}
```
主题（Theme）
可选的视觉外观。一般根据需求有颜色，字体，布局等等，实现是将这些样式单独抽出来，根据外部条件（ data 属性，媒体查询等）动态设置。

SMACSS 的主要优点在于按照不同的业务逻辑，将整个 CSS 结构化分更加细致，约束好命名，最小化深度，在编写的时候，使用SMACSS规范能够更好的组织好 CSS 文件结构和 class 命名。

BEM

BEM 即Block Element Modifier；类名命名规则： Block__Element—Modifier

Block 所属组件名称
Element 组件内元素名称
Modifier 元素或组件修饰符

其核心思想就是组件化。首先一个页面可以按层级依次划分未多个组件，其次就是单独标记这些元素。BEM通过简单的块、元素、修饰符的约束规则确保类名的唯一，同时将类选择器的语义化提升了一个新的高度。

CSS IN JS

CSS modlue

CSS module 不同于 vjeux 的完全放弃 CSS，它只是选择了用 js 来管理样式与元素的关联，CSS Module 通过为每个本地定义的类名动态创建一个全局唯一类名，然后注入到UI上，实现编写样式规则的局部模块化。

css-loader 内置支持css-module，只需设置下查询参数，即可在JS中使用CSS文件的导入：

import style from'./Header.css'

styled-components

styled-components 也是一个完全的 css-in-js 方案，先看语法：

总结

B [6种组织CSS的方法]

译文
 原文

Ben Frain曾经说过, 写CSS容易, 扩展和维护难. 这篇文章介绍了一些解决方案的集合, 试图解决这个问题 .

OOCSS 面向对象 CSS

OOCSS是object-oriented CSS的缩写. 主要有两个意思:结构和设计分离、容器和内容分离

SMACSS 可扩展和模块化结构的 CSS

SMACSS是可扩展和模块化结构CSS的简称. 该方法的主要目标是减少代码量并简化代码维护.
Jonathan Snook把它归纳为5个部分:

Atomic CSS 原子 CSS

Atomic CSS是CSS架构的一种方法, 它的好处是写出基于视觉功能的小的, 单用途CSS类.

MCSS 多层 CSS

MCSS指的是多层CSS(Multilayer CSS). 这种样式写法建议将样式分成多个部分, 每个部分称为层(layers).

第0层或基础(Zero layer or foundation), 负责重置浏览器样式的代码(如: reset.css或者normalize.css);
基层(Base layer), 包括可重用元素的样式: buttons, input, hints等等.
项目层(Project layer), 包括单独的模块和”上下文” - 根据用户端浏览器或用于浏览的设备, 用户权限等对元素的样式进行调整.
装饰层(Cosmetic layer), 使用OOCSS风格来书写样式, 对元素外观做微小的调整. 建议仅留下影响外观的风格, 而不能破坏网站的布局(例如颜色和非关键缩进等).

AMCSS 属性模块 CSS

<div class="button button--large button--blue">Button</div>
// 通过属性来为这些CSS类分组.
<div button="large blue">Button</div>
// 为了避免属性名称冲突, 好的方式是为属性加上命名空间.
<div am-button="large blue">Button</div>

如果您使用了验证器去检查你的代码, 并且它(验证器)不喜欢类似于am-button这样的属性名称, 你可以把属性的命名空间(am-)换成data-. 例如: data-button.

/* CSS类选择器 */
.button { ... }
.button--large { ... }
.button--blue { ... }

/* CSS属性选择器 */
[am-button] { ... }
[am-button ~= "large"] { ... }
[am-button ~= "blue"] { ... }

如果您认为这段代码十分的不寻常, 可以尝试使用较为温和的AMCSS形式:

<div am-button am-button-large am-button-blue>Button</div>

FUN

FUN代表的是”Flat hierarchy of selectors, Utility styles, Name-spaced components.”

每个名称前面的字母都代表着一定的原则:

F, 选择器的扁平的层次结构: 建议使用CSS类选择元素(items), 避免不必要的级联, 杜绝使用id.
U, 实用(功能)样式: 鼓励创建原子(atomic)样式来解决典型的修正(微调)任务, 例如: w100表示width: 100%; 或者fr表示float: right;
N, 名称分割组件: Ben建议添加命名空间来指定特定模块元素的样式. 这种方法将避免类的中重叠.