设计模式

OOCSS

bject Oriented css（面向对象css）的缩写，是一种用最简单的方式编写的CSS代码，从而使代码重用性，可维护性和可扩展性更好的书写方法。

原则一：结构（基础对象）与皮肤（对象）分离

原则二：容器与内容分离

BEM

由块（Block）、元素（Element）、修饰符（modifier）三部分构成
通过 __ 与 -- 连接
块（Block）：独立实体，独立的意义
元素（Element）：block的一部分，没有独立意义
修饰符（modifier）：block或element上的标记

SMACSS

分类：Base、Layout、Modules、State、Theme
好处：易维护、易使用、易复用、易扩展…
命名规范：.l-header、.is-hidden、.theme-nav

https://zhuanlan.zhihu.com/p/44851489

每个 SMACSS 项目结构分为 5 种规则：

Base（基础）

基础样式定义了元素全局的默认样式，重置html的默认样式。normalize.css

html {
    margin: 0;
    font-family: sans-serif;
}
a {
    color: #000;
}

Layout（布局）
```
.l-header
.l-footer
```
Modules（模块）

可复用的一些模块

.article {
    background: #f32;
}
.article--title {
    font-size: 16px;
}
.article--text {
    font-size: 12px;
}

State（状态）

建议在状态规则使用前缀。这有助于我们识别它们并给予它们优先权。这里我们使用 is 前缀，如 is-hidden 或 is-selected。

.is-shown {
    display: block !important;
}

Theme（主题）

这个应该是最显而易见的规则，因为它定义了颜色、形状、边框、阴影还有其他等等。这些大多数都是在网站上重复使用的元素。

.theme-button-background
.theme-button-shadow

不要将 SMACSS 主题规则和基础规则混淆，基础规则定义了默认外观，类似于重置浏览器的默认设置，而主题规则定义了一组最终外观的样式，唯一的颜色方案。

ITCSS

🏆 CSS 架构设计 - 图4
越往上复用性越好

Settings设置 –预处理程序变量和方法（无实际CSS输出）
Tools工具 – Mixins和函数（无实际CSS输出）
Generic常规 – CSS重置，其中可能包括Eric Meyer的重置， Normalize.css或您自己的一批代码
Base元素 –没有类的单个HTML元素选择器
Objects对象 -通常遵循OOCSS方法的页面结构类
Components组件 –用于设置任何页面元素和所有页面元素样式的美学类（通常与对象类的结构结合使用）
Trumps –最重要的样式，用于覆盖三角形中的任何其他内容

Generic 和 Base 对应于 SMACSS 中的 Base
Objects 和 Components 对应于 SMACSS 中的 Modules

ACSS

一个样式属性一个类
好处：极强的复用性、维护成本低
坏处：破坏了CSS命名的语义化

案例：

tailwindcss
bootstrap

架构方案选择

由ITCSS/BEM/ACSS综合，基于ITCSS，项目的Style目录：

Setting
Tools
~~Generic~~ 使用normalize.css
Base
~~Components~~ 在Vue文件中
ACSS
Theme

Setting层

定义一些公告变量
公共变量：颜色，边框，字体大小，阴影，层级》。。。

$color-primary: #FF5777;
$color-text-primary: #333333;
$background-color-primary: #F1F1F1;

Tools层

sassmagic库：https://github.com/W3cplus/SassMagic

http://w3cplus.github.io/SassMagic/

使用mixin/function 全局配置:

        loaderOptions: {
            scss: {
                prependData: `
                    @import "@/style/gobal.scss";
        `
            }
        }

https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9

Base层

Generic层：引入normalize.css，重置浏览器默认样式
Base层：对各类元素基础样式进行补充

SCSS

变量
嵌套
mixin
function