對(duì)于現(xiàn)在的web2.0,到底怎么書寫css樣式表，才算是最好的，最規(guī)范的！幾乎沒有什么明確的規(guī)定。在整個(gè)開發(fā)的項(xiàng)目中，只要寫出一套最適合于團(tuán)隊(duì)開發(fā)的最好了。當(dāng)然了很多的css樣式書寫范是大同小異的。需要不斷的去歸納總結(jié)。

根據(jù)經(jīng)驗(yàn)總結(jié)出以下幾點(diǎn)規(guī)范，請(qǐng)大家參考一下：
一.所有的CSS的盡量采用外部調(diào)用:這是我認(rèn)為最重要的一點(diǎn),因?yàn)檫@影響加載頁面時(shí)的速度.
<LINK href="style/style.css" rel="stylesheet" type="text/css">
書寫時(shí)重定義的最先，偽類其次，自定義最后（其中a:link a:visited a:hover a:actived 要按照順序?qū)懀┍阌谧约汉退碎喿x。
為了保證不同瀏覽器上字號(hào)保持一致，字號(hào)建議用點(diǎn)數(shù)pt和像素px來定義，pt一般使用中文宋體的9pt和11pt，px一般使用中文宋體12pt 和14.7px 這是經(jīng)過優(yōu)化的字號(hào)，黑體字或者宋體字加粗時(shí)，一般選用11pt和14.7px 的字號(hào)比較合適。

二. 樣式名均以字母開頭，后綴可包含字母、數(shù)字、下劃線和中劃線，樣式名盡量采用通俗易懂的英文單詞組成，如.img .body-bg #left_nav等(后附一些通用的命名標(biāo)準(zhǔn))；對(duì)于公用的自定義樣式可適當(dāng)加入模塊標(biāo)識(shí)或comm標(biāo)識(shí),以免與獨(dú)立模塊樣式產(chǎn)生沖突!
三.凡html內(nèi)置標(biāo)簽及CSS屬性名稱均采用大寫字母書寫，而自定義樣式名稱及CSS屬性值則均采用小寫字母寫書；如：P{...} BODY{...} .p1{COLOR: red} .li_bg{MARGIN: 0px;} 等；
四.能采用縮寫的樣式屬性盡量采用縮寫形式，如margin，padding，border等;
（原則：上-右-下-左 --> MARGIN: 1px 2px 3px 4px 上-(右左)-下 --> MARGIN: 1px 2px 3px
（上下）-（左右）--> MARGIN: 2px 4px 上右下左 --> MARGIN: 4px;
字體顏色類： #000000 --> #000 #00FFDD --> #0FD;
附：縮寫參考
There are a lot of CSS shorthand properties.
* font
font: font-style font-variant font-weight font-size/line-height font-family;
* margin
margin: margin-top margin-right margin-bottom margin-left;
* padding
padding: padding-top padding-right padding-bottom padding-left;
* border
border: border-width border-style border-color;
* border-top
border-top: border-top-width border-top-style border-top-color;
* border-right
border-right: border-right-width border-right-style border-right-color;
* border-bottom
border-bottom: border-bottom-width border-bottom-style border-bottom-color;
* border-left
border-left: border-left-width border-left-style border-left-color;
* border-width
border-width: border-top-width border-right-width border-bottom-width border-left-width
* background
background: background-color background-image background-repeat background-attachment background-position;
* list-style
list-style: list-style-type list-style-position list-style-image;
* outline
outline: outline-color outline-style outline-width;
五. 在書寫樣式的過程中，同一劃分模塊的樣式盡量寫在一起，并適當(dāng)加入注釋，以方便閱讀和查找；如<-- Footer --><-- End Footer -->或者/* Footer */ /* End Footer */
六.樣式抽象,我們可以把一些常用的樣式抽象出來，做為一類樣式；如COLOR: red FLOAT:left FONT-WEIGHT: bold等 這些屬性我們可能要經(jīng)常用到，我們是否需要為每個(gè)需要應(yīng)用這個(gè)樣式的元素都單獨(dú)寫上一個(gè)樣式呢？答案是明確的：不需要； 我們可以定義： .red{ COLOR:red } .fleft{FLOAT:left} 這樣是不是要方便多了^_^

七. 效率規(guī)則:(css屬性書寫順序)
1.顯示樣式
display/position/float/clear
2.自身樣式
width/height/margin/padding/border/background
3.內(nèi)容樣式
line-height/text-align/font系列（font-size/font-weight）/color/text-decoration/vitical-align

八.css樣式的命名:
對(duì)于css樣式表的命名書寫規(guī)范,請(qǐng)參考 http://www.dbjr.com.cn/css/22091.html
關(guān)于更多的css書寫規(guī)范,不止這些,還需要我們共同的來總結(jié)和學(xué)習(xí),如果您有更好的見意,請(qǐng)留言!

最新評(píng)論