前端代码规范

清疚 2022-05-13 08:44 176阅读 0赞

# html规范 #

1.  符合web2.0标准，语义化html，结构、表现、行为三层分离，兼容性优良，代码简洁明了有序，尽可能的减少服务器负载，快速的解析速度。
2.  正确使用块级元素和内联元素嵌套，`h1、h2、h3、h4、h5、h6、P、dt`标签不能包含`div`等块级元素，只能包含内联元素，li可以嵌套`div,ul,ol`等块级元素，内联元素中不可嵌套块级元素。
3.  正确使用 `<ul><li>` 无序列表（在文章列表、导航条，下拉列表、tab使用）、`<ol><li>` 有序列表（文章列表等根据需要使用）、`<dl><dt>`（自定义列表）。
4.  加粗使用`<strong>`标签， 表示关键词强调的语义化，有助于SEO。
5.  不建议使用`<br/>`，用`margin`进行控制。
6.  `p`标签定义段落,用来区分段落，有语义化的，文章正文使用`p`标签是理所当然的，推荐在文章或者文本段落以外的地方尽量少用`P`标签，不宜用来大范围的布局。
7.  标题要用`h*`(同一页面只能有一个`h1`)。
8.  标签、属性、属性命名必须由小写字母及下划线数字组成，且所有标签必须闭合，包括单标签。
9.  尽可能减少`div`多层嵌套。
10. 在html页面中尽量避免直接使用行内样式来控制标签样式，做到内容与表现分离。
11. 多余代码, 比如页面注释掉不需要的代码，应该坚决删除掉。
12. 指定`img`明确的宽度和高度，可以增加页面渲染速度。

# css规范 #

1.  图片尽量使用css写入样式中。
2.  背景图片请尽可能使用`sprite`技术，减小`http`请求。
3.  链接的样式请严格按照：`a:link -> a:visited -> a:hover -> a:active（LVHA）`的顺序写。
4.  合并`margin`、`padding`、`border` 的设置，尽量使用缩写法，比如`margin:0 10px 0 10px;`
5.  选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗，但是一定要避免覆盖全局样式设置。
6.  如果没有边框时，不要写成 `border:0;`，应该写成 `border:none;` 。
7.  在保持代码解析的前提下，尽量合并重复的样式，例如：`a { display:block } span{ display:block }` 合并：`a,span { display:block }`。
8.  `background` 、`font` 等可以缩写的属性，尽量使用缩写形式：  
    `background: color image repeat attachment position;`  
    `font: style weight size/lineHeight family;`
9.  不要直接为html标签添加css样式，比如`div {width: 100px;｝`
10. 尽量少用`hack`，能不`hack`就尽量不用`hack`，为了兼容必须需要时就使用。
11. 为了SEO和页面可用性，请使用`text-indent`来隐藏文本内容。
12. 不要在 html 中加入标签来清除浮动，通过在浮动元素的父元素上添加`.clearfix` 来清除浮动：`.clearfix:dfter{content:”.”; display:block;height:0;visibility:hidden;clear:both;} .clearfix{zoom:1}`
13. 字体名称最好映射成对应的英文名，例如：黑体(SimHei) 宋体(SimSun) 微软雅黑(Microsoft Yahei);
14. css属性书写顺序, 建议遵循布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写，但尽量保证同类属性写在一起。属性列举：  
    布局定位属性主要包括： `float`、`clear`、`position`、`top`、`right`、`bottom`、`left`、`display`、`visibility`、`overflow`等；
15. 自身属性主要包括：`width`、`height`、`margin`、`padding`、`background`、`border`；
16. 文本属性主要包括：`font`、`color`、`text-align`、`vertical-align`、`text-decoration`、`text-indent`、`white-space`等；
17. 其他属性包括：`list-style`、`cursor`、 `z-index`、`zoom` 等。
18. 不需要重复定义可继承的值，css中，子元素自动继承父元素的属性值，如颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义，除非是为了更变当前元素样式不使用父元素的属性值，但是要注意，浏览器可能用一些默认值覆盖你的定义。
19. 用png图片做图片时，要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果，请为ie6单独定义背景：  
    `_background:none;`  
    `_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);`

# javascript规范 #

1.  js每行代码结束时必须有分号;
2.  引用js库文件，文件须包含库名称及版本号，以及是否为压缩版，比如jquery.1.81.min.js；引用插件，文件名为库名+插件名称，比如：jquery.cookie.js。
3.  变量和函数命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如`myName`。
4.  避免全局变量。
5.  命名语义化, 尽可能利用英文单词或其缩写。
6.  页面引用js文件和js代码放在html代码的最底部。

# 图片使用规范 #

1.  图片格式仅限于`gif`、`png`、`jpg`。
2.  如果背景图片有动画，则保存成 `gif`，如果没有动画，也没有半透明效果，则保存成`jpg`。
3.  如果有半透明效果，则保存成 `png-24`，但尽量避免使用半透明的`png`图片。
4.  重要图片必须加上`alt`属性，给重要的元素和截断的元素加上`title`。
5.  命名全部用小写英文字母、数字、和横线的组合，尽量用易懂的词汇，便于团队其他成员理解，命名分头尾两部分， 用下划线隔开， 比如`ad-left01.gif`、`btn-submit.jpg`。
6.  在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间。
7.  运用css sprite技术集中小的背景图或图标, 减小页面http请求。

# 注释规范 #

### html注释: ###

1.  注释格式 `<!–这儿是注释–>`, `’–’`只能在注释的始末位置,不可置入注释文字区域;

### css注释: ###

1.  单行注释：`/*中文说明*/`
2.  有修改者模块注释：`/* module: module by lingdu 2014-07-30 */`

### JavaScript注释, ###

1.  单行注释使用: `//这儿是单行注释`
2.  多行注释使用: `/* 这儿有多行注释 */`

我写博客为学习方便看的，如果有不对的请大家给予指教，有的是借鉴别人来的，也请不要见怪，谢谢大家配合！