1、css架构-BEM命名规则

• 由Block-Element-Modifier（修饰符）三部分组成
• Element通过"__"与Block进行连接，在命名中反映父子关系，而不是进行实际的嵌套
• Modifier用"--"与Block或者Element连接,用来描述作用者的状态或者行为。例如Button 组件，它有很多的状态和外观，例如selected,default,disabled

优点

1. 减少类的嵌套，从命名上也能看出层级关系
2. 使用scss编写时非常方便

.header {
    &__title { }
}
.btn {
    &--selected {}
}
/* 会编译为 ：*/
.header__title {}
.btn--selected {}

3. 在迁移代码块时，不受代码层级影响

2、css架构-SMA命名规则

Scalable and Modular Architecture for CSS，编写可扩展的、模块化、结构化的 CSS
如果给 BEM 找个核心词，那就是分层，如果给 SMACSS 也找个核心词，那肯定就是分类

1. Base-基础：放不涉及业务的基础样式，一般是一些标签选择器。比如a标签在本网站中全部展示为某种样式
2. Layout-布局 ：贴近 HTML 标签，作为网站的骨架，负责布局，例如header，footer，aside
3. Module-模块： Module 更多负责业务展示和交互。布局将页面拆成多块，每块里面有N个Module
4. State-状态 ： 动态变化的部分，例如按钮是否可用，面板是否展开，选项是否激活等
5. Theme-主题 ： 提供最终外观，Base提供默认外观。要做到在切换主题时尽量简单

/* 一般Layout布局类名都是 .l- 开头 */
.l-main {}
.l-left-footer {}

/* State 的类名，一般使用 .is- 来开头 */
.is-active {}
.is-expand {}

/* 在js中，可以通过window.CSS.supports('display', 'flex')检测是否支持某种写法 */
/* 在css中，可以使用@supports来检测，也支持 @supports not(display: flex){}来反向检测 */
@supports (display: flex) {
    .flex {
         display: flex;
    }            
}

总结

• 感觉这里的Layout和Module的关系是相当于BEM中的Block和Element的，State也相当于BEM中的Modifier
• 应尽量直接使用标签来做Layout的事

3、SUIT CSS命名规则

将类名分为两种类型：工具类和组件类

1. 一些固定工具类，比如：左右浮动、文本截断、垂直居中等，命名方式： u-sm|md|lg<工具类名>
2. 组件类命名方式为：[<命名空间>-]<组件名>[-后代名][--修饰符],组件名命名成大驼峰类型，组件和后代以“-”相连（BEM中父子以“__”相连），和修饰符以“--”相连（这点和BEM一样）。例如：.mrp-Form-input--focus

4、class命名工具-oocss

Object Oriented css（面向对象css）

• 这个规则适用于在有重复样式时，提取公共类进行复用。例如box1和box2有大量相同样式，只需要提取出一个公共box类：

<div class="box box1"></div>
<div class="box box2"></div>

5、切换主题的2个思路(都基于css的变量)

1. 不同主题下设置不同的变量值

        :root[theme="blue"] {
            --btnColor: blue;
            --btnBg: #ddd;
        }

        :root[theme="dark"] {
            --btnColor: #000;
            --btnBg: #fff;
        }

       .btn-color {
            /* 这里第二个参数设置异常值，比如html没有theme属性，这些变量不存在时，取第二个参数值 */
            color: var(--btnColor, red);
            background-color: var(--btnBg);
        }

在切换主题时，修改html的theme属性值，那么由于style里面设置的属性选择器，变量值会根据html的theme进行设置。理解成每种主题都是一个模块，利用theme设置了命名空间一样。
document.documentElement.setAttribute('theme', 'dark');

2. 直接设置html节点style的变量属性值

        .btn-color {
            color: var(--btnColor, red);
            background-color: var(--btnBg, blue);
        }

           const theme = {
                dark: {
                    '--btnColor': '#fff',
                    '--btnBg': '#000'
                },
                gary: {
                    '--btnColor': '#000',
                    '--btnBg': '#ddd'
                }
            };
            let select = theme.dark; // 当前选择dark主题
            for (let p in select) {
                // 设置变量值
                document.documentElement.style.setProperty(p, select[p]);
            }