規(guī)范目的：
- 使開發(fā)流程規(guī)范化，代碼簡(jiǎn)潔、美觀。
文件規(guī)范：
- 文件名用英文單詞，多個(gè)單詞用駝峰命名法。
- 一些瀏覽器會(huì)將含有這些詞的作為廣告攔截，文件命名、ID、CLASS等所有命名避免以上詞匯。
ad、ads、adv、banner、sponsor、gg、guangg、guanggao等
HTML書寫規(guī)范：
- 為每個(gè)HTML頁面的第一行添加標(biāo)準(zhǔn)模式（standard
mode）的聲明，確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)。
<!DOCTYPE html>
文檔類型聲明統(tǒng)一為HTML5聲明類型，編碼統(tǒng)一為UTF-8。
<meta charset="UTF-8">
HTML屬性應(yīng)當(dāng)按照以下給出的順序依次排列，來確保代碼的易讀性。
class
id 、 name
data-*
src、for、 type、 href
title、alt
aria-*、 role
- 編碼均遵循XHTML標(biāo)準(zhǔn),
標(biāo)簽、屬性、屬性命名由小寫英文、數(shù)字和_組成，且所有標(biāo)簽必須閉合，屬性值必須用雙引號(hào)"",
避免使用中文拼音盡量簡(jiǎn)易并要求語義化。
CLASS --> nHeadTitle --> CLASS遵循小駝峰命名法（little camel-case）
ID --> n_head_title --> ID遵循名稱+_
NAME --> N_Head_Title --> NAME屬性命名遵循首個(gè)字母大寫+_
<div class="nHeadTitle" id="n_head_title" name="N_Head_Title"></div>
- 語義化
HTML。- 盡可能減少
<DIV>嵌套。
-HTML中對(duì)于屬性的定義，確保全部使用雙引號(hào)，絕不要使用單引號(hào)
CSS書寫規(guī)范：
- 導(dǎo)入css樣式
<!-- 放置所有瀏覽器樣式-->
<link rel="stylesheet" type="text/css" href="">
<!-- 只放置IE必須，而不能通過w3c的-->
<!--[if IE]
<link rel="stylesheet" href="">
<![endif]-->
- CSS樣式新建或修改盡量遵循以下原則。
根據(jù)新建樣式的適用范圍分為三級(jí)：全站級(jí)、產(chǎn)品級(jí)、頁面級(jí)。
盡量通過繼承和層疊重用已有樣式。
不要輕易改動(dòng)全站級(jí)CSS。改動(dòng)后，要經(jīng)過全面測(cè)試。
- CSS書寫順序。
.header {
/* 顯示屬性 */
display || visibility
list-style
position top || right || bottom || left
z-index
clear
float
/* 自身屬性 */
width max-width || min-width
height max-height || min-height
overflow || clip
margin
padding
outline
border
background
/* 文本屬性 */
color
font
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor
content
};
- 兼容多個(gè)瀏覽器時(shí)，將標(biāo)準(zhǔn)屬性寫在底部。
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari和Chrome */
border-radius: 15px; /* Opera 10.5+, 及使用了IE-CSS3的IE瀏覽器 *//標(biāo)準(zhǔn)屬性
- 使用選擇器時(shí)，命名比較短的詞匯或者縮寫的不允許直接定義樣式。
.hd,.bd,.td{};//如這些命名
- 多選擇器規(guī)則之間換行，即當(dāng)樣式針對(duì)多個(gè)選擇器時(shí)每個(gè)選擇器占一行。
button.btn,
input.btn,
input[type="button"] {…};
- 優(yōu)化CSS選擇器。
#header a { color: #444; };/*CSS選擇器是從右邊到左邊進(jìn)行匹配*/
- 避免使用低效的選擇器。
body > * {…};
ul > li > a {…};
#footer > h3 {…};
ul#top_blue_nav {…};
#searbar span.submit a { … }; /* 反面示例 */
- 六個(gè)不要三個(gè)避免一個(gè)使用。
不要在標(biāo)簽上直接寫樣式
不要在CSS中使用expression
不要在CSS中使用@import
不要在CSS中使用!important
不要在CSS中使用“*”選擇符
不要將CSS樣式寫為單行
避免使用filter
避免使用行內(nèi)（inline）樣式
避免使用“*”設(shè)置{margin: 0; padding: 0;}
使用after或overflow的方式清浮動(dòng)
- 減少使用影響性能的屬性。
position:absolute;
float:left;//如這些定位或浮動(dòng)屬性
