Zengjing

by Zengjing 2018-08-02

前端样式开发编码规范

本规范适合于中后台业务系统前端样式开发,用来约定CSS文件命名、组织、编码风格,确保编码任务分发、集成不冲突、不冗余,提高传递性、识别性。

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

收获点赞: 1

评论

...