前端规范

发表于 css3 分类,标签:

浏览器特效支持规范

为了页面性能考虑,如果浏览器不支持CSS3相关属性的,则该浏览器的某些特效将不再支持,属性的支持情况如下表所示:


圆角阴影动画文字阴影透明背景渐变空间变换
Chrome5+YYYYYYY
Firefox 4+YYYYYYY
Safari 5+YYYYYYY
OperaYYYYYNY
IE9+YYNNYNY
Chrome5-NNYYYYY
Firefox 4-NNNYYNN
Safari5-NYYYYNY
IE8NNNNNNN
IE7NNNNNNN
IE6NNNNNNN

[说明] Y为支持,N为不支持。

 

文件相关规范

  1. 1、文件名必须由小写字母、数字、中划线-组成

  2. 2、文件必须用utf-8编码

  3. 3、文件引入可通过外联或内联方式引入:


    1. 3.1 外联方式:<link rel=”stylesheet” href=”…” />(类型声明type=”text/css”可以忽略)

    2. 3.2 内联方式:<style>…</style> (类型声明type=”text/css”可以忽略)

  4. 4、原则上,不允许在html上直接写样式

  5. 5、link和style标签都应该放入head中

注释规范

  1. 1、文件顶部注释(推荐使用)

    1
    2
    3
    4
    5
    /*
    * @description: xxxxx中文说明
    * @author: zhifu.wang
    * @update: zhifu.wang (2012-10-17 18:32)
    */
  2. 2、模块注释(推荐使用)

    1
    2
    3
    /* module: module1 by zhifu.wang */

    /* module: module2 by zhifu.wang */

    模块注释必须单独写在一行

  3. 3、简单注释

    1. 3.1 单行注释

      1
      /* this is a short comment */

      单行注释可以写在单独一行,也可以写在行尾

    2. 3.2 多行注释

      1
      2
      3
      4
      /*
      * this is comment line 1.
      * this is comment line 2.
      */

      多行注释必须写在单独行内

  4. 4、特殊注释(推荐使用)

    1
    2
    /* TODO: xxxx by zhifu.wang 2012-10-18 18:32 */
    /* BUGFIX: xxxx by zhifu.wang 2012-10-18 18:32 */

    用于标注修改、待办等信息

  5. 5、长度要求:注释中的每一行长度不超过40个汉字,或者80个英文字符

排版规范

  1. 1、一个tab设置为四个空格宽度。

  2. 2、规则可以写成单行,或者多行,但是整个文件内的规则排版必须统一。如果是在html中写内联的css,则必须写成单行。

  3. 3、单行形式书写风格的排版约束


    1. 3.1 每一条规则的大括号 { 前后加空格

    2. 3.2 多个selector共用一个样式集,则多个selector必须写成多行形式

    3. 3.3 每一条规则结束的大括号 } 前加空格

    4. 3.4 属性名冒号之前不加空格,冒号之后加空格

    5. 3.5 每一个属性值后必须添加分号; 并且分号后空格

    6. 例如:

      1
      2
      3
      div.test { width: 100px; height: 200px; }
      a:focus,
      a:hover { position: relative; right: 1px; }
  4. 4、多行形式书写风格的排版约束


    1. 4.1 每一条规则的大括号 { 前添加空格

    2. 4.2 多个selector共用一个样式集,则多个selector必须写成多行形式

    3. 4.3 每一条规则结束的大括号 } 必须与规则选择器的第一个字符对齐

    4. 4.4 属性名冒号之前不加空格,冒号之后加空格

    5. 4.5 属性值之后添加分号;

  5. 5、其他规范


    1. 5.1 使用单引号,不允许使用双引号

    2. 5.2 如果使用CSS3的属性,如果有必要加入浏览器前缀,则按照

    3. 1
      -webkit- / -moz- / -ms- / -o- / std
    4. 的顺序进行添加,标准属性写在最后,并且属性名称要对齐,例如:

      1
      2
      3
      4
      5
      6
      div.animation-demo {
      -webkit-animation: mymove 5s infinite;
      -moz-animation: mymove 5s infinite;
      -o-animation: mymove 5s infinite;
      animation: mymove 5s infinite;
      }

规则书写规范

除16进制颜色和字体设置外,CSS文件中的所有的代码都应该小写。

规则书写规范

  1. 1、规则命名中,一律采用小写加中划线的方式,不允许使用大写字母或 _

  2. 2、命名避免使用中文拼音,应该采用更简明有语义的英文单词进行组合

  3. 3、命名注意缩写,但是不能盲目缩写,具体请参见常用的CSS命名规则

  4. 4、不允许通过1、2、3等序号进行命名

  5. 5、避免class与id重名

  6. 6、id用于标识模块或页面的某一个父容器区域,名称必须唯一,不要随意新建id

  7. 7、class用于标识某一个类型的对象,命名必须言简意赅。

  8. 8、尽可能提高代码模块的复用,样式尽量用组合的方式

  9. 9、规则名称中不应该包含颜色(red/blue)、定位(left/right)等与具体显示效果相关的信息。应该用意义命名,而不是样式显示结果命名。例如:

    1
    2
    .red { color: red }(错误)
    .important-news { color : red }(正确)
  10. 10、除了重置浏览器默认样式外,禁止直接为html tag添加css样式设置,例如:

    1
    2
    3
    4
    div {
    width: 200px;
    font-size: 16px;
    }
  11. 11、每一条规则应该确保选择器唯一,禁止直接为全局.nav/.header/.body等类设置属性

属性编写顺序

推荐的样式编写顺序

    1. 1、显示属性

      1
      display/list-style/position/float/clear
    2. 2、自身属性(盒模型)

      1
      width/height/margin/padding/border
    3. 3、背景

      1
      background
    4. 4、行高

      1
      line-height
    5. 5、文本属性

1
2
color/font/text-decoration/text-align/
text-indent/vertical-align/white-space/content
  1. 6、其他

    1
    cursor/z-index/zoom
  2. 7、CSS3属性

    1
    transform/transition/animation/box-shadow/border-radius
  3. 8、链接的样式请严格按照如下顺序添加:

    1
    a:link -> a:visited -> a:hover -> a:active(LoVeHAte)

性能优化

  1. 1、合并margin、padding、border的-left/-top/-right/-bottom的设置,尽量使用短名称。

  2. 2、选择器应该在满足功能的基础上尽量简短,减少选择器嵌套,查询消耗。但是一定要避免覆盖全局样式设置。

  3. 3、注意选择器的性能,不要使用低性能的选择器,例如:

    1
    2
    3
    div > * {}
    ul > li > a {}
    body.profile ul.tabs.nav li a {}
  4. 4、禁止在css中使用*选择符

  5. 5、除非必须,否则,一般有class或id的,不需要再写上元素对应的tag,例如:

    1
    div#test { width: 100px; }
  6. 6、0后面不需要单位,比如0px可以省略成0,0.8px可以省略成.8px

  7. 7、如果是16进制表示颜色,则颜色取值应该大写。

  8. 8、如果可以,颜色尽量用三位字符表示,例如#AABBCC写成#ABC

  9. 9、如果没有边框时,不要写成border:0,应该写成border:none

  10. 10、尽量避免使用AlphaImageLoader

  11. 11、在保持代码解耦的前提下,尽量合并重复的样式,例如:

    1
    2
    3
    4
    5
    h1 { color: black; }
    p { color: black; }
    –>
    h1,
    p { color: black; }
  12. 12、background、font等可以缩写的属性,尽量使用缩写形式

    1
    2
    background: color image repeat attachment position;
    font: style weight size/lineHeight family;

CSS属性取值规范

字体大小font-size

font-size目前人人CSS取值的几种类型如下:

1
12px/9pt/1.2em/150%/1.7

现将font-size取值的单位类型约束如下:

  1. 1、font-size必须以px或pt为单位,推荐用px(注:pt为打印版字体大小设置)

  2. 2、不允许使用xx-small/x-small/small/medium/large/x-large/xx-large等值

字体系列font-family

目前font-family取值类型丰富多样,比如home-frame2-all-min.css中:

bodyTahoma, Verdana, STHeiTi, simsun, sans-serif
.fselect-pager li aArial
a.mini-sharemingliu
.smalltahoma, mingliu
select, label, textarea, input“lucida grande”, tahoma, verdana, arial, STHeiTi, simsun, sans-serif
.m-autosug smallMingLiU
#appsMenuPro .menu-apps-side a.add-app-btn宋体
.site-footer .haoestahoma, mingliu

为了对font-family取值进行统一,更好的支持各个操作系统上各个浏览器的兼容性,现将font-family统一约束如下:

  1. 1、font-family不允许在业务代码中随意设置

  2. 2、font-family目前取值为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
font: 12px Tahoma, Verdana, STHeiTi, simsun, sans-serif;
}


input,
label,
select,
option,
textarea,
button,
fieldset,
legend {
font-family: “lucida grande”, tahoma, verdana, arial, STHeiTi, simsun, sans-serif;
}

hack使用规范

重要原则:尽量少用hack,能不hack坚决不hack,不允许滥用hack。

如果需要使用hack,请参考以下hack方式:

区分规则

IE6* html selector { … }
IE7*+html selector { … }
非IE6html>body selector { … }
firefox@-moz-document url-prefix() { … }
safari3+/chrome@media screen and (-webkit-min-device-pixel-ratio:0) { … }
opera@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { … }
iPhone/mobile webkit@media screen and (max-device-width: 480px) { … }

区分属性

IE6_property: value
IE7+property: value
IE6/7*property: value
IE6/7/8/9property: value\9

z-index取值规范

目前人人页面中的弹层较多,z-index取值也比较随意,导致相互覆盖的情况,有的弹层直接覆盖了顶部导航条。

以下是首页的一些z-index取值比较大的属性设置统计:

header头部导航条1999
账号菜单10001
通知提醒10000
顶部搜索结果弹窗10001
页面内容顶部/publisher1998
publisher电影搜索提示1000
用户等级与登录信息提醒1999
回到顶部按钮999 in css, 1001 in html
@10001
表情10001
名片卡9999
底部工具条与webpager/radio1000 in css, 1999 in html
照片浏览弹层5000
照片多张上传弹层3001
XN默认弹层组件10000
首页应用中心推荐弹层1002
HTML5拖拽上传999998

其他z-index设置:

.dropmenu-holder999999
.appsMenuPro10001
.search-Result10002 !important
.menu-dropdown200
.site-nav .navigation981
.mentionFrdList10002!important
.app-center-popup1002
.feed-back-v61999
#appcardcontent1998
.feed-comment-attach1000
.message-box1000
#friendcreate-box100

这些z-index设置,极有可能造成相互覆盖,存在潜在的问题风险。例如:

  1. 1、publisher在导航条以下,但是在publisher中弹出的@、表情却在导航条以上。
    人人网FED CSS编码前端开发规范

  2. 2、XN的默认弹层样式穿透导航条
    人人网FED CSS编码前端开发规范

  3. 3、@组件与名片卡组件相互重叠
    人人网FED CSS编码前端开发规范

因此,有必要对z-index取值进行规范和约束。避免前端开发人员为了自己开发的功能能够正确展示,而忽略了其他组件的展示需求。

如果要为弹层设置z-index,请务必按照给定的取值区间来进行设置。

这里只是初稿,可能还需要精确到某一个组件的z-index分配,需要大家集思广益(可以参考cookie的设置流程,在使用z-index时必须经过审批)

头部导航区域[1999 – 2100]
publisher所在的内容head区[1998]
页面主要内容区域[-1 – 1997]
页面底部[1999 – 2100]
首页应用弹层[1000]
全站公共组件[-1 – 1999]
全页面蒙层弹窗组件[10000-11000]

常用的 CSS 命名

header内容contentfooter导航nav
子导航subnav栏目column主体main新闻news
版权copyright文章列表list加入joinus合作伙伴partner
标志logo侧栏sidebar横幅banner状态status
菜单menu子菜单submenu滚动scroll搜索search
标签页tab提示信息msg小技巧tips标题title
指南guild服务service热点hot下载download
注册regsiter登录条loginbar按钮btn投票vote
注释note友情链接friend-link外套wrap面包屑bread-crumb
当前的current购物车shop图标icon文本txt
待补充…






其他

  1. 1、字体名称请映射成对应的英文名,例如:黑体(SimHei) 宋体(SimSun) 微软雅黑 (Microsoft Yahei),如果字体名称中有空格,则必须加单引号。

  2. 2、背景图片请合理使用csssprites,按照模块、业务、页面来划分均可

  3. 3、css背景图片的文件类型,请按照以下原则来保存:

    1. 3.1 如果背景图片有动画,则保存成gif

    2. 3.2 如果没有动画,也没有半透明效果,则保存成png-8

    3. 3.3 如果有半透明效果,则保存成png-24

  4. 4、不要在html中加入标签来清理浮动,通过在浮动元素的父元素上添加.clearfix来清除浮动

  5. 5、为了SEO和页面可用性,请使用text-indent来隐藏文本内容。

  6. 6、制作csssprites时,尽量把颜色相近的图标放在一起,存储为png8格式,存储完以后还能用一些压缩工具进行无损压缩。

  7. 7、避免过小的背景图片平铺。

  8. 8、尽量少用!important

  9. 9、避免使用非一次性expression


http://www.wufangbo.com/category/gfjy/   前端规范

0 篇评论

发表我的评论