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

时间 2021-04-15

标签 javascript css html 前端 java es6 web ide 测试 flex 栏目 HTML 繁體版

原文原文链接

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

外部命名规范

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

my_script.js
my_camel_case_name.css
my_index.html

路径规范不写http、https

<script src="//cdn.com/test.min.js"></script>

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

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

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

转载请注明出处css

做者：xuesswuniu2010@126.comhtml

时间：2017年06月16日前端

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

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

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

外部命名规范

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

路径规范 不写http、https

html命名规范

文档格式

推荐使用语义化标签

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

js命名规范

变量声明

变量赋值时的逻辑操做

css 命名规范

css权重

基本原则

命名规范

声明顺序

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

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

路径规范不写http、https