前端css规范

前端css规范

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
bem() {
    return function(name, fixed, change) {
        // 类名前缀，使用传入的块名称生成
        const prefix = `uv-${name}--`
        // 创建一个空对象，用于存储类名
        const classes = {}
        
        // 如果存在固定类名数组
        if (fixed) {
            fixed.map((item) => {
                // 遍历固定类名数组，将固定类名添加到 classes 对象中
                // 这里的类名会一直存在
                classes[prefix + this[item]] = true
            })
        }

        // 如果存在可变类名数组
        if (change) {
            change.map((item) => {
                // 遍历可变类名数组，根据 this[item] 的值来决定是否添加或移除类名
                // 如果 this[item] 为 true，添加类名；否则，删除类名
                this[item] ? (classes[prefix + item] = this[item]) : (delete classes[prefix + item])
            })
        }

        // 将 classes 对象的键（即类名）组成数组，并用空格连接成字符串
        // 支付宝、头条小程序等平台无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
        // 特定平台的处理
        return Object.keys(classes)
            // #ifdef MP-ALIPAY || MP-TOUTIAO || MP-LARK || MP-BAIDU
            .join(' ')
            // #endif
    }
}