如何寫出優雅的css代碼 ？
如何寫出優雅的css代碼 ？
對於一樣的項目或者是一個網頁，儘管最終每一個前端開發工程師均可以實現相同的效果，可是他們所寫的代碼必定是不一樣的。有的優雅，看起來清晰易懂，代碼具備可拓展性，這樣的代碼有利於團隊合做和後期的維護；而有的混亂，雖然表達出了最終的效果，然而卻晦澀難懂，顯然團隊成員在讀這樣的代碼時就顯得無從下手，更不利於後期的維護了。那麼如何寫出優雅的代碼呢？下面我將以一個很小的項目就如下幾個方面簡單的表達一下本身的見解，若有不妥，望批評指正。css
第一部分：如何整理一個項目。
當咱們接手一個表白牆的小項目時，怎麼去分類整理呢？是把全部的html文件、css文件、js文件和圖片等等混亂的放在一塊兒？好吧，那就看看這樣是什麼效果吧？html
可能你會以爲這沒有什麼啊？文件均可以找到啊，可是你試圖在sublime編輯器中打開看看是什麼效果：前端
（補充說明：博友@Tabweng 建議文件名不要使用中文而儘可能使用英文，在此表示感謝，但願你們也能夠注意這個問題。）web
有沒有以爲很混亂呢?！此外，若是項目更大了呢？你須要的html文件、css文件、js文件、以及圖片的需求量更大了呢？你還能保證能夠順利的找出每個你想要的文件並編輯嗎？顯然顯然是否認的。因此對於這種項目，個人建議是能夠對不一樣文件類型進行分類，將同一類型的文件放在一個文件夾下，再將全部文件都放到一個文件夾下，以下圖所示：瀏覽器
這樣，在sublime text編輯器裏打開上述文件也會變得更加清晰明瞭，以下所示：前端工程師
這樣，咱們就能夠很輕鬆的查找、編輯、維護咱們的代碼了！固然，對於不一樣的項目，如何架構和整理是不一樣的，咱們應該具體問題具體分析，這裏只是說明了通常的小項目能夠遵循的作法。架構
第二部分：如何寫出清晰易懂的HTML代碼
HTML規範，我在博文《HMTL代碼規範》中作了詳盡的介紹，你們有興趣能夠去看看。這裏咱們簡單回顧一下規範並以個人見解說明寫HTML代碼的一個總體思路。編輯器
1.寫HTML時，最基礎的總體結構是不可缺乏的，包括<!DOCTYPE html> <html> <meta> <title> <head><body>等等。實際上這個結構在sublime編輯器中咱們只要先打出！，再按一下tab鍵便可完成。ide
2.HMTL的代碼結構和視覺順序基本保持一致，即按照從上到下從左到右的視覺順序寫HMTL結構。個人建議是：能夠先根據視覺稿，從大局着眼，將主要的幾個部分寫出來，如header部分，main部分，side部分，footer部分，即把整個結構先搭出來，而後再逐一地向內部填寫內容，而不是先把header部分寫完而後再寫main部分，把main部分所有寫完在寫side部分．．．由於前者的思路會更加清晰。模塊化
３．結構層（structural layer）、表現層（behavior layer）、行爲層（presentation layer）三者分開，避免內聯，即便用script將js文件引入（注意：瀏覽器渲染頁面是自上而下進行的，js文件有時多在</body>前引入，有時也會在head中引入，這一部分能夠看個人博文《探究移動端開發》），使用link將css文件引入。
4.保持良好的樹形結構，即每個塊級元素都另起一行，使用tab縮進（相對於父元素）。若是不是塊級元素，如<a><img><span>等，把他們寫在一行便可。
5. 能夠在不一樣的部分（如header、main、footer）之間使用空行分開，而在一個模塊內不要使用多餘的空行，實際上這也遵循了設計中的親密性原則。（推薦前端工程師能夠看看《寫給你們看的設計書》，很是不錯）
6.在html代碼裏你以爲可能不是很好理解的地方予以註釋如：<!-- 一些註釋 -->。
第三部分：如何寫出優雅的css代碼。
css的代碼是否清晰明瞭是很是重要的，這一部分做主要介紹。
一：css分類方法
一般一個頁面咱們只引用一個css，可是對於較大的項目，咱們須要把css文件進行分類。
按照css的性質和用途，咱們能夠將css文件分紅「公共型樣式」、「特殊型樣式」、「皮膚型樣式」，並以此爲順序引用。那麼他們分別是什麼呢？
- 公共型樣式是最爲重要的部分，對於比較小的項目，咱們只引入一個css，這個css的樣式即公共型樣式，通常包括：「標籤的重置和設置默認值」（以消除不一樣瀏覽器之間的差別）、「統一調用背景圖和清除浮動或其餘需統一處理的長樣式（這樣就無需對每一個進行分別的處理）」、「網站通用佈局」、「通用模塊和其擴展」、「元件和其擴展」、「功能類樣式」、「皮膚類樣式」。後面會具體介紹。
- 特殊型樣式即對某個維護率較高的欄目或者某個與網站總體差別較大的頁面獨立引入這樣一個特殊型樣式，方便咱們維護。
- 皮膚型樣式即產品須要換膚功能，那麼咱們就須要將顏色、背景等抽離出來放在這裏，方便管理。
css文件咱們分爲了公共型樣式、特殊型樣式、皮膚型樣式，那麼在css文件的內部咱們又是怎麼分類的呢？（此部分爲重點）
- 重置和默認的css代碼。這是爲了消除默認樣式和瀏覽器的差別，並設置部分標籤的初始樣式，以減小後面的重複勞動。 你能夠根據本身的網站需求設置，也可使用別人寫好的一些初始化代碼，好比：雅虎工程師提供的css初始化代碼。這一部分代碼放在css內部的最上面。
- 統一處理的css代碼。 這裏能夠統一調用背景圖和清除浮動（指通用性較高的佈局、模塊、原件內的清楚），實際上，雅虎工程師提供的css初始化代碼中就有清除浮動的css代碼。這一部分代碼放在重置和默認的css代碼下面。
- 佈局（grid）: 咱們將頁面分割爲幾個大塊，一般有頭部、主體、主欄、側欄、尾部等。經常使用！
- 模塊（module）：即語義化的能夠重複使用的較大的總體。如導航、登錄、註冊、列表、評論、搜索等。經常使用！
- 元件（unit）：一般是一個不可再分的較爲小巧的個體，被重複用於各類模塊中，好比按鈕、輸入框、loading、圖表等。經常使用！
- 功能（function）：爲方便一些經常使用樣式的使用，咱們將這些使用率較高的樣式剝離出來，按需使用，一般這些選擇器具備固定樣式表現，好比清除浮動。不經常使用，不可濫用！
- 皮膚（skin）：對於換膚型網站須要使用，將皮膚型的樣式抽離出來，非換膚型網站不可濫用，不經常使用。
- 狀態:即一些狀態類樣式。不經常使用。
對於後面幾種內部分類，你們先有個印象便可，後面我會介紹其使用方法。
2、css命名規則
重要：使用類選擇器，放棄ID選擇器。由於ID在一個頁面中的惟一性致使了若是以ID爲選擇器來寫css，就沒法重用，而class而優點在於複用性，並且私有度也並不高。所以，我通常狀況下會選擇在HTML中的ID用於JavaScript，可是在CSS裏只用class，一個ID也不用。這樣作實際上也是將表現和行爲分開，而不是混在一塊兒。
在html文件中寫class的方法：使用單個字母+「-」爲前綴。好比：對於header部分，咱們能夠這樣寫:
<div class="g-header"></div>
那麼「單個字母」是什麼呢? 實際上就是剛剛介紹的css內部分類方法中的佈局（grid）的第一個字母，好處是咱們在css代碼中能夠經過首字母清楚地知道其做用是什麼，即見名知意。由此可知，對於模塊化（module）的部分咱們能夠這樣寫：<div class="m-log"></div>。此div即爲登錄框這個模塊。 對於元件部分，即不可再分的個體，咱們能夠這樣寫<img class="u-img" src="../images/iam.png" alt="pic">。對於功能（function）部分，咱們就能夠這麼寫：<div class="f-clearFloat"></div>。對於皮膚（skin）部分，咱們能夠這麼寫：<div class="s-changeSkin">。 其中 g、m、u這三個首字母是咱們用的最多的首字母，其餘的首字母應該根據狀況來使用。注意1：在css中，樣式的選擇器老是要以上面的 .g- .m- .u- .f- .s-這五類開頭，而後再裏面使用後代選擇器。 注意2：這並非說全部的className都須要加這些前綴，對於一些不屬於這幾種的元素，咱們徹底能夠不加前綴，做爲後代選擇器使用。
那麼後代選擇器要怎麼使用呢? 咱們約定不以單個字母+「-」爲前綴且長度大於等於2的類選擇器爲後代選擇器。如：.g-date .u-rightArrow{ float: right;} 這個就是不合適的，咱們直接寫成 .u-rightArrow{ float: right;}便可。 且一個語義化的標籤也能夠是後代選擇器。好比.m-list li{}。 上一句話也就是說不是語義化的標籤做爲後代選擇器是不合適的，如：.m-list div{},這樣的寫法頗有可能形成污染。
除此以外，咱們應當注意：在命名時應當儘可能簡約而不失語義。以下所示：
對於相同語義的不一樣類命名，咱們能夠直接加數字或字母區分便可（如.m-list一、.m-list2,都是列表模塊，都通加數字即表示不一樣的列表模塊）。
三：css代碼格式
1.選擇器、屬性和值都是用小寫。
這一點很是關鍵：根據xhtml規範，全部的標籤屬性和值都要使用小寫形式，而咱們知道xhtml更爲標準，因此最好遵循之，這樣，選擇器必須小寫就是十分必要的了。既然這樣咱們就不能使用駝峯式寫法來寫類名了，如class="u-leftArrow"實際上就是不規範的了，最好寫成class="u-left_arrow"，也能夠表達相同的意思。
2.單行寫完一個選擇器定義。
優勢：便於選擇器的尋找和閱讀，也便於插入新的選擇器和編輯，便於模塊等的識別。更重要的是能夠去除多餘空格，使代碼緊湊減小換行。試想，若是每一行只有一個屬性名和屬性值，那麼對於一個大項目而言，就很難作到選擇器的尋找和閱讀了，而使用一行寫完一個選擇器，那麼就有可能縮短爲1/6到1/10，這仍是很是客觀的。
3.最後一個值也要一分號結尾。
實際上，在大括號結束前的值能夠省略分號，可是這樣作會對修改、添加和維護工做帶來沒必要要的失誤和麻煩。好比，在最後添加一個屬性，若是以前沒有在末尾添加分號，那麼你就要在新添加的屬性前添加分號，不然就會出錯，好比在個人一篇博文爲解決中文字體顯示爲方框添加JSON數據時就出現過此類問題。
4.省略值爲0的單位
優勢：能夠節省沒必要要的字節同時也爲了方便閱讀，咱們將0px、0em、0%等都縮寫爲0.以下所示：
.m-box{margin:0 10px; backgrond-position:50% 0;}
5.使用16進製表示顏色值，其中的字母使用大寫形式，並儘可能縮寫。
除非在你須要透明度而使用rgba，不然都是用#FFFFFF這樣的寫法，並儘可能縮寫，如#FFF。使用大寫形式，是由於這樣更加具備易讀性，且有利於壓縮，而縮寫爲了減小沒必要要的字節。
(補充說明：博友@batsing 指出在PC端使用16進製表示顏色，IE8及如下不兼容，在此表示感謝，但願你們也能夠注意這個問題。)
6.根據屬性的重要性順序書寫。
在上面的第二點咱們說到應當在單行寫完一個選擇器。若是咱們不遵循必定的書寫順序，那麼寫出來的代碼必定是混亂的，那麼怎麼才能寫出優雅的css代碼呢？這時就須要根據屬性的重要性順序書寫。以下圖所示：
注意：只遵循橫向順序便可，即先書寫定位佈局類屬性，在書寫盒模型等自身屬性，最後書寫文本類及修飾類屬性。 另外，若是屬性間存在關聯性，則不要隔開寫，以下所示。
.m-box{position:relative;height:20px;line-height:20px; padding:5px;color:#000;}
其中的height和line-height具備關聯性，咱們儘可能不要分開寫。
7.私有在前，標準在後。
先寫帶有瀏覽器私有標誌的屬性，後寫W3C標準的屬性。由於私有的屬性，說明瀏覽器自身尚未規範化，標準屬性是用不了的。若某一天該瀏覽器的屬性規範化了，那麼說明標準屬性可使用了，而若是咱們先寫W3C標準屬性，最後寫私有屬性，就有可能致使私有屬性覆蓋標準屬性。所以私有在前，標準在後的寫法是考慮到了之後可能會出現的問題。
如：
.m-box{-webkit-box-shadow:0 0 0 #000;-moz-box-shadow:0 0 0 #000;box-shadow:0 0 0 #000;}
8.選擇器等級
!important>行內樣式style>id選擇器>類、僞類和屬性選擇器>標籤選擇器和僞元素選擇器
9.css內部的順序
我認爲，對於一個網頁而言，咱們在寫css時，能夠分爲幾個部分來寫，好比header部分的css代碼，main部分的css代碼，部分之間經過空格隔開並給以響應的註釋，這樣更有利於咱們的閱讀和後期的維護，以下所示。
10.優化方案：對於能夠縮寫的值咱們儘可能採用縮寫形式，這樣有利於減少css文件大小，並增長可讀性和可維護性。且最好儘可能減小沒有實際做用的冗餘的屬性。有時咱們會將定義相同的或者有大部分屬性值相同的一系列的選擇器組合到一塊兒（採用逗號的方法）來統必定義，這樣能夠爲你節省不少字節和寶貴時間。
四.類選擇器的命名建議
在前面說到，命名className時，應當以其做用、功能來命名，而不要使用沒有語義化或者以顏色、左右空間位置的文字來命名。
1. 對於佈局，即用.g-做爲前綴，一般有如下推薦的寫法。
頭部： header或head
主體： body
尾部：footer或foot
主欄： main
側欄：side
盒容器： wrap或box
主欄子容器：mainc
側欄子容器：sidec
2.對於模塊，即.m-做爲前綴。元件，.u-做爲前綴，一般有下面推薦的寫法。
導航： nav
子導航：subnav
菜單：menu
選項卡：tab
標題區：head或title
內容區：body或content
列表：list
表格：table
表單：form
排行：top
熱點：hot
登陸：login
標誌：logo
廣告：adervertise
搜索：search
幻燈：slide
幫助：help
新聞：news
下載：download
註冊：register或regist
投票：vote
版權:copyright
結果：result
按鈕：button
輸入：input
3.對於功能，即以.f-爲前綴，一般推薦以下：
清除浮動：clearboth
向左浮動：floatleft
向右浮動: floatright
溢出隱藏：overflowhidden
4.對於顏色，即以.s-爲前綴，一般推薦以下：
字體顏色：fontcolor
背景：background
背景顏色：backgroundcolor
背景圖片：backgroundimage
背景定位：backgroundposition
邊框顏色：bordercolor
5.對於狀態，即以.z-爲前綴，一般推薦以下：
選中:selected
當前：current
顯示：show
隱藏：hide
打開：open
關閉:close
出錯：error
不可用:disabled
5、使用css選擇器常出現的錯誤。
- .class{} 不可用一個沒有類別的樣式做爲主選擇器，它只能做爲後代選擇器
- .m-xxx div{} 不可用沒有語義的便籤做爲選擇器,會形成大面積污染
- .g-zzz .m-xxx{} 通常類別的選擇器的後代選擇中不該當包括類別選擇器
- .m-xxx .main .mainc .nav li{} 不要將選擇器寫的過於冗長，由於選擇器的結構越複雜，瀏覽器的消耗就越大，建議在3個長度以內寫完。
補充內容：
http://www.cnblogs.com/hustskyking/p/css-spec.html
努力的人，運氣通常不會太差~
- 1. 如何寫出優雅的css代碼 ？
- 2. 如何寫出優雅的 Golang 代碼
- 3. 如何寫出優雅的Javascript代碼
- 4. JDK8如何寫出優雅代碼
- 5. 如何寫出優雅的CSS代碼 ？(轉)
- 6. 【知識點】如何寫出優雅的CSS代碼 ？
- 7. 寫出優雅的代碼
- 8. 代碼質量管理——如何寫出優雅的代碼
- 9. 如何優雅的寫代碼
- 10. 如何優雅的編寫JavaScript代碼
- 更多相關文章...
- • XSD 如何使用? - XML Schema 教程
- • Markdown 代碼 - Markdown 教程
- • IntelliJ IDEA代碼格式化設置
- • IntelliJ IDEA安裝代碼格式化插件
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 如何寫出優雅的css代碼 ？
- 2. 如何寫出優雅的 Golang 代碼
- 3. 如何寫出優雅的Javascript代碼
- 4. JDK8如何寫出優雅代碼
- 5. 如何寫出優雅的CSS代碼 ？(轉)
- 6. 【知識點】如何寫出優雅的CSS代碼 ？
- 7. 寫出優雅的代碼
- 8. 代碼質量管理——如何寫出優雅的代碼
- 9. 如何優雅的寫代碼
- 10. 如何優雅的編寫JavaScript代碼