web開發(fā)中怎么樣使css書寫規(guī)范?
2024-07-11 08:45:41
供稿：網友
對于現(xiàn)在的web2.0,到底怎么書寫css樣式表，才算是最好的，最規(guī)范的！幾乎沒有什么明確的規(guī)定。在整個開發(fā)的項目中，只要寫出一套最適合于團隊開發(fā)的最好了。當然了很多的css樣式書寫范是大同小異的。需要不斷的去歸納總結。
根據經驗總結出以下幾點規(guī)范，請大家參考一下：
一.所有的CSS的盡量采用外部調用:這是我認為最重要的一點,因為這影響加載頁面時的速度.
<LINK href="style/style.css" rel="stylesheet" type="text/css">
書寫時重定義的最先，偽類其次，自定義最后（其中a:link a:visited a:hover a:actived 要按照順序寫）便于自己和他人閱讀。
為了保證不同瀏覽器上字號保持一致，字號建議用點數(shù)pt和像素px來定義，pt一般使用中文宋體的9pt和11pt，px一般使用中文宋體12pt 和14.7px 這是經過優(yōu)化的字號，黑體字或者宋體字加粗時，一般選用11pt和14.7px 的字號比較合適。
二. 樣式名均以字母開頭，后綴可包含字母、數(shù)字、下劃線和中劃線，樣式名盡量采用通俗易懂的英文單詞組成，如.img .body-bg #left_nav等(后附一些通用的命名標準)；對于公用的自定義樣式可適當加入模塊標識或comm標識,以免與獨立模塊樣式產生沖突!
三.凡html內置標簽及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;
五. 在書寫樣式的過程中，同一劃分模塊的樣式盡量寫在一起，并適當加入注釋，以方便閱讀和查找；如<-- Footer --><-- End Footer -->或者/* Footer */ /* End Footer */
六.樣式抽象,我們可以把一些常用的樣式抽象出來，做為一類樣式；如COLOR: red FLOAT:left FONT-WEIGHT: bold等 這些屬性我們可能要經常用到，我們是否需要為每個需要應用這個樣式的元素都單獨寫上一個樣式呢？答案是明確的：不需要； 我們可以定義： .red{ COLOR:red } .fleft{FLOAT:left} 這樣是不是要方便多了^_^
七. 效率規(guī)則:(css屬性書寫順序)
1.顯示樣式
display/position/float/clear
2.自身樣式
width/height/margin/padding/border/background
3.內容樣式
line-height/text-align/font系列（font-size/font-weight）/color/text-decoration/vitical-align
八.css樣式的命名:
對于css樣式表的命名書寫規(guī)范,請參考 http://www.survivalescaperooms.com/css/22091.html
關于更多的css書寫規(guī)范,不止這些,還需要我們共同的來總結和學習,如果您有更好的見意,請留言!
