代碼規範

時間 2019-11-16

標籤代碼規範简体版

原文原文鏈接

HTML 規範

HTML文件必須加上 DOCTYPE 聲明，並統一使用 HTML5 的文檔聲明：javascript

<!DOCTYPE html>

頁面語言LANG，考慮瀏覽器和操做系統的兼容性，目前仍然使用 zh-CN 屬性值css

<html lang="zh-CN">

CHARSET，HTML-5 中默認的字符編碼是 UTF-8，請儘可能統一寫成標準的「UTF-8」html

<meta charset="UTF-8">

類型屬性java

//不須要爲 CSS、JS 指定類型屬性，HTML5 中默認已包含
//推薦
<link rel="stylesheet" href="" >
<script src=""></script>

//不推薦
<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>

元素屬性web

//元素屬性值使用雙引號語法
//元素屬性值能夠寫上的都寫上
<input type="text">
<input type="radio" name="name" checked="checked" >

特殊字符引用chrome

//在 HTML 中不能使用小於號 「<」 和大於號 「>」特殊字符,瀏覽器會將它們做爲標籤解析,使用字符實體

//推薦
<a href="#">more &gt;&gt;</a>

純數字輸入框，使用 type="tel"而不是type="number"canvas

<input type="tel">

文件模版

HTML5標準模版瀏覽器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML5標準模版</title>
</head>
<body>
    
</body>
</html>

移動端app

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" >
<meta name="format-detection" content="telephone=no" >
<title>移動端HTML模版</title>
<link rel="stylesheet" href="css/index.css" >
</head>
<body>
</body>
</html>

PC端webapp

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta name="robots" content="index,follow">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" content="ie-stand">
<title>PC端HTML模版</title>

<!-- S 本地調試，根據開發模式選擇調試方式，請開發刪除 --> 
<link rel="stylesheet" href="css/index.css" >
</head>
<body>
</body>
</html>

WebApp Meta

Viewport Meta Tag

<!--
width – viewport的寬度
height – viewport的高度
initial-scale – 初始的縮放比例
minimum-scale – 容許用戶縮放到的最小比例
maximum-scale – 容許用戶縮放到的最大比例
user-scalable – 是否容許用戶縮放 默認值是 yes，★設置 no 還能夠在文本框輸入文本的時候阻止頁面滾動★
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Apple-Specific Meta Tag Keys

apple-mobile-web-app-capable 設置 WebApp 是否進入全屏模式，該設置須要添加到主屏幕才生效

<!--
content設置 yes 進入全屏模式
默認會啓動 Safari 應用，使用 Safari 應用瀏覽
經過檢測 window.navigator.standalone 的 Boolean 值能夠判斷 web 應用是否處於全屏模式
-->
<meta name="apple-mobile-web-app-capable" content="yes">

apple-mobile-web-app-status-bar-style 爲 webapp 設置狀態欄樣式

<!--
此 meta 設置只在全屏模式生效
默認值是 default
content=」black」，狀態欄背景黑色，網頁內容在狀態欄下面
content=」black-translucent」，狀態欄半透明，背景黑色，網頁內容佔滿全屏
-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

format-detection 自動識別頁面中有多是電話格式的數字

<!--
iOS中的 Safari 會默認識別與電話格式類似的數字並生成一個能夠拉起電話應用並將該數字做爲電話號碼撥打的連接。定義 telephone=no 能夠屏蔽該功能
-->
<meta name="format-detection" content="telephone=no">

圖片引入

<img src="" alt="" >

<!--
注意事項：
1.圖片引入不需添加 width、height 屬性，alt 屬性應該寫上
2.demo {
    background-image: url(icon.png); //圖片引入不須要引號
}
3.CSS Sprites 使用建議

 - 適合使用頻率高更新頻率低的小圖標
 - 儘可能不留太多的空白
 - 體積較大的圖片不合並
 - 確保要合併的小圖座標數值和合並後的 Sprites 圖尺寸均爲偶數
-->

代碼規範

css 設置

樣式文件必須寫上 @charset 規則，而且必定要在樣式文件的第一行首個字符位置開始寫，編碼名用「UTF-8」
樣式文件編碼聲明 @charset 語句下面註明頁面名稱、做者、建立日期等信息
字符 @charset 「」; 都用小寫字母，不能出現轉義符，編碼名容許大小混寫
考慮到在使用「UTF-8」編碼狀況下 BOM 對代碼的污染和編碼顯示的問題，在可控範圍下，堅定不使用 BOM。

@charset "UTF-8";
/**
 * @desc File Info
 * @author Author Name
 * @date 2017-7-10
 */
.demo{}

css 代碼風格

//統一使用展開格式書寫樣式,避免緊湊格式
//不使用 ID 選擇器
//左括號與類名之間一個空格，冒號與屬性值之間一個空格
//取值不要帶有沒必要要的 0
.demo {
    display: block;
    width: 50px;
    color: rgba(255,255,255,.5);
}

css 屬性書寫順序

佈局定位屬性：display / position / float / clear / visibility / overflow
自身屬性：width / height / margin / padding / border / background
文本屬性：color / font / text-decoration / text-align / vertical-align /
white- space / break-word
其餘屬性（CSS3）：content / cursor / border-radius / box-shadow /
text-shadow / background:linear-gradient …

//示例
.demo {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

CSS3 瀏覽器私有前綴寫法

.demo {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

重置樣式

移動端

* { -webkit-tap-highlight-color: transparent; outline: 0; margin: 0; padding: 0; vertical-align: baseline; }
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; vertical-align: baseline; }
img { border: 0 none; vertical-align: top; }
i, em { font-style: normal; }
ol, ul { list-style: none; }
input, select, button, h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; color: #666; }
body { margin: 0 auto; min-width: 320px; max-width: 640px; height: 100%; font-size: 14px; fon-family: -apple-system,Helvetica,sans-serif; line-height: 1.5; color: #666; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
input[type="text"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

PC端

html, body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, fieldset, form, label, input, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, article, aside, audio, canvas, figure, footer, header, mark, menu, nav, section, time, video { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal }
article, aside, dialog, figure, footer, header, hgroup, nav, section, blockquote { display: block; }
ul, ol { list-style: none; }
img { border: 0 none; vertical-align: top; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: none; }
table { border-collapse: collapse; border-spacing: 0; }
strong, em, i { font-style: normal; font-weight: normal; }
ins { text-decoration: underline; }
del { text-decoration: line-through; }
mark { background: none; }
input::-ms-clear { display: none !important; }
body { font: 12px/1.5 \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, "Microsoft Yahei","微軟雅黑",Arial,sans-self; background: #fff; }
a { text-decoration: none; color: #333; }
a:hover { text-decoration: underline; }

媒體查詢

經常使用查詢語句

body {
    background-color: pink;
}
@media screen and (max-width: 960px) {
    body {
        background-color: darkgoldenrod;
    }
}
@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

/* 橫屏 */
@media all and (orientation :landscape) {
} 
/* 豎屏 */
@media all and (orientation :portrait) {
}

/* 設備寬度大於 320px 小於 640px */
@media all and (min-width:320px) and (max-width:640px) {
    
}

/* 設備像素比爲 2 */
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {
    
}

移動端經常使用私有屬性

-webkit-scrollbar 用於對擁有overflow屬性的區域自定義滾動條的樣式

//隱藏滾動條
.scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

-webkit-touch-callout

- none：系統默認菜單被禁用
 - inherit：系統默認菜單不被禁用

當你觸摸並按住觸摸目標時候，禁止或顯示系統默認菜單。
在iOS上，當你觸摸並按住觸摸的目標，好比一個連接，Safari瀏覽器將顯示連接有關的系統默認菜單，
這個屬性可讓你禁用系統默認菜單。

-webkit-user-select 定義用戶是否能選中元素內容

HTML/CSS文件命名

確保文件命名老是以字母開頭而不是數字，且字母一概小寫，以下劃線鏈接且不帶其餘標點符號

<!-- HTML -->
demo.html
demo_list.html
demo_detail.html
<!-- CSS -->
demo.css
demo_list.css
demo_detail.css

ClassName命名

ClassName的命名應該儘可能精短、明確，必須以字母開頭命名，且所有字母爲小寫，單詞之間統一使用下劃線「_」 鏈接

ClassName    含義

about    關於
account    帳戶
arrow    箭頭圖標
article    文章
aside    邊欄
audio    音頻
avatar    頭像
bg,background    背景
bar    欄（工具類）
branding    品牌化
crumb,breadcrumbs    麪包屑
btn,button    按鈕
caption    標題，說明
category    分類
chart    圖表
clearfix    清除浮動
close    關閉
col,column    列
comment    評論
community    社區
container    容器
content    內容
copyright    版權
current    當前態，選中態
default    默認
description    描述
details    細節
disabled    不可用
entry    文章，博文
error    錯誤
even    偶數，經常使用於多行列表或表格中
fail    失敗（提示）
feature    專題
fewer    收起
field    用於表單的輸入區域
figure    圖
filter    篩選
first    第一個，經常使用於列表中
footer    頁腳
forum    論壇
gallery    畫廊
group    模塊，清除浮動
header    頁頭
help    幫助
hide    隱藏
hightlight    高亮
home    主頁
icon    圖標
info,information    信息
last    最後一個，經常使用於列表中
links    連接
login    登陸
logout    退出
logo    標誌
main    主體
menu    菜單
meta    做者、更新時間等信息欄，通常位於標題之下
module    模塊
more    更多（展開）
msg,message    消息
nav,navigation    導航
next    下一頁
nub    小塊
odd    奇數，經常使用於多行列表或表格中
off    鼠標離開
on    鼠標移過
output    輸出
pagination    分頁
pop,popup    彈窗
preview    預覽
previous    上一頁
primary    主要
progress    進度條
promotion    促銷
rcommd,recommendations    推薦
reg,register    註冊
save    保存
search    搜索
secondary    次要
section    區塊
selected    已選
share    分享
show    顯示
sidebar    邊欄，側欄
slide    幻燈片，圖片切換
sort    排序
sub    次級的，子級的
submit    提交
subscribe    訂閱
subtitle    副標題
success    成功（提示）
summary    摘要
tab    標籤頁
table    表格
txt,text    文本
thumbnail    縮略圖
time    時間
tips    提示
title    標題
video    視頻
wrap    容器，包，通常用於最外層
wrapper    容器，包，通常用於最外層

ad、banner、gg、guanggao 等有機會和廣告掛勾的字眠不建議直接用來作ClassName，由於有些瀏覽器插件（Chrome的廣告攔截插件等）會直接過濾這些類名

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。