css如何寫

小編給大家分享一下css如何寫，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

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

通常一個頁面我們只引用一個css，但是對于較大的項目，我們需要把css文件進行分類。

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

公共型樣式是最為重要的部分，對于比較小的項目，我們只引入一個css，這個css的樣式即公共型樣式，一般包括：“標簽的重置和設置默認值”（以消除不同瀏覽器之間的差異）、“統(tǒng)一調用背景圖和清除浮動或其他需統(tǒng)一處理的長樣式（這樣就無需對每個進行分別的處理）”、“網(wǎng)站通用布局”、“通用模塊和其擴展”、“元件和其擴展”、“功能類樣式”、“皮膚類樣式”。

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

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

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

重置和默認的css代碼。這是為了消除默認樣式和瀏覽器的差異，并設置部分標簽的初始樣式，以減少后面的重復勞動。 你可以根據(jù)自己的網(wǎng)站需求設置，也可以使用別人寫好的一些初始化代碼，比如：雅虎工程師提供的css初始化代碼。這一部分代碼放在css內部的最上面。

統(tǒng)一處理的css代碼。 這里可以統(tǒng)一調用背景圖和清除浮動（指通用性較高的布局、模塊、原件內的清楚），實際上，雅虎工程師提供的css初始化代碼中就有清除浮動的css代碼。這一部分代碼放在重置和默認的css代碼下面。

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

模塊（module）：即語義化的可以重復使用的較大的整體。如導航、登陸、注冊、列表、評論、搜索等。常用！

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

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

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

狀態(tài):即一些狀態(tài)類樣式。不常用。

css命名規(guī)則

重要：使用類選擇器，放棄ID選擇器。因為ID在一個頁面中的唯一性導致了如果以ID為選擇器來寫css，就無法重用，而class而優(yōu)勢在于復用性，而且私有度也并不高。因此，我一般情況下會選擇在HTML中的ID用于JavaScript，但是在CSS里只用class，一個ID也不用。這樣做實際上也是將表現(xiàn)和行為分開，而不是混在一起。

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

css代碼格式

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

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

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

優(yōu)點：便于選擇器的尋找和閱讀，也便于插入新的選擇器和編輯，便于模塊等的識別。更重要的是可以去除多余空格，使代碼緊湊減少換行。試想，如果每一行只有一個屬性名和屬性值，那么對于一個大項目而言，就很難做到選擇器的尋找和閱讀了，而使用一行寫完一個選擇器，那么就有可能縮短為1/6到1/10，這還是非?？陀^的。

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

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

看完了這篇文章，相信你對css如何寫有了一定的了解，想了解更多相關知識，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！