堅持使用統的CSS命名規則並養成習慣，可以讓你更容易維護、修改以前編寫過的CSS代碼，進而提高自己的工作效率，而且還能加強搜索引擎的SEO優化，方便記憶，那麽，我們如何才能將CSS的命名做得井井有條呢？

　　1、CSS文件及樣式命名

　　首先，先為大家展示些CSS文件及樣式的命名樣例，因為這些名稱能使大家立馬明白定義的文件，具體如下所示：

　　CSS文件命名規範

　　全局樣式：global.css

　　框架布局：layout.css

　　字體樣式：font.css

　　鏈接樣式：link.css

　　打印樣式：print.css

　　主要的：master.css

　　專欄：columns.css

　　主題：themes.css

　　對於CSS樣式的命名規則，建議用字母、_號工、-號、數字組成，必須以字母開頭，不能為純數字，為了開發後樣式名管理方便，大家請用有意義的單詞或縮寫組合來命名，讓同事看明白這樣式大概是哪塊的，這樣節省了查找樣式的時間。

　　例如：頭部樣式用header，頭部左邊，可以用header_left或header_l，還有如果是列結構的可以這樣——box_1of3 （三列中的第列），box_2of3 （三列中的列）、box_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、不要重複定義可繼承的值

　　CSS中，子元素自動繼承父元素的屬性值，象顏色、字體等，已經在父元素中定義過的，在子元素中可以直接繼承，不需要重複定義。

　　除非是為了更變當前元素樣式不使用父元素的屬性值，但是要注意，瀏覽器可能用些默認值覆蓋你的定義。

　　4、CSS代碼書寫樣式

　　在寫CSS代碼的時候，對於縮進、斷行、空格，每個人有每個人的書寫習慣，在經過不斷實踐後，我決定采用下麵這樣的書寫樣式：

　　.classname {

　　width:100px;

　　}

　　當使用聯合定義時，我通常將每個選擇器單獨寫行，這樣方便在CSS文件中找到它們，在後個選擇器和大括號之間加個空格，每個定義也單獨寫行，分號直接在屬性值後，不要加空格。

　　我習慣在每個屬性值後麵都加分號，雖然規則上允許後個屬性值後麵可以不寫分號，但是如果你要加新樣式時容易忘記補上分號而產生錯誤，所以還是都加比較好，後，關閉的大括號單獨寫行，這樣的空格和換行有助與閱讀

　　5、導入（Import）和隱藏CSS

　　因為老版本瀏覽器不支持CSS，個通常的做法是使用@import技巧來把CSS隱藏起來，例如：

　　@import url（main.css）；

　　然而，這個方法對IE4不起作用，這讓我很是頭疼了陣子，後來我用這樣的寫法：

　　@import main.css;

　　這樣可以在IE中也隱藏CSS了，嗬嗬，還節省了5個字節呢！

　　6、層占據的空間

　　當調試CSS發生錯誤，你要像排版工人，逐行分析CSS代碼，我通常在出問題的層上定義個背景顏色，這樣能很明顯看到層占據多大空間？

　　有些人建議用border，般情況也是可以的，但問題是，有時候border會增加元素的尺寸，border-top和boeder-bottom破壞縱向margin的值，所以使用background更加安全些。