无需添加浏览器厂商前缀
使用 Autoprefixer 自动添加浏览器厂商前缀，编写 CSS 时不需要添加浏览器前缀，直接使用标准的 CSS 编写。
Autoprefixer 通过 Can I use，按兼容的要求，对相应的 CSS 代码添加浏览器厂商前缀。
模块组织
任何超过 1000 行的 CSS 代码，你都曾经历过这样的体验：
这个 class 到底是什么意思呢？
这个 class 在哪里被使用呢？
如果我创建一个 xxoo class，会造成冲突吗？
Reasonable System for CSS Stylesheet Structure 的目标就是解决以上问题，它不是一个框架，而是通过规范，让你构建更健壮和可维护的 CSS 代码。
Components（组件）
从 Components 的角度思考，将网站的模块都作为一个独立的 Components。
Naming components （组件命名）
Components 最少以两个单词命名，通过 – 分离，例如：
点赞按钮 (.like-button)
搜索框 (.search-form)
文章卡片 (.article-card)
Elements（元素）
Elements 是 Components 中的元素
Naming elements（元素命名）
Elements 的类名应尽可能仅有一个单词。
CSS Code复制内容到剪贴板
.search-form {
> .field { /* … */ }
> .action { /* … */ }
}
On multiple words （多个单词）
对于倘若需要两个或以上单词表达的 Elements 类名，不应使用中划线和下划线连接，应直接连接。
CSS Code复制内容到剪贴板
.profile-box {
> .firstname { /* … */ }
> .lastname { /* … */ }
> .avatar { /* … */ }
}
Avoid tag selectors（避免标签选择器）
任何时候尽可能使用 classnames。标签选择器在使用上没有问题，但是其性能上稍弱，并且表意不明确。
CSS Code复制内容到剪贴板
.article-card {
> h3 { /* ✗ avoid */ }
> .name { /* ✓ better */ }
}
Variants（变体）
