文件相关规范
1、文件名必须由小写字母、数字、中划线-组成2、文件必须用utf-8编码3、文件引入可通过外联或内联方式引入: 3.1 外联方式:<link rel=”stylesheet” href=”…” />(类型声明type=”text/css”可以忽略)3.2 内联方式:<style>…</style> (类型声明type=”text/css”可以忽略)4、原则上,不允许在html上直接写样式5、link和style标签都应该放入head中注释规范
1、文件顶部注释(推荐使用) 2、模块注释(推荐使用)模块注释必须单独写在一行
3、简单注释 3.1 单行注释
单行注释可以写在单独一行,也可以写在行尾
3.2 多行注释
多行注释必须写在单独行内
4、特殊注释(推荐使用)
用于标注修改、待办等信息
5、长度要求:注释中的每一行长度不超过40个汉字,或者80个英文字符
排版规范
1、一个tab设置为四个空格宽度。2、规则可以写成单行,或者多行,但是整个文件内的规则排版必须统一。如果是在html中写内联的css,则必须写成单行。3、单行形式书写风格的排版约束 3.1 每一条规则的大括号 { 前后加空格3.2 多个selector共用一个样式集,则多个selector必须写成多行形式3.3 每一条规则结束的大括号 } 前加空格3.4 属性名冒号之前不加空格,冒号之后加空格3.5 每一个属性值后必须添加分号; 并且分号后空格例如: 4、多行形式书写风格的排版约束 4.1 每一条规则的大括号 { 前添加空格4.2 多个selector共用一个样式集,则多个selector必须写成多行形式4.3 每一条规则结束的大括号 } 必须与规则选择器的第一个字符对齐4.4 属性名冒号之前不加空格,冒号之后加空格4.5 属性值之后添加分号;5、其他规范 5.1 使用单引号,不允许使用双引号5.2 如果使用CSS3的属性,如果有必要加入浏览器前缀,则按照 的顺序进行添加,标准属性写在最后,并且属性名称要对齐,例如:规则书写规范
除16进制颜色和字体设置外,CSS文件中的所有的代码都应该小写。
规则书写规范
1、规则命名中,一律采用小写加中划线的方式,不允许使用大写字母或 _2、命名避免使用中文拼音,应该采用更简明有语义的英文单词进行组合3、命名注意缩写,但是不能盲目缩写,具体请参见常用的CSS命名规则4、不允许通过1、2、3等序号进行命名5、避免class与id重名6、id用于标识模块或页面的某一个父容器区域,名称必须唯一,不要随意新建id7、class用于标识某一个类型的对象,命名必须言简意赅。8、尽可能提高代码模块的复用,样式尽量用组合的方式9、规则名称中不应该包含颜色(red/blue)、定位(left/right)等与具体显示效果相关的信息。应该用意义命名,而不是样式显示结果命名。例如: 10、除了重置浏览器默认样式外,禁止直接为html tag添加css样式设置,例如: 11、每一条规则应该确保选择器唯一,禁止直接为全局.nav/.header/.body等类设置属性属性编写顺序
推荐的样式编写顺序
1、显示属性 2、自身属性(盒模型) 3、背景 4、行高 5、文本属性 6、其他 7、CSS3属性 8、链接的样式请严格按照如下顺序添加:
性能优化
1、合并margin、padding、border的-left/-top/-right/-bottom的设置,尽量使用短名称。2、选择器应该在满足功能的基础上尽量简短,减少选择器嵌套,查询消耗。但是一定要避免覆盖全局样式设置。3、注意选择器的性能,不要使用低性能的选择器,例如: 4、禁止在css中使用*选择符5、除非必须,否则,一般有class或id的,不需要再写上元素对应的tag,例如: 6、0后面不需要单位,比如0px可以省略成0,0.8px可以省略成.8px7、如果是16进制表示颜色,则颜色取值应该大写。8、如果可以,颜色尽量用三位字符表示,例如#AABBCC写成#ABC9、如果没有边框时,不要写成border:0,应该写成border:none10、尽量避免使用AlphaImageLoader11、在保持代码解耦的前提下,尽量合并重复的样式,例如: 12、background、font等可以缩写的属性,尽量使用缩写形式CSS属性取值规范
字体大小font-size
font-size目前人人CSS取值的几种类型如下:
现将font-size取值的单位类型约束如下:
1、font-size必须以px或pt为单位,推荐用px(注:pt为打印版字体大小设置)2、不允许使用xx-small/x-small/small/medium/large/x-large/xx-large等值
字体系列font-family
目前font-family取值类型丰富多样,比如home-frame2-all-min.css中:
为了对font-family取值进行统一,更好的支持各个操作系统上各个浏览器的兼容性,现将font-family统一约束如下:
1、font-family不允许在业务代码中随意设置2、font-family目前取值为
hack使用规范
重要原则:尽量少用hack,能不hack坚决不hack,不允许滥用hack。
如果需要使用hack,请参考以下hack方式:
区分规则
区分属性
z-index取值规范
目前人人页面中的弹层较多,z-index取值也比较随意,导致相互覆盖的情况,有的弹层直接覆盖了顶部导航条。
以下是首页的一些z-index取值比较大的属性设置统计:
其他z-index设置:
这些z-index设置,极有可能造成相互覆盖,存在潜在的问题风险。例如:
1、publisher在导航条以下,但是在publisher中弹出的@、表情却在导航条以上。
2、XN的默认弹层样式穿透导航条
3、@组件与名片卡组件相互重叠
因此,有必要对z-index取值进行规范和约束。避免前端开发人员为了自己开发的功能能够正确展示,而忽略了其他组件的展示需求。
如果要为弹层设置z-index,请务必按照给定的取值区间来进行设置。
这里只是初稿,可能还需要精确到某一个组件的z-index分配,需要大家集思广益(可以参考cookie的设置流程,在使用z-index时必须经过审批)