編碼規(guī)范有什么作用呢经窖?
提高代碼可讀性
統(tǒng)一全局,加強(qiáng)團(tuán)隊(duì)合作
減少維護(hù)成本
規(guī)范的代碼有助于審查代碼
養(yǎng)成好習(xí)慣穴亏,有助于程序員個(gè)人能力的成長(zhǎng)
下面進(jìn)入正題玫锋,開始談?wù)劸幋a規(guī)范
HTML規(guī)范
HTML標(biāo)簽語義化,減少無意義的標(biāo)簽
標(biāo)簽名小寫权薯,正確閉合標(biāo)簽
使用HTML5的doctype來啟用標(biāo)準(zhǔn)模式姑躲,<!DOCTYPE html>
在html標(biāo)簽上設(shè)置正確的lang屬性睡扬,一般是<html lang="zh-CN">
屬性值必須用雙引號(hào)包圍
在meta里聲明字符編碼為utf-8
遵守正交原則,寫HTML時(shí)不要想CSS的寫法
使用外鏈的CSS和JavaScripe黍析,屬性type可以省略
盡量用alt標(biāo)簽去描述圖片
習(xí)慣性書寫注釋卖怜,方便日后維護(hù)
IE 支持通過特定的 <meta>標(biāo)簽來確定繪制當(dāng)前頁面所應(yīng)該采用的 IE 版本。除非有強(qiáng)烈的特殊需求阐枣,否則最好是設(shè)置為 edge mode马靠,從而通知 IE 采用其所支持的最新的模式。如<meta http-equiv="X-UA-Compatible" content="IE=Edge">
HTML 屬性應(yīng)當(dāng)按照以下給出的順序依次排列蔼两,確保代碼的易讀性甩鳄。
class
id,name
data-*
src,额划,for娩贷, type, href
title锁孟,alt
aria-*彬祖,role
CSS規(guī)范
tab縮進(jìn)用兩個(gè)空格代替
css的:后加個(gè)空格,{前加個(gè)空格
每條聲明后都加分號(hào);
換行品抽,而不要放在同一行
顏色用小寫储笑,能縮寫就縮寫,如#fff
小數(shù)不用寫前綴圆恤,0.5s可寫成.5s突倍,0不用加單位
盡量縮寫,如margin:5px 10px 5px 10px;可寫成margin:5px 10px;
縮寫屬性盆昙,如font: 16px/1.5 palatino, georgia, serif;
聲明順序遵循以下
結(jié)構(gòu)性屬性
display区匣、position骡楼、overflow焰望、float锈颗、margin、padding
表現(xiàn)性屬性
width炼团、height澎嚣、background、border瘟芝、font
class命名的語義化
語義化優(yōu)先
基于功能命名易桃、基于內(nèi)容命名、基于表現(xiàn)命名
簡(jiǎn)略锌俱、明了晤郑、無后患
編程過程中我們時(shí)常被class命名所困擾,現(xiàn)在來列舉一些常用的命名。