CSS分层

• 为什么要分层？
• SMACSS
• BEM
• SUIT
• ACSS

原因

• CSS有语义化的命名约定和CSS层的分离，将有助于它的可扩展性，性能的提高和代码的组织管理
• 大量的样式，覆盖、权重和很多!important，分好层可以让团队命名统一规范，方便维护
• 有责任感的去命名你的选择器

SMACSS

SMACSS（Scalable and Modular Architecture for CSS 可扩展的模块化架构的CSS）像OOCSS一样以减少重复样式为基础。然而SMACSS使用一套五个层次来划分CSS给项目带来更结构化的方法：

• Base 设定标签元素的预设值 PS：html{} input[type=text]{}
• Layout 整个网站的 ‘大架构’ 的外观 PS：#header{margin: 30px 0;}
• Module 应用在不同页面公共模块 PS：.button{}
• State 定义元素不同的状态 PS：.nav-main{}
• Theme 画面上所有 ‘主视觉’ 的定义 PS：border-color、background-image

BEM（不是说都要加下划线，主要针对的是整体）

BEM和SMACSS非常类似，主要用来如何给项目命名。一个简单命名更容易让别人一起工作。比如选项卡是一个块（Block），这个块里的元素是标签之一（Element），而当前选项卡是一个修饰状态（Modifier）：

• block 代表了更高级别的抽象或组件
• block__element 代表.block的后台，用于形成一个完整的.block整体。
• .block--modifier 代表.block的不同状态或不同版本。
• 修饰符使用的是，子模块使用_符号。
  BEM

SUIT

SUIT起源于BEM，但是它对组件名使用驼峰式和连字号把组件从他们的修饰和子孙后代中区分出来：

• 修饰符使用的是,子模块使用_符号。
  SUIT
  如果你不想使用如此严格或者复杂的命名规则，给每一个选择器前加前缀同样可以达到这样的效果。

.s-product-detauils{}
.t-product-detauils{}
.js-product-detauils{}

结构属性将会被应用到s-product-details选择器中。主题属性将应用于t-product-details选择器。

ACSS

考虑如何设计一个系统的接口。原子（Atoms）是创建一个区块的最基本的特质，比如说表单按钮。分子（Molecules）是很多个原子（Atoms）的组合，比如说一个表单中包含了一个标签，输入框和按钮。生物（Organisms）是众多分子（Molecules）的组合物，比如一个网站的顶部区域，他包含了网站的标题、导航等。而模板（Templates）又是众多生物（Organisms）的结合体。比如一个网站页面的布局。而最后的页面就是特殊的模板。

ACSS

ITCSS

• Settings 全局可用配置，设置开关。$color-ui:#BADA55;$spacing-unit:10px;
• Tools通用工具函数。@mixin font-color(){font-color:$color-ui;}
• Generic 通用基础样式。Normalize，reset，boxsizing:border-box;
• Base 未归类的html元素。ul{list-style: square outside;}
• Objects设计部分开始使用专用类。.ul-list__item{padding:$spacing-unit};
• Components 设计符合你们的组件.products-list{@include font-brand();border-top:1px solid $color-ui;}
• Trumps 重写，只影响一块的DOM。（通常带上我们的!important）（比如只有颜色不一样）

最后我列出一些我将要用到的技巧，并且坚持做下去：

• 尽量不让自己的样式层级超过三层
• 尽量不使用!important，通过添加和使用类名，比如.hidden类名
• 尽量远离Sass中介绍@extend的一般经验法则——他们有些是迷惑人
• 尽量在样式表中添加注释
• 让团队写CSS有一个标准规范——Harry Roberts写了一个很有名的CSS指南
• 此外，应该有一个可以展示元素样式的模块库
• 使用类似scss-lint工具，让你的SCSS/CSS和规范保持一致
• 尽量不要使用*这样的全局选择器
• JavaScript钩子是使用的类名，尽量加上前缀js-
• 尽量在项目中重复使用类名和模块
• 取名尽量和Bootstrap框架的组件接近
• 在样式中避免使用#id

扩展阅读：
www.leemunroe.com/css
https://www.w3cplus.com/css/css-sass-scss-compass-less-bem-smacss-oocss-acss-ccss-wtfss.html
eslint: https://www.jianshu.com/p/2bcdce1dc8d4