CSS命名及书写规范

CSS命名及书写规范

Transcript

1. CSS命名及书写规范 宇果
2. ⼤大纲 • CSS命名 • ⻚页⾯面层级
3. 姓⽒氏命名法
4. 在⼦子孙模块数量可预测的情况下，继承祖先模块的命名前缀
5. 当⼦子孙模块数量较多，且⽆无法预估时，可以选择采⽤用继承“祖先+⽗父”模块的命名前缀，! 以保证模块之间的独⽴立性
6. ⼦子模块中，可以嵌套其他模块，可理解为“娶了媳妇、嫁了郎”
7. 公共模块和独⽴立模块 • 同⼀一个⻚页⾯面出现2次以上同⼀一个类名 • 2个以上的⻚页⾯面出现同⼀一个类名 1、全站公共模块以“mod-”开头 2、频道及⻚页⾯面公共模块以“xx-mod-”开头,(xx为频道名或⻚页⾯面名缩写) 3、独⽴立模块，命名为⼀一个简短的单词，如“hot、floor、banner”等 如何区分公共模块与独⽴立模块
8. Q:为什么要⽤用这种⽅方式 • CSS以单层命名为主，嵌套⼀一般不会超过3层，提升CSS解析效率。 • 团队⻛风格统⼀一，可⾼高效的迭代、维护。同时不再担⼼心命名冲突、css是否可删等问 题。 • 减少命名烦恼，统⼀一继承模块组件命名，⼦子元素可⾃自由使⽤用常⽤用类名，如：xxx- name,xxx-item,xxx-cnt
9. ⻚页⾯面层级
10. ⻚页⾯面结构层 布局层 模块区域
11. ⻚页⾯面结构层 ⼯工具条 c-toolbar 头部 c-header 主体内容 c-content 指引信息|快速⼊入⼝口 c-footer 版权 c-subfooter ⻚页⾯面结构层： 类名以频道或站点名称缩写开头
12. 布局层 ⼀一列 gird-c1 两列 gird-c2a gird-c2b 三列 gird-c3a gird-c3b gird-c3c 布局层： 类名以gird开头 c1：1列，c2：2列，c3：3列 a：第1列，b：第2列，c：第3列
13. 模块区域 说明： hd、ft不⼀一定存在，但存在其中⼀一个时， 必然要存在bd 模块基本结构
14. 完！Thanks！ “祖宗姓张，其⼦子孙都姓张”