OOCSS

• OO:面向对象
• 原则一：容器与内容分离
• 原则二：结构(基础对象)与皮肤分离
• 原则三：面向设计开发(待定)
• vue中组件 = OOCSS
• OOCSS应用：grid栅格布局、布局组件等

BEM

• 快(Block)、元素(Elment__)、修饰符(Modifier --)
• 作用：命名规范、让页面结构清晰
• 进阶版的OOCSS

SMACSS

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

ITCSS

• 分层：七层
• 与SMACSS区别：层次分的更细

Settings层代码实现

• 定义一些公共变量
• 公共变量：颜色、边框、字体大小、阴影、层级

Tools层代码实现

• 引入SassMagic

Base层代码实现

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

Components层代码实现

• OOCSS >> BEM(进阶版OOCSS)
• 经典的组件：栅格、布局组件
• 自定义组件

ACSS层代码实现

• 让样式极限复用
• 解决ACSS无语义化缺点：属性选择器 如 [font-primary] {color:#333}
• Setting与ACSS层的关系:ACSS的两个来源。Setting个设计分析

Theme层代码实现

在全局加上一个属性选择器

[data-theme='default'] .box{
    background:blue
}

setup() {
    onMounted(()=>{
        window.documentElement.setAttribute(
            "data-theme",
            "cool"
        )
    })
}

ACSS

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