css怎麼寫

css的程式碼是否清晰明了是非常重要的，這一部分作主要介紹。

通常一個頁面我們只引用一個css，但是對於較大的項目，我們需要把css檔案分類。

按照css的性質和用途，我們可以將css檔案分成“公共型樣式”、“特殊型樣式”、“皮膚型樣式”，並以此為順序引用。那他們分別是什麼呢？

公共型樣式是最重要的部分，對於比較小的項目，我們只引入一個css，這個css的樣式即公共型樣式，一般包括：「標籤的重置和設定預設值」（以消除不同瀏覽器之間的差異）、「統一呼叫背景圖和清除浮動或其他需統一處理的長樣式（這樣就無需對每個進行分別的處理）」、「網站通用佈局」、「通用模組和其擴展」、「元件和其擴展」、「功能類樣式」、「皮膚類樣式」。

特殊型樣式即對某個維護率較高的欄位或某個與網站整體差異較大的頁面獨立引入這樣一個特殊型樣式，方便我們維護。

皮膚樣式即產品需要換膚功能，那麼我們就需要將顏色、背景等抽離出來放在這裡，方便管理。

css檔案我們分成了公共型樣式、特殊型樣式、皮膚型樣式，那麼在css檔案的內部我們又是怎麼分類的呢？ （此部分為重點） 

重設和預設的css程式碼。這是為了消除預設樣式和瀏覽器的差異，並設定部分標籤的初始樣式，以減少後面的重複勞動。 你可以依照自己的網站需求設置，也可以使用別人寫好的一些初始化程式碼，例如：雅虎工程師提供的css初始化程式碼。這一部分程式碼放在css內部的最上面。

統一處理的css程式碼。這裡可以統一呼叫背景圖和清除浮動（指通用性較高的佈局、模組、原件內的清楚），實際上，雅虎工程師提供的css初始化程式碼中就有清除浮動的css程式碼。這一部分程式碼放在重置和預設的css程式碼下面。

佈局（grid）: 我們將頁面分割為幾個大塊，通常有頭部、主體、主欄、側邊欄、尾部等。常用！

模組（module）：即語意化的可以重複使用的較大的整體。如導航、登陸、註冊、清單、評論、搜尋等。常用！

元件（unit）：通常是一個不可再分的較為小巧的個體，被重複用於各種模組中，例如按鈕、輸入框、loading、圖表等。常用！

功能（function）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現，例如清除浮動。不常用，不可濫用！

皮膚（skin）：對於換膚型網站需要使用，將皮膚型的樣式抽離出來，非換膚型網站不可濫用，不常用。

狀態:即一些狀態類別樣式。不常用。

css命名規則

重要：使用類別選擇器，放棄ID選擇器。因為ID在一個頁面中的唯一性導致瞭如果以ID為選擇器來寫css，就無法重用，而class而優勢在於復用性，而且私有度也並不高。因此，我一般情況下會選擇在HTML中的ID用於JavaScript，但在CSS裡只用class，一個ID也不用。這樣做其實也是將表現和行為分開，而不是混在一起。

那麼後代選擇器要怎麼使用呢? 我們約定不以單一字母 「-」為前綴且長度大於等於2的類別選擇器為後代選擇器。如：.g-date .u-rightArrow{  float: right;} 這個就是不合適的，我們直接寫成 .u-rightArrow{  float: right;}即可。而一個語意化的標籤也可以是後代選擇器。如.m-list li{}。 上一句話也就是說不是語意化的標籤作為後代選擇器是不合適的，如：.m-list div{},這樣的寫法很有可能造成污染。

css程式碼格式

1.選擇器、屬性和值都是用小寫。

這一點非常關鍵：根據xhtml規範，所有的標籤屬性和值都要使用小寫形式，而我們知道xhtml更為標準，所以最好遵循之，這樣，選擇器必須小寫就是十分必要的了。既然這樣我們就不能用駝峰式寫法來寫類別名了，如class="u-leftArrow"其實就是不規範的了，最好寫成class="u-left_arrow"，也可以表達相同的意思。

2.單行寫完一個選擇器定義。

優點：方便選擇器的尋找與閱讀，也方便插入新的選擇器和編輯，方便模組等的辨識。更重要的是可以去除多餘空格，使程式碼緊湊減少換行。試想，如果每一行只有一個屬性名和屬性值，那麼對於一個大項目而言，就很難做到選擇器的尋找和閱讀了，而使用一行寫完一個選擇器，那麼就有可能縮短為1/ 6到1/10，這還是非常客觀的。

3.最後一個值也要以一分號結尾。

實際上，在大括號結束前的值可以省略分號，但是這樣做會對修改、新增和維護工作帶來不必要的失誤和麻煩。例如，在最後加上一個屬性，如果之前沒有在末尾添加分號，那麼你就要在新添加的屬性前添加分號，否則就會出錯，比如在我的一篇博文為解決中文字體顯示為方框新增JSON資料時就出現過此類問題。

以上是css怎麼寫的詳細內容。更多資訊請關注PHP中文網其他相關文章！