本规范适合于中后台业务系统前端样式开发,用来约定CSS文件命名、组织、编码风格,确保编码任务分发、集成不冲突、不冗余,提高传递性、识别性。
CSS文件包构成
- init.css:全局重置类代码
- common.css:通用类样式代码
- plugin.css:JS插件样式代码
- skin.css:项目主体样式代码
编码规范约定
- 缩进:使用4tab来缩进
- 命名要求:统一使用中连线(-),一律小写,语义单词(尽量避免使用中文拼音,采用更简明有语义的英文单词进行组合)
- 作用域要求:一级命名语义化,内嵌简短名称
- 属性书写顺序:显示属性(定位、浮动等)、自身属性(大小边框)、文本属性(字体、颜色、行高等)、背景、其他
- 注释:以模块为单位进行注释说明
- 分号:每一个属性值必须添加分号
- 图片:能以背景形式呈现的图片,尽量都写入CSS样式中
- 层级:必须清晰明确,页面弹窗、气泡为最高级
编码经验
- 先定交互,栅格划分
- 从上而下,从左到右
- 还原设计,重在细节
- 识别设计,执行交互