Web開發(fā)中如何使css樣式書寫規(guī)范

在web開發(fā)中頁面設(shè)計(jì)時(shí)如何使css書寫規(guī)范是很重要的。正確規(guī)范的書寫css樣式表可以使提高網(wǎng)頁的速度以及，各種瀏覽器的兼容性，以便于開發(fā)程序的人員更好的嵌入程序。對(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://bbs.liehuo.net/thread-5242-1-1.html

文章轉(zhuǎn)自：http://www.cnblogs.com/listly/

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)