平時(shí)寫代碼遵守的編碼規(guī)范

編碼規(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)在來列舉一些常用的命名。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末造寝,一起剝皮案震驚了整個(gè)濱河市磕洪,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌匹舞,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,104評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件线脚,死亡現(xiàn)場(chǎng)離奇詭異赐稽,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)浑侥,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,816評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門姊舵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人寓落,你說我怎么就攤上這事括丁。” “怎么了伶选?”我有些...
    開封第一講書人閱讀 168,697評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵史飞,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我仰税,道長(zhǎng)构资,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,836評(píng)論 1 298
  • 正文 為了忘掉前任陨簇,我火速辦了婚禮吐绵,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘河绽。我一直安慰自己己单,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,851評(píng)論 6 397
  • 文/花漫 我一把揭開白布耙饰。 她就那樣靜靜地躺著纹笼,像睡著了一般。 火紅的嫁衣襯著肌膚如雪苟跪。 梳的紋絲不亂的頭發(fā)上允乐,一...
    開封第一講書人閱讀 52,441評(píng)論 1 310
  • 那天,我揣著相機(jī)與錄音削咆,去河邊找鬼牍疏。 笑死,一個(gè)胖子當(dāng)著我的面吹牛拨齐,可吹牛的內(nèi)容都是我干的鳞陨。 我是一名探鬼主播,決...
    沈念sama閱讀 40,992評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼厦滤!你這毒婦竟也來了援岩?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,899評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤掏导,失蹤者是張志新(化名)和其女友劉穎享怀,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體趟咆,經(jīng)...
    沈念sama閱讀 46,457評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡添瓷,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,529評(píng)論 3 341
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了值纱。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鳞贷。...
    茶點(diǎn)故事閱讀 40,664評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖虐唠,靈堂內(nèi)的尸體忽然破棺而出搀愧,到底是詐尸還是另有隱情,我是刑警寧澤疆偿,帶...
    沈念sama閱讀 36,346評(píng)論 5 350
  • 正文 年R本政府宣布咱筛,位于F島的核電站,受9級(jí)特大地震影響杆故,放射性物質(zhì)發(fā)生泄漏眷蚓。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,025評(píng)論 3 334
  • 文/蒙蒙 一反番、第九天 我趴在偏房一處隱蔽的房頂上張望沙热。 院中可真熱鬧,春花似錦罢缸、人聲如沸篙贸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,511評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽爵川。三九已至,卻和暖如春息楔,著一層夾襖步出監(jiān)牢的瞬間寝贡,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,611評(píng)論 1 272
  • 我被黑心中介騙來泰國打工值依, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留圃泡,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,081評(píng)論 3 377
  • 正文 我出身青樓愿险,卻偏偏與公主長(zhǎng)得像颇蜡,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,675評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • 每個(gè)程序員都會(huì)有自己的編碼習(xí)慣风秤,但是幾乎每個(gè)項(xiàng)目鳖目,各個(gè)公司都會(huì)有自己的編碼規(guī)范,開發(fā)軟件是一個(gè)團(tuán)隊(duì)活動(dòng)缤弦,不能搞個(gè)人...
    饑人谷_魯晉閱讀 908評(píng)論 1 0
  • 轉(zhuǎn)載請(qǐng)聲明 原文鏈接地址 關(guān)注公眾號(hào)獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,560評(píng)論 32 459
  • 簡(jiǎn)介瀏覽器可以被認(rèn)為是使用最廣泛的軟件碍沐,本文將介紹瀏覽器的工 作原理狸捅,我們將看到,從你在地址欄輸入google.c...
    聽風(fēng)閣閱讀 3,293評(píng)論 0 7
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案抢韭? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,760評(píng)論 1 92
  • 每個(gè)讀者只能讀到已然存在于他內(nèi)心的東西薪贫。書籍只不過是一種光學(xué)儀器恍箭,幫助讀者發(fā)現(xiàn)自己的內(nèi)心刻恭。 ...
    半朵姑娘閱讀 1,275評(píng)論 0 2