命名-前缀规范
前缀 | 说明 | 示例 |
---|---|---|
g- | 全局通用样式命名,前缀g全称为global,一旦修改将影响全站样式 | g-mod |
m- | 模块命名方式 | m-detail |
ui- | 组件命名方式 | ui-selector |
js- | 所有用于纯交互的命名,不涉及任何样式规则。JSer拥有全部定义权限 | js-switch |
- 选择器必须是以某个前缀开头
不推荐:
.info { sRules; }
.current { sRules; }
.news { sRules; }
因为这样将给我们带来不可预知的管理麻烦以及沉重的历史包袱。你永远也不会知道哪些样式名已经被用掉了,如果你是一个新人,你可能会遭遇,你每定义个样式名,都有同名的样式已存在,然后你只能是换样式名或者覆盖规则。
推荐:
.m-detail .info { sRules; }
.m-detail .current { sRules; }
.m-detail .news { sRules; }
所有的选择器必须是以 g-, m-, ui- 等有前缀的选择符开头的,意思就是说所有的规则都必须在某个相对的作用域下才生效,尽可能减少全局污染。
js- 这种级别的className完全交由JSer自定义,但是命名的规则也可以保持跟重构一致,比如说不能使用拼音之类的