web前端开发 代码规范 及注意事项

外部命名规范

html 、js 、css文件名称命名规范

my_script.js

my_camel_case_name.css

my_index.html

路径规范 不写http、https

  • js
<script src="//cdn.com/test.min.js"></script>
  • css
.example {

  background: url(//static.example.com/images/bg.jpg);

}

html,js,css文档上部分 增加作者注释，开发时间，功能，最后一次修改时间（多次）

html命名规范

文档格式

  • css 文件放在 head标签中，js放到 body尾部
  • 使用 utf-8 文字编码
  • html 标签一律使用小写
  • 属性使用双引号
<!--

	作者：xuess

	时间：2017-06-22

	描述：测试页面

-->

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<meta http-equiv="Access-Control-Allow-Origin" content="*">

		<!--rem先关首先加载-->

		<script src="https://g.alicdn.com/mtb/??lib-flexible/0.3.2/flexible_css.js,lib-flexible/0.3.2/flexible.js"></script>

		<!--css在head-->

		<link rel="stylesheet" type="text/css" href="xxx.css" />

	</head>

	<body>

		<div>

			<div></div>

		</div>

		<!--js在文档尾部-->

		<script src="xxx.js" type="text/javascript" charset="utf-8"></script>

	</body>

</html>

推荐使用语义化标签

<header>

	<h1>My page title</h1>

</header>

<nav class="top-navigation">

	<ul>

		<li class="nav-item">

			<a href="#home">Home</a>

		</li>

		<li class="nav-item">

			<a href="#news">News</a>

		</li>

		<li class="nav-item">

			<a href="#about">About</a>

		</li>

	</ul>

</nav>

<section class="page-section news">

	<header>

		<h2 class="title">All news articles</h2>

	</header>

	<article class="news-article">

		<header>

			<div class="article-title">Good article</div>

			<small class="intro">Introduction sub-title</small>

		</header>

		<div class="content">

			<p>This is a good example for HTML semantics</p>

		</div>

		<aside class="article-side-notes">

			<p>I think I'm more on the side and should not receive the main credits</p>

		</aside>

		<footer class="article-foot-notes">

			<p>This article was created by David <time datetime="2018-01-01 00:00" class="time">1 month ago</time></p>

		</footer>

	</article>

	<footer class="section-footer">

		<p>Related sections: Events, Public holidays</p>

	</footer>

</section>

<footer class="page-footer">

	Copyright 2017

</footer>

结构、表现、行为三者分离

1. 不要写行内样式

2. 不使用表象元素（`b`, `u`, `center`, `font`, `i`）

3. 不要在html 中写js代码

4. 元素自定义属性 使用`data-`开头

js命名规范

变量声明

1. 推荐使用es6语法规范，局部作用域变量用let，常量用const

2. 常量使用全大写命名（const FAIL_STATE = 101）

3. 普通变量名称用小写字母开头，驼峰式（let userInfo = {}）

4. 对象命名以大写字母开头，大驼峰式（function User(){//...}）

5. 声明字符串建议使用单引号（let msg = 'This is some HTML <div class="makes-sense"></div>';）

变量赋值时的逻辑操作

//不推荐

if(!x) {

  if(!y) {

    x = 1;

  } else {

    x = y;

  }

}

//推荐

let x = x || y || 1;

css 命名规范

css权重

第一等：代表内联样式，如: style=””，权值为1000

第二等：代表ID选择器，如：#content，权值为100

第三等：代表类，伪类和属性选择器，如：.content，权值为10

第四等：代表类型选择器和伪元素选择器，如：div p，权值为1

基本原则

1. 选择器应该避免使用ID，一般情况ID不应该用于样式

2. 选择器中避免直接写标签名，没有语义，而且很容被重叠

3. 选择器应该尽可能的精确，推荐使用 大于号`>`

4. 尽量使用简写，如：padding: 10px 35px;

5. 0px、0rem，不用写单位

6. 颜色尽量使用简写，如：用 #fff 代替 #ffffff;

7. 书写代码前, 考虑并提高样式重复使用率，可以定义一些常用的简写样式

8. 选择器要尽可能短，并且尽量限制组成选择器的个数，建议不要超过3层

9. 多写有效注释，小伙伴看了会比较明了

10. 为避免重叠，单独模块，可以使用命名空间

命名规范

1. class名称使用`-`中划线链接（短横线命名），不推荐使用大小写的驼峰式。

2. 需要绑定事件的class名称，应该单独写。不要与样式class公用。事件与样式区分开。推荐`J_xxx`开头

3. 语义明确的情况下，class名称尽量言简意赅

声明顺序

1. 结构性属性：

display

position, left, top, right etc.

overflow, float, clear etc.

margin, padding

2. 表现性属性：

background, border etc.

font, text

转载请注明出处

作者：xuesswuniu2010@126.com

时间：2017年06月16日

最后修改时间：2017年06月16日

web前端开发 代码规范 及注意事项的更多相关文章

  1. Web 前端开发代码规范（基础）

    一. 引言 对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护. 二. HTML/CS ...

  2. Web前端开发标准规范

    web前端开发规范的意义 提高团队的协作能力 提高代码的复用利用率 可以写出质量更高,效率更好的代码 为后期维护提供更好的支持 一.命名规则 命名使用英文语义化,禁止使用特殊字符,禁止使用拼音,禁止使 ...

  3. Web前端开发CSS规范总结

    作为Web前端开发必备语言,CSS为大家广为熟知,今天就跟大家分享下CSS规范总结,Web前端的小伙伴们看过来吧! CSS样式的权值(权重) 权值等级的定义 第一等:代表内联样式,如: style=” ...

  4. Extjs4前端开发代码规范参考

    准则:  一致性, 隔离与统一管理, 螺旋式重构改进, 消除重复, 借鉴现有方案 1.    保证系统实现的一致性,寻求一致性方案, 相同或相似功能尽量用统一模式处理: 2.    尽可能使用隔离技术 ...

  5. Web前端开发最佳实践（1）：前端开发概述

    引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...

  6. web前端开发CSS命名规范参考

    做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...

  7. WEB前端开发规范

    WEB前端开发规范 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档.本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本 ...

  8. WEB前端开发规范文档（转）

    http://codeguide.bootcss.com/  编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范上面的文档 再结合下面的规范: 无论是从技术角度还是开发视角,对于web前端开发 ...

  9. Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...

随机推荐

  1. 利用python库twilio来免费发送短信

    大家好,我是四毛,最近开通了个人公众号“用Python来编程”,欢迎大家“关注”,这样您就可以收到优质的文章了. 今天跟大家分享的主题是利用python库twilio来免费发送短信. 先放一张成品图 ...

  2. java 自动拆箱 自动装箱

    自动装箱的定义就是  基本数据类型赋值给包装类型,  拆箱则相反. Integer integer = 122; // 自动装箱 int num = integer; //自动拆箱 想看一下源码是怎么 ...

  3. jQuery的on绑定click和直接绑定click区别

    状况之外 在之前的公司并没有遇到这个问题,也就没有深究.直到自己换了现在的公司,刚来第二天就开始写别人写到一半的项目,很无奈,不是原生就是jquery,由于项目急,已经来不及切换框架重新布局,只能继续 ...

  4. hibernate中时间比较的小笔记

    // 开单时间 if (!"".equals(startDate) && startDate != null) { queryCondition = queryCo ...

  5. python基础——7（函数）

    一.函数的定义(函数一定是先定义,后引用) 函数是完成特定功能的代码块. def:声明函数的关键字 fun:函数变量名 ():参数列表,参数可以是0-n个,但是()不能丢 函数体:实现功能的具体代码 ...

  6. Hyperledger Fabric创建通道抛错Error: got unexpected status: FORBIDDEN -- Failed to reach implicit threshold of 1 sub-policies, required 1 remaining: permission denied解决方案

    安装Hyperledger Fabric,服务整个都跑起来了,但是抛了一个错,Error: got unexpected status: FORBIDDEN -- Failed to reach im ...

  7. 75. Spring Boot 定制URL匹配规则【从零开始学Spring Boot】

    在之前有一篇文章说了,博客名称从原来的<从零开始学Spring Boot>更改为<Spring Boot常见异常汇总>,后来写了几篇文章之后发展,有些文章还是一些知识点,所以后 ...

  8. j_spring_security_check 404错误

    折腾了好久,还是写一篇备忘 折腾了好久,还是写一篇备忘 首先检查路径 <form class="form-signin" method="POST" ac ...

  9. 【BZOJ2038】小Z的袜子（莫队）

    题意: 给定n个数a1, a2…… an与m个询问(L,R).对于每个询问,从aL, aL+1…… aR这R-L+1个数中随机取出两个数,求这两个数相同的概率. 数据范围:1<=n,m,ai&l ...

  10. linux 报错：E: Package 'libmemcached' has no installation candidate

    linux 报错:E: Package 'libmemcached' has no installation candidate 网上查资料说是软件安装源没有这个软件,需要添加软件源. 1.备份源列表 ...