前者规范大总括

标准目的:为了升高级工程师作效用,便于后台人士加上效果及前端中期优化维护,输出高品质的文书档案,在网站建设中,使组织进一步清楚,代码简明有序,有3个更好的前端架构。

规范基本准则:符合web标准,使用具有语义的标签,使协会、表现、行为分别,兼容性卓越。页面品质优化,代码简洁、明了、有序,尽可能的减弱服务器的负载,保障最快的辨析速度。

 

壹 、文件规范

1.1
HTML部分

  1.1.1
建包难题

    文件均归档至约定的目录中,建包格式如下:

    管理办法 1

    注意:全数的css文件放在css文件夹中,image放在images文件夹中,js放在js文件夹中

  1.1.2
HTML底部编写

    (1) 编码:全部编码均运用xhtml/html,标签必须关闭,编码统一为UTF-8,在多语言的网站提出添加<html
lang=”zh-CN”>,表达内容是以汉语展现和读书为根基的

    (2) 语义化:正确使用标签,丰盛利用无包容性难点的html自己标签

    (3) 文件底部head内容:

      •
title: 需求加上标题

      •
编码: charset=UTF-8

      •
meta: 可以添加description、keywords内容

1.2
CSS部分

  1.2.1
CSS系列及其命名

    能够将CSS样式表分为三类:全局样式表、模块通用样式表和单身样式表

      • 全局样式表常用命名:public.css

      • 模块通用样式表命名:模块名_basic.css

      • 独立样式表:模块名_页面名.css

  1.2.2
CSS引入

    CSS文件引入可通过外联或许内联方式引入

  • 外联格局

  • 内联方式

    管理办法 2

    注意:link和style标签都应当放入head中,原则上,区别意在html上平昔写样式。幸免在CSS中动用@import,嵌套不要超越一层。

 

② 、注释规范

2.1
顶部文书档案注释(推荐应用)

1 /*
2 * @description: 中文说明
3 * @author: name
4 * @update: name(xxxx-xx-xx xx:xx)
5 */

2.2
属性注释 

1 /*Header*/
2 /*Nav*/
3 /*Container*/
4 ...
5 /*Footer*/

2.3
功效模块注释

1 /* module: module1 by 小王 */
2 ...
3 /* module: module2 by 小李 */

2.4
特殊注释

 1 /*Color codes
 2 --------------------------------
 3     Red: #e03d3d;
 4     Dark: #424242;
 5     Light: #c3c5c0;
 6     blue #e03d3d;
 7 */
 8 
 9 /*
10    默认宽度为1128px 
11 */
12 
13 /*@group Reset Css*/
14 /*@group General Definitions*/
15 
16 /*---------------Typography-----------------*/
17 /*------------------Sprite--------------------*/

管理办法 3

  注意:

    •
每叁个文书档案对应2个文书档案注释(主要注释内容包蕴:文书档案创设人、创设时间、主要内容叙述等)

    •
属性注释表达:能够分CSS属性来开始展览命名(如:margin/padding值、CSS
哈克、全局Hover等)

    •
成效模块注释表明:分模块来编排CSS样式(如:尾部、导航、按钮、页脚等等)

 

叁 、命名规范

3.1
怎么样命名

  • css最棒用class来命名,js用id来命名,已做区分

  •
id和class的命名应体现该因素的效益或利用通用名称,而不用用抽象的生硬的命名

3.2
命名示例

  • .div1{} /*
    不推荐;无意义 */
  • .a_green{} /*
    不推荐;无意义 */
  • .menu{} /*
    推荐;特殊性*/
  • .header{}
    /* 推荐;通用性*/

3.3
命名精简

  id和class命名越简单越好,只要丰裕表明意思,那样有助于领悟,同时也能增强代码功用

  • .navigation{}
    /* 不推荐 */
  • .login_box_inside_con{}
    /* 不推荐 */
  • .nav{} /*
    推荐 */

3.4
命名嵌套难点

  书写css要注意先后顺序和嵌套难点,从质量上考虑尽量减少选用器的层级

  • .nav
    ul.list{} /* 不推荐 */
  • .nav
    .list{} /* 推荐 */

3.5
注意事项

  • 平整命名中,一律使用小写加下划线的主意
  • 取名中尽量防止使用中文拼音,应该运用更显明有语义的英文单词实行重组
  • 取名注意缩写,可是不能够盲目缩写
  • 不容许通过壹 、贰 、3等序号进行命名
  • 避免class与id重名
  • id注意用于标识模块或页面包车型大巴某多个父容器区域,名称必须唯一,不要随便新建id
  • class用于标识某2个项指标目的,命名必须言简意赅
  • 尽量升高代码模块的复用,样式尽量用整合的法门
  • 平整名称中不应有包括颜色、定位等与现实展现效果相关的新闻,应该用意义命名,而不是结果名称

 

四 、书写规范

4.1
排版规范

  • 使用4tab来缩进
  • 平整能够写成单行。可能多行,可是总体文件内的平整排版必须联合

  书写风格:

  • 每三个属性值必须添加分号
  • 若是两个性子公用叁个样式集,则四个属性必须写成多行形式

4.2
属性编写顺序(一般服从展现属性 -> 自个儿属性 -> 文本属性 ->
其余属性的书写格式)

  • 体现属性:display/list-style/position/float/clear…
  • 自小编性质(盒模型):width/height/margin/padding/border
  • 背景:background
  • 行高:line-height
  • 文本属性:color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
  • 其他:cursor/z-index/zoom/overflow…
  • CSS3属性:transform/transition/animation/box-shadow/border-radius
  • 要是应用CSS3的特性,即便有必不可少参与浏览器前缀,则依照-webkit-/-moz-/-ms-/-o-/std的依次进行添加,标准属性写在最后
  • 链接的样式请严峻根据如下顺序添加:a:link
    -> a:visited -> a:hover -> a:active

  管理办法 4

4.3
代码品质优化

  • 合并margin、padding、border的-top/-right/-bottom/-left的安装,尽量利用短名称
  • 选用器应该在满足功用的基础上竭尽简单,缩短选取器嵌套,查询消耗。可是毫无疑问要幸免覆盖全局样式设置
  • 禁止在css中使用*选择符
  • 0前面不供给单独,比如0px能够省略成0,0.8px能够归纳成.8px
  • 倘诺能够颜色尽量用肆人字符表示,比如#ccc
  • 假诺没有边框时,不要写成border:0;应该写成border:none
  • 在保存代码解耦的前提下,尽量合同等对待复的样式
  • background、font等得以缩写的习性,尽量采取缩写格局
  • 能以背景方式表现的图样,尽量都写入CSS样式中

4.4 CSS
Hack的使用

  尽量少使用浏览器检查和测试和CSS
哈克s,先试试其他消除办法。考虑到代码高功效和易保管,即便这三种办法能便捷化解浏览器解析差别,但应被视为最后的一手。在长期的品类中,允许采用hack只会带动越多的hack,所以尽量少用

  • IE6:
    _property:value
  • IE6/7:
    *property:value
  • IE6/7/8/9:
    property:value\9

4.5
IE兼容性

  IE扶助通过特定的<meta>标签来分明绘制当前页面所应当使用的IE版本,除非有肯定的格外需求,不然最棒是设置edge
mode,从而文告IE采纳其所帮忙的新颖的格局

    <!–
IE8及以上的本子都会以最高版本IE来渲染页面 –>
    <meta
http-equiv=”X-UA-Compatible” content=”IE=edge”>

  注意:X-UA-Compatible这一个是IE8的专用标志,用来钦命IE8浏览器去模拟有个别特定版本的IE浏览器的渲染格局

    
  <meta http-equiv=”X-UA-Compatible”
content=”IE=edge,chrome=1″>中的chrome=1效果是只要设置了GCF,则使用GCF来渲染页面,假如未设置GCF,则应用最高版本的IE内核进行渲染

4.6
字体规则

  • 为了防患文件合并及编码转换时造成难点,提议将样式中文字体名字改成对应的英文名字,如:黑体(SimHei)、陶文(SimSun)、微软雅黑(Microsoft
    Yahei)
  • 字体粗细选用具体数值,粗体bold写成700,符合规律normal写成400
  • font-size必须以px为单位
  • 为了对font-family取值实行统一,更好的支撑各样操作系统上挨家挨户浏览器的包容性,font-family不允许在事情代码中随意安装

   管理办法 5

 

5、别的标准

  • 决不随意改变全站级CSS和通用CSS库,改动后,要透过周到测试
  • 防止采取filter
  • 避免在CSS中使用expression
  • 防止过小的背景图片平铺
  • 尽大概不要在CSS中央银行使!important
  • 纯属不用在CSS中使用”*”选择符
  • 层级(z-index)必须清晰显著,页面弹窗、气泡为最高级(最高级为999),分化弹窗气泡之间可在4位数里面调动,普通区块为10-90内10的翻番;区块展开、弹出为近期父层级上个位增添,禁止层级间盲目攀比
  • 背景图片在状态允许,尽或许采纳sprite技术,减小http请求,考虑到四人同盟开发,sprite依据模块、业务、页面来划分
  • 页面内部尽量幸免使用style属性,CSS放在head标签中,由link标签引入,使页面的构造与表现分离
  • 尽量减弱使用float、position等影响属性的属性,那样能够免止新手在布局时出现的繁杂
  • 尽量少使用<br
    />来断行
  • 绝不接二连三出现三个(空格),也尽量少使用全角空格(英文字符集下,全角空格会变成乱码),空白应该尽量利用text-indent、maring/padding等方法来达成
  • 排版即使遇到要求首行缩进的拍卖,能够利用text-indent:2em;
  • 图形若是须要加载就在页面上用img标签写出,并指明宽高,首要的图形必须加上alt属性,给关键的成分和截断的因素上助长title
  • 若果有跳转的地点,统一采取a标签,<a
    href=”#”></a>,必要跳转到新页面,则还供给丰盛targent=”_blank”属性,假设点击的是空链接(#),则会自动将日前页面重置到首端,可以应用”javascript:void()”来取代原先的”#”
  • 分清楚怎么样状态下jpg/gif/png图片

 

陆 、自适应页面布局(响应式布局,暂不考虑低版本IE包容性)

6.1
布局细节

  • 先是底部head中参预meta新标签 

    <!–
让viewport的宽窄等于物理设备上的忠实分辨率,区别意用户缩放,一般主流的web
app都是这么设置 –>

    <meta name=”viewport” content=”width=device-width,
initial-scale=1″>

  • position:不可能选拔相对化定位
  • width/height/margin/padding:
    不可能选取px,应该使用比例、auto或em
  • font:
    不可能利用相对化大小,应运用em

6.2
CSS3引入的Media Query模块,可活动探测荧屏宽度

  • 加载相应的CSS文件,建议依照不一样的显示屏分辨率,选用选择差别的CSS规则,如:@media
    screen and (max-width:799px) {…}
  • 图片自适应:img{max-width:百分之百;}

 

柒 、支持文书档案

7.1
全局样式写法(reset css)

管理办法 6

7.2
清浮动

  必要排除浮动的地点有:

  • 若子成分浮动,而父成分内容塌陷(也便是没有包住)
  • 布局出现混乱,譬如下一层的跑到上一层去了

  化解办法(八种格局)

  • 给父成分同样适用浮动,保险子元素与父成分浮动后要么在同等层
  • 管理办法,正确行使overflow:hidden;总所周知,overflow:hidden首要意思是溢出隐藏的情趣,可是同样有清浮动的效益
  • 在要求的因素下边添加<div
    class=”clear”></div>,CSS中:clear{clear:both;}(不引进,扩充代码,冗余)
  • 选拔clearfix来排除浮动(推荐),相当于创制一个潜伏的始末为空的块的对象成分来撤废浮动

    .clearfix{*zoom:1;}
/* 针对IE7 hack,触发IE7的haslayout,以解除浮动 */
    .clearfix:before,.clearfix:after{display:table;content:””;line-height:0;}
    .clearfix:after{clear:both;}

7.3
各大网站的字体样式:

  • Google:
    font-family:arial, sans-serif;
  • Yahoo:
    font:13px/1.25 “Helvetica Neue”,Helvetica,Arial;
  • Apple:
    font:12px/18px “Lucida Grande”, “Lucida Sans
    Unicode”,Helvetica,Arial,Verdana,sans-serif;
  • Baidu:
    font:12px arial;
  • taobao: font:12px/1.5
    tahoma,arial,’Hiragino Sans GB’,\5b8b\4f53,sans-serif;
  • Weibo:
    font:12px/1.125 Arial,Helvetica,sans-serif;
  • Tencent:
    font:12px “宋体”,”Arial Narrow”,HELVETICA;
  • Sina
    Weibo: font:12px/1.3 “Arial”,”Microsoft YaHei”;
  • Sina:
    font:12px/20px “SimSun”,”宋体”,”Arial Narrow”,HELVETICA;
  • JD: font:12px/150%
    Arial,Verdana,”宋体”;
  • zhihu:
    font-family:’Helvetica Neue’, Helvetiva,Arial,Sans-serif;

  私下认可字体样式:

  • 包容性好:font-family:Helvetica,Tahoma,Arial,Sans-serif;
  • 更类似设计:font-family:Geogia,”提姆es
    New 罗曼”,Times,serif;

7.4 文本多行展现添加省略号(文本溢出大约)

  给必要的标签添加具体上涨幅度限制、white-space:nowrap;text-overflow:ellipsis;overflow:hidden;

7.5
input框的切切实实样式

  input框行高难点,一般不必要写line-height,但是在IE8/IE7供给写hack

发表评论

电子邮件地址不会被公开。 必填项已用*标注