Discuzx系統(tǒng) CSS 編碼規(guī)范、CSS屬性書寫順序
發(fā)布時(shí)間：2014-10-22 15:54:44 作者：佚名 
我要評論
我要評論這篇文章主要介紹了Discuzx系統(tǒng) CSS 編碼規(guī)范、CSS屬性書寫順序,需要的朋友可以參考下
1. 屬性寫在一行內(nèi)，屬性之間、屬性名和值之間以及屬性與“{}”之間須有空格，例如：.class { width: 400px; height: 300px; }
2. 屬性的書寫順序：
2.1. 按照元素模型由外及內(nèi)，由整體到細(xì)節(jié)書寫，大致分為五組：
位置：position,left,right,float
盒模型屬性：display,margin,padding,width,height
邊框與背景：border,background
段落與文本：line-height,text-indent,font,color,text-decoration,...
其他屬性：overflow,cursor,visibility,...
2.2. 針對特殊瀏覽器的屬性，應(yīng)寫在標(biāo)準(zhǔn)屬性之前，例如：-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;
3. 謹(jǐn)慎添加新的選擇符規(guī)則，尤其不可濫用 id，盡可能繼承和復(fù)用已有樣式
4. 選擇符、屬性、值均用小寫（格式的顏色值除外），縮寫的選擇符名稱須說明縮寫前的全稱，例如 .cl -> Clearfix
5. 避免使用各種 CSS Hack，如需對 IE 進(jìn)行特殊定義，請參閱下節(jié)“關(guān)于 CSS Hack 的說明”
6. 勿使用冗余低效的 CSS 寫法，例如：
ul li a span { ... }
7. 慎用 !important
8. 建議使用在 class/id 名稱中的詞語
6.1. 表示狀態(tài)：a->active
6.2. 表示結(jié)構(gòu)：h->header,c->content,f->footer
6.3. 表示區(qū)域：mn->main,sd->side,nv-navigation,mu->menu
6.4. 表示樣式：l-list,tab,p_pop
9. 開發(fā)過程中的未定事項(xiàng)，須用 [!] 標(biāo)出，以便于后續(xù)討論整理
2. 屬性的書寫順序：
2.1. 按照元素模型由外及內(nèi)，由整體到細(xì)節(jié)書寫，大致分為五組：
位置：position,left,right,float
盒模型屬性：display,margin,padding,width,height
邊框與背景：border,background
段落與文本：line-height,text-indent,font,color,text-decoration,...
其他屬性：overflow,cursor,visibility,...
2.2. 針對特殊瀏覽器的屬性，應(yīng)寫在標(biāo)準(zhǔn)屬性之前，例如：-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;
3. 謹(jǐn)慎添加新的選擇符規(guī)則，尤其不可濫用 id，盡可能繼承和復(fù)用已有樣式
4. 選擇符、屬性、值均用小寫（格式的顏色值除外），縮寫的選擇符名稱須說明縮寫前的全稱，例如 .cl -> Clearfix
5. 避免使用各種 CSS Hack，如需對 IE 進(jìn)行特殊定義，請參閱下節(jié)“關(guān)于 CSS Hack 的說明”
6. 勿使用冗余低效的 CSS 寫法，例如：
ul li a span { ... }
7. 慎用 !important
8. 建議使用在 class/id 名稱中的詞語
6.1. 表示狀態(tài)：a->active
6.2. 表示結(jié)構(gòu)：h->header,c->content,f->footer
6.3. 表示區(qū)域：mn->main,sd->side,nv-navigation,mu->menu
6.4. 表示樣式：l-list,tab,p_pop
9. 開發(fā)過程中的未定事項(xiàng)，須用 [!] 標(biāo)出，以便于后續(xù)討論整理
相關(guān)文章
- 這里為大家送上一份CSS代碼書寫規(guī)范究極指南,包括代碼注釋和命名規(guī)范以及空格縮進(jìn)等一應(yīng)俱全,都來自大家平時(shí)的約定俗成,絕對值得學(xué)習(xí)借鑒,需要的朋友可以參考下2016-05-27
- 寫了這么久的CSS，但大部分前端er都沒有按照良好的CSS書寫規(guī)范來寫CSS代碼，這樣會影響代碼的閱讀體驗(yàn)，這里總結(jié)一個(gè)CSS書寫規(guī)范、CSS書寫順序供大家參考2014-03-06
- CSS在書寫過程中會一些小技巧，會省時(shí)省力，比如按字母順序來排列css、先標(biāo)記 后css等等，本文整理了一些，感興趣的朋友可以參考下希望對大家書寫css有所幫助2013-08-13
CSS XTHML書寫規(guī)范以及常見問題總結(jié)(頁面最優(yōu)化)
這是去年為公司培訓(xùn)的時(shí)候?qū)懙恼淼囊粋€(gè)白皮書，希望大家多多提出意見。謝謝！2010-06-01- 在web開發(fā)中頁面設(shè)計(jì)時(shí)如何使css書寫規(guī)范是很重要的。正確規(guī)范的書寫css樣式表可以使提高網(wǎng)頁的速度以及，各種瀏覽器的兼容性，以便于開發(fā)程序的人員更好的嵌入程序。2009-10-29
- 這篇文章主要給大家介紹CSS 的加載及加載順序以及遇到的問題思路解析，文中還給大家補(bǔ)充介紹了關(guān)于html，css，js三者的加載順序問題，需要的朋友參考下吧2017-12-25
- CSS在使用選擇器對元素施加屬性的時(shí)候會有先后順序,包括特殊性和重要性等概念在內(nèi),這里我們就來詳解CSS中的選擇器優(yōu)先級順序,需要的朋友可以參考下2016-06-21
- 這篇文章主要介紹了解決CSS3的opacity屬性帶來的層疊順序問題的方法,主要針對opacity的屬性值小于1的層會覆蓋在其他層之上的問題,需要的朋友可以參考下2016-05-09
- 這篇文章主要介紹了CSS中z-index屬性對層疊順序的處理,分情況講解了各種曾跌情況下哪個(gè)box更靠近用戶,需要的朋友可以參考下2016-03-05
- css書寫順序，據(jù)網(wǎng)上說這個(gè)是Mozilla建議的，讓你的代碼兼容性更好。2010-01-01