web開發中怎么樣使css書寫規范?
2024-07-11 08:27:10
供稿：網友
對于現在的web2.0,到底怎么書寫css樣式表，才算是最好的，最規范的！幾乎沒有什么明確的規定。在整個開發的項目中，只要寫出一套最適合于團隊開發的最好了。當然了很多的css樣式書寫范是大同小異的。需要不斷的去歸納總結。
根據經驗總結出以下幾點規范，請大家參考一下：
一.所有的CSS的盡量采用外部調用:這是我認為最重要的一點,因為這影響加載頁面時的速度.
<LINK href="style/style.css" rel="stylesheet" type="text/css">
書寫時重定義的最先，偽類其次，自定義最后（其中a:link a:visited a:hover a:actived 要按照順序寫）便于自己和他人閱讀。
為了保證不同瀏覽器上字號保持一致，字號建議用點數pt和像素px來定義，pt一般使用中文宋體的9pt和11pt，px一般使用中文宋體12pt 和14.7px 這是經過優化的字號，黑體字或者宋體字加粗時，一般選用11pt和14.7px 的字號比較合適。
二. 樣式名均以字母開頭，后綴可包含字母、數字、下劃線和中劃線，樣式名盡量采用通俗易懂的英文單詞組成，如.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;
