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