1、CSS文件及樣式命名
首先，先為大家展示壹些CSS文件及樣式的命名樣例，因為這些名稱能使大家立馬明白定義的文件，具體如下所示：
（1）、CSS文件命名規範
全局樣式：global.css
框架布局：layout.css
字體樣式：font.css
鏈接樣式：link.css
打印樣式：print.css
主要的：master.css
專欄：columns.css
主題：themes.css
（2）、CSS樣式命名規範
對於CSS樣式的命名規則，建議用字母、_號工、-號、數字組成，必須以字母開頭，不能為純數字，為了開發後樣式名管理方便，大家請用有意義的單詞或縮寫組合來命名，讓同事壹看就明白這樣式大概是哪壹塊的，這樣就節省了查找樣式的時間。
例如：頭部樣式用header，頭部左邊，可以用header_left或header_l，還有如果是列結構的可以這樣——box_1of3 (三列中的第壹列)，box_2of3 (三列中的第二列)、box_3of3 (三列中的第三列)，其它的我就不壹壹舉例了，大家按以上規律去命名就好。
下面列出壹些常用的命名單詞方便大家使用（以後大家工作過程中慢慢把自己積累的單詞都***享出來，那大家的命就會更加統壹了，就不會有壹義多詞的情況了）：
容器：container/box
頭部：header
主導航：mainNav
子導航：subNav
頂導航：topNav
邊導航：sidebar
左導航：leftsideBar
右導航:rightsideBar
網站標誌：logo
大廣告：banner
頁面中部：mainBody
整個頁面：content
底部：footer
菜單：menu
菜單內容：menuContent
子菜單：subMenu
子菜單內容：subMenuContent
搜索：search
搜索關鍵字：keyword
搜索範圍：range
標簽文字：tagTitle
標簽內容：tagContent
當前標簽：tagCurrent/currentTag
標題：title
內容：content
列表：list
當前位置：currentPath
側邊欄：sidebar
圖標：icon
註釋：note
登錄：login
註冊：register
面包屑：breadCrumb(即頁面所處位置導航提示)
列定義：column_1of3 (三列中的第壹列)、column_2of3 (三列中的第二列)、column_3of3 (三列中的第三列)
2、CSS的優先級
行內樣式(inline style) > ID選擇符 > 樣式(class)、偽類(pseudo-class)和屬性(attribute)選擇符 > 類別(type)，偽對象(pseudo-element)。
博客註解：
*內聯樣式(inline style)：元素的style屬性，比如 <div style="color:red;"></div>，其中的color:red;就是行內樣式。
*ID選擇符：元素的id屬性，比如<div></div>可以用ID選擇符#content
*偽類(pseudo-class)：最常見的是錨(a)偽類，比如a:link,a:visited.
*屬性選擇符(attribute selectors)：比如div[class=demo],含有class為demo的div元素。
*類別選擇器(type selector)：HTML標簽選擇，比如div .demo,div元素下含有class為demo的元素。
*偽對象選擇器(pseudo-element selector)：比如div:first-letter,div元素下的第壹個單詞。
3、默認值
通常padding和margin的默認值為0，background-color的默認值是transparent，但是在不同的瀏覽器默認值可能不同。
如果怕有沖突，可以在樣式表壹開始就先定義所有元素的margin和padding值都為0，例如：
* {
padding:0;
margin:0
}
或者是針對某元素來定義：
ul,li,div,span {
padding:0;
margin:0
}
4、不要重復定義可繼承的值
CSS中，子元素自動繼承父元素的屬性值，象顏色、字體等，已經在父元素中定義過的，在子元素中可以直接繼承，不需要重復定義。
除非是為了更變當前元素樣式不使用父元素的屬性值，但是要註意，瀏覽器可能用壹些默認值覆蓋妳的定義。
5、CSS代碼書寫樣式
在寫CSS代碼的時候，對於縮進、斷行、空格，每個人有每個人的書寫習慣，在經過不斷實踐後，我決定采用下面這樣的書寫樣式：
.classname {
width:100px;
}
當使用聯合定義時，我通常將每個選擇器單獨寫壹行，這樣方便在CSS文件中找到它們，在最後壹個選擇器和大括號之間加壹個空格，每個定義也單獨寫壹行，分號直接在屬性值後，不要加空格。
我習慣在每個屬性值後面都加分號，雖然規則上允許最後壹個屬性值後面可以不寫分號，但是如果妳要加新樣式時容易忘記補上分號而產生錯誤，所以還是都加比較好，最後，關閉的大括號單獨寫壹行，這樣的空格和換行有助與閱讀
6、使用css縮寫
使用縮寫可以幫助減少妳CSS文件的大小，更加容易閱讀，常用的css縮寫的主要規則有：
（1）、顏色
16進制的色彩值，如果每兩位的值相同，可以縮寫壹半，例如：
#000000可以縮寫為#000;#336699可以縮寫為#369;
（2）、盒尺寸
通常有下面四種書寫方法:
property:value1; 表示所有邊都是壹個值value1
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四個值依次表示top,right,bottom,left
方便的記憶方法是順時針，上右下左，具體應用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;
（3）、邊框(border)
邊框的屬性如下：
border-width:1px;
border-style:solid;
border-color:#000;
可以縮寫為壹句：border:1px solid #000;
語法是：border:width style color;
（4）、背景(Backgrounds)
背景的屬性如下：
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以縮寫為壹句：background:#f00 url(background.gif) no-repeat fixed 0 0;
語法是：background:color image repeat attachment position;
妳可以省略其中壹個或多個屬性值，如果省略，該屬性值將用瀏覽器默認值，默認值為：
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
（5）、字體(fonts)
字體的屬性如下：
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
可以縮寫為壹句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
提示：如果妳縮寫字體定義，至少要定義font-size和font-family兩個值。
（6）、列表(lists)
取消默認的圓點和序號可以這樣寫list-style:none;
list的屬性如下:
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
可以縮寫為壹句：list-style:square inside url(image.gif);
7、多重CSS樣式定義，屬性追加重復最後優先原則
壹個標簽可以同時定義多個class，也可以是同壹個class中重復定義屬性，例如：
我們先定義兩個樣式：
.one{width:200px;background:url(/1.jpg) no-repeat left top;}
.two{border:10px solid #000; background:url(/2.jpg) no-repeat left top;}
在頁面代碼中，我們可以這樣調用:
<div class="one" two></div>
這樣最終的顯示效果是這個div樣式是什麽呢？重復的是以哪壹個為準呢？
<div class="one" two></div>應用到的樣式如下：
width:200px;
border:10px solid #000;
background:url(/2.jpg) no-repeat left top;
因為，當應用兩個或多個樣式時，瀏覽器所應用的樣式根據是屬性追加重復最後優先原則。
就是說兩個或多個或重復的樣式名定義，瀏覽器所應用的樣式是按先後順序的，如果定義了重復的屬性值，以最後定義的為準，如果應用了兩個或多個樣式名，裏面不重復定義的屬性值就追加上去，重復的屬性值就以最後壹個為準。
這裏要註意的是，樣式的先後不是根據頁面上應用的名字順序，而是樣式表裏的樣式順序。
8、導入(Import)和隱藏CSS
因為老版本瀏覽器不支持CSS，壹個通常的做法是使用@import技巧來把CSS隱藏起來，例如：
@import url(main.css);
然而，這個方法對IE4不起作用，這讓我很是頭疼了壹陣子，後來我用這樣的寫法：
@import main.css;
這樣就可以在IE中也隱藏CSS了，呵呵，還節省了5個字節呢！
9、CSS hack
有些時候，妳需要對IE瀏覽器的bug定義壹些特別的規則，這裏有太多的CSS技巧(hacks)，我只使用其中的兩種方法，不管微軟在即將發布的IE版裏是否更好的支持CSS，這兩種方法都是最安全的。
（1）、註釋的方法
a、在IE中隱藏壹個CSS定義，妳可以使用子選擇器(child selector):
html>body p {
}
b、下面這個寫法只有IE瀏覽器可以理解(對其他瀏覽器都隱藏)
* html p {
}
c、還有些時候，妳希望IE/Win有效而IE/Mac隱藏，妳可以使用反斜線技巧：
* html p {
declarations
}
d、下面這個寫法只有IE7瀏覽器可以理解(對其他瀏覽器都隱藏)
*+ html p {
}
（2）、條件註釋(conditional comments)的方法
另外壹種方法，我認為比CSS Hacks更加經得起考驗就是采用微軟的私有屬性條件註釋，用這個方法妳可以給IE單獨定義壹些樣式，而不影響主樣式表的定義，就像這樣：
<!--[if IE]>
<link rel=stylesheet/css href="/style/ie.css" />
<![endif]-->
還有更多的CSS hack大家可以通過網上找找，但是有很多hack都是不符合w3c標準的，根據以上的hack寫了壹個能區分IE6、IE7、FF的樣式，而且可以符合w3c標準，代碼如下：
.classname {width:90px!important;width:100px;}
*+html .classname {width:95px!important;}
這樣寫後在IE6下寬是100px，IE7下是95px，火狐下是90px。
10、明確定義單位，除非值為0
忘記定義尺寸的單位是CSS新手普遍的錯誤，在HTML中妳可以只寫width=100，但是在CSS中，妳必須給壹個準確的單位，比如：width:100px width:100em。
只有兩個例外情況可以不定義單位：行高和0值，除此以外，其他值都必須緊跟單位，註意，不要在數值和單位之間加空格。
11、區分大小寫
當在XHTML中使用CSS，CSS裏定義的元素名稱是區分大小寫的，為了避免這種錯誤，建議大家將所有的定義名稱都采用小寫。
class和id的值在HTML和XHTML中也是區分大小寫的，如果妳壹定要大小寫混合寫，請仔細確認妳在CSS的定義和XHTML裏的標簽是壹致的。
12、id和class的使用及區別
我們知道在樣式表定義壹個樣式的時候，可以定義id，也可以定義class，例如：
ID方法：#test{color:#333333}，在頁面中調用<div>內容<div>
CLASS方法：.test{color:#333333}，在頁面中調用<div class="test">內容<div>
壹般來說，id是壹個頁面只可以使用壹次，class是可以多次引用的。
可我在頁面中用了多個相同id在IE中顯示也正常，id和class好象沒什麽區別，用多個相同id有什麽影響嗎？
頁面存在多個相同的ID影響就是不能通過W3的校驗，在頁面顯示上，目前的瀏覽器還都允許妳犯這個錯誤，用多個相同ID“壹般情況下”也能正常顯示，但是當妳需要用JavaScript通過id來控制這個div，那就會出現錯誤。
id是壹個標簽，用於區分不同的結構和內容，就象妳的名字，如果壹個屋子有2個人同名，就會出現混淆。
class是壹個樣式，可以套在任何結構和內容上，就象壹件衣服。
從概念上來說：id是先找到結構/內容，再給它定義樣式；class是先定義好壹種樣式，再套給多個結構/內容。
對此，建議大家在寫XHML+CSS時如果是維壹的結構定位的就用id，否則就用class吧（這樣讓出非結構定位的div塊的id讓程序員自己定義使用）！
13、取消class和id前的元素限定
當妳寫給壹個元素定義class或者id，妳可以省略前面的元素限定，因為ID在壹個頁面裏是唯壹的，class可以在頁面中多次使用，在看來，妳限定某個元素是毫無意義的，例如：
div#id1{}可以寫成#id1{}
這樣可以節省壹些字節。
14、使用子選擇器(descendant selectors)
使用子選擇器是影響他們效率的原因之壹，子選擇器可以幫助妳節約大量的class定義，我們來看下面這段代碼：
<div>
<ul>
<li class="subnavitem"> <a href="/seo/#" class="subnavitem">SEO</a></li>>
<li class="subnavitemselected"> <a href="/seo/#" class="subnavitemselected">SEO</a> </li>
<li class="subnavitem"> <a href="/seo/#" class="subnavitem">SEO</a> </li>
</ul>
</div>
這段代碼的CSS定義是：
div#subnav ul { }
div#subnav ul li.subnavitem { }
div#subnav ul li.subnavitem a.subnavitem { }
div#subnav ul li.subnavitemselected { }
div#subnav ul li.subnavitemselected a.subnavitemselected { }
妳可以用下面的方法替代上面的代碼：
<ul id=”subnav”>
<li> <a href="/seo/#">SEO</a> </li>
<li class="sel"> <a href="/seo/#">SEO</a> </li>
<li> <a href="/seo/#">SEO</a> </li>
</ul>
樣式定義是：
#subnav { }
#subnav li { }
#subnav a { }
#subnav .sel { }
#subnav .sel a { }
用子選擇器可以使妳的代碼和CSS更加簡潔、更加容易閱讀。
如果壹個容器裏有多個同樣的元素，而且這些元素樣式都不壹樣，請避免用這個方式，建以大家可以采用不同的class如：
<ul class=”one”><li></li></ul>
<ul class=”tow”><li></li></ul>
15、不需要給背景圖片路徑加引號
為了節省字節，建議不要給背景圖片路徑加引號，因為引號不是必須的，例如：
background-image:url(images
margin:0 auto;
}
但是IE5/Win不能正確顯示這個定義，我們采用壹個非常有用的技巧來解決：用text-align屬性，就像這樣：
body {
text-align:center;
}
#wrap {
width:760px;
margin:0 auto;
text-align:left;
}
第壹個body的text-align:center;規則定義IE5/Win中body的所有元素居中(其他瀏覽器只是將文字居中) ，第二個text-align:left;是將#warp中的文字居左。
16、層占據的空間
當調試CSS發生錯誤，妳就要像排版工人，逐行分析CSS代碼，我通常在出問題的層上定義壹個背景顏色，這樣就能很明顯看到層占據多大空間？
有些人建議用border，壹般情況也是可以的，但問題是，有時候border會增加元素的尺寸，border-top和boeder-bottom破壞縱向margin的值，所以使用background更加安全些（更多的介紹，