不使用id或者属性选择器
为了尽可能的复用class,如小程序wxml和html标签就不同,使用属性就不好复用。
命名遵循bem方法论
虽然写起来有点复杂,但是结构清晰,规范知名度较高,常用的ui组件库均采用bem方法论,如vant,element-plus
通用原子类类名遵循tailwind
tailwind比较流行,有完善的文档,没必要自己再折腾一套偏离主流规范的类名
全局色板变量命名遵循tailwind
--color-primary: #28ba44;
--color-border: #f3f3f3;
--color-text: #202020;
--color-text-2: #878787;
--color-bg: #ffffff;
--color-bg-2: #f2f2f2;
.text-text-2 {
color: var(--color-text-2);
}
全局通用辅助类名g-
对于tailwind原子类不能解决的常用类,可以加g(global)-前缀用于区分
模块通用辅助类名m-
对于仅在某个页面、组件、模块有用的常用类,可以加m(module)-前缀用于区分