前端編碼規(guī)范之CSS

作者:李靖
原文地址:http://www.cnblogs.com/hustskyking/p/css-spec.html

"字是門面書是屋"另患,我們不會(huì)去手寫代碼,但是敲出來(lái)的代碼要好看蛾绎、有條理昆箕,這還必須得有一點(diǎn)約束~

團(tuán)隊(duì)開(kāi)發(fā)中,每個(gè)人的編碼風(fēng)格都不盡相同租冠,有時(shí)候可能存在很大的差異鹏倘,為了便于壓縮組件對(duì)代碼進(jìn)行壓縮以及書寫樣式的規(guī)范統(tǒng)一和美觀,很有必要大家一起來(lái)研究一套基本規(guī)范(模板)顽爹!

我先拋磚引玉纤泵。(禁止)、(必須)等字眼镜粤,在這里只是表示強(qiáng)調(diào)捏题,未嚴(yán)格要求

前端規(guī)范之CSS

1. tab鍵用(必須)四個(gè)空格代替

因?yàn)樵诓煌到y(tǒng)的編輯工具對(duì)tab解析不一樣肉渴,windows下的tab鍵是占四個(gè)空格的位置公荧,而在linux下會(huì)變成占八個(gè)空格的位置(除非你自己設(shè)定了tab鍵所占的位置長(zhǎng)度)。

一些童鞋可能會(huì)有疑問(wèn)同规,tab鍵換成四個(gè)空格循狰,多麻煩啊~

其實(shí)不然,我平時(shí)用sublime text比較多券勺,在這個(gè)工具中可以對(duì)tab鍵進(jìn)行設(shè)置绪钥。


選擇Indent Using SpacesTab Width:4兩項(xiàng)即可关炼。

2. 每個(gè)樣式屬性后(必須)加 ";"

方便壓縮工具"斷句"程腹。

3. Class命名中(禁止)出現(xiàn)大寫字母,(必須)采用” - “對(duì)class中的字母分隔儒拂,如:

 /* 正確的寫法 */
 .hotel-title {
     font-weight: bold;
 }

 /* 不推薦的寫法 */
 .hotelTitle {
     font-weight: bold;
 }
  • 用"-"隔開(kāi)比使用駝峰是更加清晰跪楞。
  • 產(chǎn)品線-產(chǎn)品-模塊-子模塊,命名的時(shí)候也可以使用這種方式(@Artwl)

4. 空格的使用侣灶,以下規(guī)則(必須)執(zhí)行:

 .hotel-content {
     font-weight: bold;
 }
  • 選擇器與 { 之前(必須)要有空格
  • 屬性名的 : 后(必須)要有空格
  • 屬性名的 : 前(禁止)加空格

一個(gè)原因是美觀甸祭,其次IE 6存在一個(gè)bug, 戳bug

5.多選擇器規(guī)則之間(必須)換行

當(dāng)樣式針對(duì)多個(gè)選擇器時(shí)每個(gè)選擇器占一行

 /* 推薦的寫法 */
 a.btn,
 input.btn,
 input[type="button"] {
     ......
 }

6. (禁止)將樣式寫為單行, 如

.hotel-content {margin: 10px; background-color: #efefef;}

單行顯示不好注釋褥影,不好備注池户,這應(yīng)該是壓縮工具的活兒~

7. (禁止)向 0 后添加單位, 如:

.obj {
    left: 0px;
}

只是為了統(tǒng)一。記住,綠色字表強(qiáng)調(diào)校焦,不表強(qiáng)制赊抖!

8. (禁止)使用css原生import

使用css原生import有很多弊端,比如會(huì)增加請(qǐng)求數(shù)等....

推薦文章Don't use @import

9. (推薦)屬性的書寫順序, 舉個(gè)例子:

.hotel-content {
     /* 定位 */
     display: block;
     position: absolute;
     left: 0;
     top: 0;
     /* 盒模型 */
     width: 50px;
     height: 50px;
     margin: 10px;
     border: 1px solid black;
     / *其他* /
     color: #efefef;
 }
  • 定位相關(guān), 常見(jiàn)的有:display position left top float
  • 盒模型相關(guān), 常見(jiàn)的有:width height margin padding border
  • 其他屬性
     
    按照這樣的順序書寫可見(jiàn)提升瀏覽器渲染dom的性能

簡(jiǎn)單舉個(gè)例子寨典,網(wǎng)頁(yè)中的圖片氛雪,如果沒(méi)有設(shè)置width和height,在圖片載入之前耸成,他所占的空間為0报亩,但是當(dāng)他加載完畢之后,那塊為0的空間突然被撐開(kāi)了井氢,這樣會(huì)導(dǎo)致曲梗,他下面的元素重新排列和渲染淑仆,造成重繪(repaint)和回流(reflow)奏候。我們?cè)趯慶ss的時(shí)候揉燃,把元素的定位放在前頭,首先讓瀏覽器知道該元素是在文本流內(nèi)還是外约急,具體在頁(yè)面的哪個(gè)部位零远,接著讓瀏覽器知道他們的寬度和高度,border等這些占用空間的屬性厌蔽,其他的屬性都是在這個(gè)固定的區(qū)域內(nèi)渲染的遍烦,差不多就是這個(gè)意思吧~(@frec)

** 推薦文章**:

10. 小圖片(必須)sprite 合并

推薦文章NodeJs智能合并CSS精靈圖工具iSpriter

11. (推薦)當(dāng)編寫針對(duì)特定html結(jié)構(gòu)的樣式時(shí),使用元素名 + 類名

/* 所有的nav都是針對(duì)ul編寫的 */
 ul.nav {
     ......
 }

".a div"和".a div.b"躺枕,為什么后者好服猪?如果需求有所變化,在".a"下有多加了一個(gè)div拐云,試問(wèn)罢猪,開(kāi)始的樣式是不是會(huì)影響后來(lái)的div啊~

12. (推薦)IE Hack List

 /* 針對(duì)ie的hack */
 selector {
     property: value;     /* 所有瀏覽器 */ 
     property: value\9;   /* 所有IE瀏覽器 */ 
     property: value\0;   /* IE8 */
     +property: value;    /* IE7 */
     _property: value;    /* IE6 */
     *property: value;    /* IE6-7 */
 }

當(dāng)使用hack的時(shí)候想想能不能用更好的樣式代替

13. (不推薦)ie使用filter,( 禁止)使用expression

這里主要是效率問(wèn)題,應(yīng)該當(dāng)格外注意叉瘩,咱們要少用燒CPU的東西~

14. (禁止)使用行內(nèi)(inline)樣式

<p style="font-size: 12px; color: #FFFFFF">靖鳴君</p>

像這樣的行內(nèi)樣式膳帕,最好用一個(gè)class代替。又如要隱藏某個(gè)元素薇缅,可以給他加一個(gè)class

.hide {
    display: none;
}

盡量做到樣式和結(jié)構(gòu)分離~

15. (推薦)reset.css樣式

推薦網(wǎng)站:http://www.cssreset.com/

16.(禁止)使用""來(lái)選擇元素*

/*別這樣寫*/
* {
    margin: 0;
    padding: 0;
}

這樣寫是沒(méi)有必要的危彩,一些元素在瀏覽器中默認(rèn)有margin或padding值,但是只是部分元素泳桦,沒(méi)有必要將所有元素的margin汤徽、padding值都置為0。

17. 鏈接的樣式灸撰,(務(wù)必)按照這個(gè)順序來(lái)書寫

a:link -> a:visited -> a:hover -> a:active

18. 等你補(bǔ)充...

應(yīng)該說(shuō)在前面的話

  • 對(duì)于不同的團(tuán)隊(duì)谒府、不同的需求拼坎,編碼規(guī)范上有一些差異,這個(gè)很正常完疫。
  • 最后上線的代碼肯定不是上述遵從規(guī)范的泰鸡,上線的代碼都會(huì)經(jīng)過(guò)打包和壓縮。
  • 不同的人有不同的編碼風(fēng)格壳鹤,當(dāng)你是一個(gè)人作戰(zhàn)的時(shí)候盛龄,你可以不用考慮這些,但是如果是團(tuán)隊(duì)開(kāi)發(fā)芳誓,有一個(gè)規(guī)范還是很有指導(dǎo)價(jià)值的~

這些規(guī)范是在團(tuán)隊(duì)開(kāi)發(fā)過(guò)程中余舶,集思廣益總結(jié)出來(lái)的,不是很全面兆沙,如果你有好的建議,請(qǐng)?zhí)岢鰜?lái)莉掂,我們一起打造一個(gè)良好的前端生態(tài)環(huán)境葛圃!

后面我會(huì)陸續(xù)把HTML、JavaScript和LESS等規(guī)范羅列出來(lái)憎妙,大家共同進(jìn)步?庹!厘唾!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末褥符,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子抚垃,更是在濱河造成了極大的恐慌喷楣,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,496評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鹤树,死亡現(xiàn)場(chǎng)離奇詭異铣焊,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)罕伯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門曲伊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人追他,你說(shuō)我怎么就攤上這事坟募。” “怎么了邑狸?”我有些...
    開(kāi)封第一講書人閱讀 162,632評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵懈糯,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我单雾,道長(zhǎng)昂利,這世上最難降的妖魔是什么届腐? 我笑而不...
    開(kāi)封第一講書人閱讀 58,180評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮蜂奸,結(jié)果婚禮上犁苏,老公的妹妹穿的比我還像新娘。我一直安慰自己扩所,他們只是感情好围详,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著祖屏,像睡著了一般助赞。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上袁勺,一...
    開(kāi)封第一講書人閱讀 51,165評(píng)論 1 299
  • 那天雹食,我揣著相機(jī)與錄音,去河邊找鬼期丰。 笑死群叶,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的钝荡。 我是一名探鬼主播街立,決...
    沈念sama閱讀 40,052評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼埠通!你這毒婦竟也來(lái)了赎离?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 38,910評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤端辱,失蹤者是張志新(化名)和其女友劉穎梁剔,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體舞蔽,經(jīng)...
    沈念sama閱讀 45,324評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡憾朴,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了喷鸽。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片众雷。...
    茶點(diǎn)故事閱讀 39,711評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖做祝,靈堂內(nèi)的尸體忽然破棺而出砾省,到底是詐尸還是另有隱情,我是刑警寧澤混槐,帶...
    沈念sama閱讀 35,424評(píng)論 5 343
  • 正文 年R本政府宣布编兄,位于F島的核電站,受9級(jí)特大地震影響声登,放射性物質(zhì)發(fā)生泄漏狠鸳。R本人自食惡果不足惜揣苏,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望件舵。 院中可真熱鬧卸察,春花似錦、人聲如沸铅祸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,668評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)临梗。三九已至涡扼,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間盟庞,已是汗流浹背吃沪。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 32,823評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留什猖,地道東北人票彪。 一個(gè)月前我還...
    沈念sama閱讀 47,722評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像卸伞,于是被迫代替她去往敵國(guó)和親抹镊。 傳聞我的和親對(duì)象是個(gè)殘疾皇子锉屈,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評(píng)論 2 353

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

  • "字是門面書是屋"荤傲,我們不會(huì)去手寫代碼,但是敲出來(lái)的代碼要好看颈渊、有條理遂黍,這還必須得有一點(diǎn)約束~ 團(tuán)隊(duì)開(kāi)發(fā)中,每個(gè)人...
    郝特么冷閱讀 259評(píng)論 0 1
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案俊嗽? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,748評(píng)論 1 92
  • 越過(guò)那條長(zhǎng)街再轉(zhuǎn)彎 那是以前我常來(lái)的地方 誰(shuí)還傳言和感情的窗 你一直希望對(duì)面是一片海洋 后來(lái)聽(tīng)說(shuō)你一直想搬 太多寂...
    靜曉懶閱讀 537評(píng)論 0 1
  • 今天是記錄簡(jiǎn)書的第一天雾家。 跟無(wú)數(shù)迷茫中的青年一樣,我也無(wú)數(shù)次質(zhì)問(wèn)生命的意義绍豁,生命從哪里來(lái)芯咧,到哪里去,...
    錦雁西閱讀 239評(píng)論 0 1
  • 媽媽每天過(guò)的糊糊涂涂的不記日子竹揍,中午去飯?zhí)贸燥垥r(shí)看到宣傳板才知道敬飒。媽媽今年最感恩的就是有了你,每每看到你偎依在媽媽...
    一路有你ing閱讀 122評(píng)論 0 0