CSS命名及书写规范

CSS命名及书写规范宇果

⼤大纲 • CSS命名 • ⻚页⾯面层级

姓⽒氏命名法

在⼦子孙模块数量可预测的情况下，继承祖先模块的命名前缀

当⼦子孙模块数量较多，且⽆无法预估时，可以选择采⽤用继承“祖先+⽗父”模块的命名前缀，! 以保证模块之间的独⽴立性

⼦子模块中，可以嵌套其他模块，可理解为“娶了媳妇、嫁了郎”

公共模块和独⽴立模块 • 同⼀一个⻚页⾯面出现2次以上同⼀一个类名 • 2个以上的⻚页⾯面出现同⼀一个类名 1、全站公共模块以“mod-”开头 2、频道及⻚页⾯面公共模块以“xx-mod-”开头,(xx为频道名或⻚页⾯面名缩写) 3、独⽴立模块，命名为⼀一个简短的单词，如“hot、ﬂoor、banner”等如何区分公共模块与独⽴立模块

Q:为什么要⽤用这种⽅方式 • CSS以单层命名为主，嵌套⼀一般不会超过3层，提升CSS解析效率。 • 团队⻛风格统⼀一，可⾼高效的迭代、维护。同时不再担⼼心命名冲突、css是否可删等问题。 • 减少命名烦恼，统⼀一继承模块组件命名，⼦子元素可⾃自由使⽤用常⽤用类名，如：xxx- name,xxx-item,xxx-cnt

⻚页⾯面层级

⻚页⾯面结构层布局层模块区域

⻚页⾯面结构层⼯工具条 c-toolbar 头部 c-header 主体内容 c-content 指引信息|快速⼊入⼝口 c-footer 版权
c-subfooter ⻚页⾯面结构层：类名以频道或站点名称缩写开头

布局层⼀一列 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列

模块区域说明： hd、ft不⼀一定存在，但存在其中⼀一个时，必然要存在bd 模块基本结构

完！Thanks！ “祖宗姓张，其⼦子孙都姓张”

CSS命名及书写规范

CSS命名及书写规范

hugo

More Decks by hugo

Other Decks in Programming

Featured

Transcript