css代碼重構

 css代碼重構

http://www.cnblogs.com/aspnetjia/tag/

125.CSS代碼重構的目的

咱們寫CSS代碼時，不只僅只是完成頁面設計的效果，還應該讓CSS代碼易於管理，維護。咱們對CSS代碼重構主要有兩個目的：
一、提升代碼性能
二、提升代碼的可維護性

提升代碼性能

提升CSS代碼性能主要有兩個點：
一、提升頁面的加載性能
提升頁面的加載性能，簡單說就是減少CSS文件的大小，提升頁面的加載速度，盡能夠的利用http緩存
二、提升CSS代碼性能
不一樣的CSS代碼，瀏覽器對其解析的速度也是不同的，如何提升瀏覽器解析CSS代碼的速度也是咱們要考慮的

提升代碼的可維護性

提升CSS代碼的可維護性主要是體如今下面幾點：
一、可重用性
通常來講，一個項目的總體設計風格是一致的，頁面中確定有幾個風格一致但有些許不一樣的模塊，如何在儘量多地重用CSS代碼，儘量少地增長新代碼，這是CSS代碼中很是重要的一點。若是CSS代碼的重用性高，咱們可能只須要寫一些不同的地方，對頁面性能和可維護性、提升開發效率都有很大的幫助。

二、可擴展性
若是產品增長了某個功能，咱們應該保證新增長的CSS代碼不會影響到舊的CSS代碼和頁面，而且儘量少地增長新代碼而重用舊代碼。

三、可修改性
若是某個模塊產品經理以爲要修改樣式，或者要刪掉它，若是沒有規劃好相應的CSS代碼，過了一段時間以後，開發人員可能已經不記得這段代碼做用了幾個地方，不敢修改或刪除它，這樣下去CSS代碼也就愈來愈多，影響了頁面的性能，還形成了代碼的複雜度。

126.     CSS代碼重構的基本方法

前面說到了CSS代碼重構的目的，如今咱們來講說一些如何達到這些目的的一些基本方法，這些方法都是易於理解，容易實施的一些手段，你們平時可能也不知不覺地在使用它。

提升CSS性能的手段

首先說說如何提升CSS性能，根據頁面的加載性能和CSS代碼性能，主要總結有下面幾點：
一、儘可能將樣式寫在單獨的css文件裏面，在head元素中引用
有時候爲了圖方便或者快速搞定功能，咱們可能會直接將樣式寫在頁面的style標籤或者直接內聯在元素上，這樣雖然簡單方便，可是很是不利於往後的維護。將代碼寫成單獨的css文件有幾點好處：
（1）內容和樣式分離，易於管理和維護
（2）減小頁面體積
（3）css文件能夠被緩存、重用，維護成本下降

二、不使用@import
這條手段已是衆所周知，這裏簡單提一下，@import影響css文件的加載速度

三、避免使用複雜的選擇器，層級越少越好
有時候項目的模塊愈來愈多，功能愈來愈複雜，咱們寫的CSS選擇器會內套多層，愈來愈複雜。
建議選擇器的嵌套最好不要超過三層，好比：

1	.header .logo .text{}

 

能夠優化成

1	.haeder .logo-text{}

 

簡潔的選擇器不只能夠減小css文件大小，提升頁面的加載性能，瀏覽器解析時也會更加高效，也會提升開發人員的開發效率，下降了維護成本。

四、精簡頁面的樣式文件，去掉不用的樣式
不少時候，咱們會把全部的樣式文件合併成一個文件，可是這樣有一個問題：不少其餘頁面的CSS同時引用到當前頁面中，而當前頁面並無用到它們，這種狀況會形成兩個問題：
（1）樣式文件偏大，影響加載速度
（2）瀏覽器會進行多餘的樣式匹配，影響渲染時間。
正確的處理方法是根據當前頁面須要的css去合併那些當前頁面用到的CSS文件。
PS：合併成一個文件有一個優勢：樣式文件會被瀏覽器緩存，進入到其餘頁面樣式文件不用再去下載。這條規則應根據場景來區別對待，若是是大項目，應該合併成不一樣的樣式文件，若是是簡單的項目，建議合併成一個文件便可。若是沒法確認項目規模，建議分開成不一樣的樣式文件，往後要合併也比較方便。

五、利用CSS繼承減小代碼量
咱們知道有一部分CSS代碼是能夠繼承的，若是父元素已經設置了該樣式，子元素就不須要去設置該樣式，這個也是提升性能的行之有效的方法。
常見的能夠繼承的屬性好比：
color，font-size，font-family等等
不可繼承的好比：
position，display，float等

你們能夠查看CSS參考手冊

提升可維護性的方法

提升CSS代碼的可維護性，簡單的說就是要讓開發人員易於理解CSS代碼，容易去修改它，不會破壞原有的功能。下面說說一些經常使用的手段。
一、命名與備註
命名是提升代碼可讀性的第一步，也是及其重要的一步。不少人都有這樣的體會：命名是寫代碼中最讓程序員頭疼的事情之一，尤爲是對母語非英語的開發人員來講，要找一個合適貼切的名字並不容易。提升本身命名的能力，能夠多看看別人的代碼。下面是CSS中的一些命名相關的建議：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

頭：header 內容：content/container 尾：footer 導航：nav 側欄：sidebar 欄目：column 頁面外圍控制總體佈局寬度：wrapper 左右中：left right center 登陸條：loginbar 標誌：logo 廣告：banner 頁面主體：main 熱點：hot 新聞：news 下載：download 子導航：subnav 菜單：menu 子菜單：submenu 搜索：search 友情連接：friendlink 頁腳：footer 版權：copyright 滾動：scroll 內容：content 標籤：tags 文章列表：list 提示信息：msg 小技巧：tips 欄目標題：title 加入：joinus 指南：guide 服務：service 註冊：regsiter 狀態：status 投票：vote 合做夥伴：partner 導航：nav 主導航：mainnav 子導航：subnav 頂導航：topnav 邊導航：sidebar 左導航：leftsidebar 右導航：rightsidebar 菜單：menu 子菜單：submenu 標題: title 摘要: summary

 

二、提取重複樣式
這一個方法很容易理解，簡單說就是提取相同的樣式成爲一個單獨的類再引用，這樣不只能夠精簡CSS文件大小，並且CSS代碼變少，更易於重用和維護。例以下面的例子：
原來的代碼是這樣：

1 2 3 4 5 6

.about-title{     margin: 0 auto 6rem; color: #333; text-align: center; letter-spacing: 4px; font-size: 2rem; } .achieve-title{     margin: 0 auto 6rem; color: #fff; text-align: center; letter-spacing: 4px; font-size: 2rem; }

 

這兩個樣式的區別在於文字顏色的不一樣，咱們能夠將其公共的樣式提取出來，而後再分別設置其不一樣的樣式

1 2 3 4 5 6 7 8 9

.column-title{     margin: 0 auto 6rem; text-align: center; letter-spacing: 4px; font-size: 2rem; } .about{     color: #333; } .achieve{     color:#fff; }

 

提取公用的部分，而後在頁面上分別引用column-title和about等，這樣代碼更簡潔，維護起來也更方便了。這個例子很是簡單，實際上項目中可能有更復雜的狀況，總之就要要儘量的DRY，儘量的提取重複的東西。

三、書寫順序
這個書寫順序指的是各個樣式的書寫順序，下面是推薦的CSS書寫順序
（1）位置屬性(position, top, right, z-index, display, float等)
（2）大小(width, height, padding, margin)
（3）文字系列(font, line-height, letter-spacing, color- text-align等)
（4）背景(background, border等)
（5）其餘(animation, transition等)
書寫順序不必定非得按照上面的推薦來進行，而是根據你本身的習慣，可是最好能保證先後的習慣一致的，或者團隊應該有一個共同的代碼規範去遵照，這樣後期維護起來也會方便許多。

以上是我我的總結的一些簡單的寫好和重構CSS代碼的方法，你們固然沒必要拘泥於此，有不一樣的意見和建議歡迎進行交流！

127.     CSS方法論

什麼是CSS方法論呢？簡單地說就是一些同行爲了提升CSS的可維護性、提出的一些編寫CSS代碼的規範和方法。他們提出了一些概念，這些概念可能聽起來很高大上，可是實際你平時可能不知不覺也會用到這些所謂的CSS方法論。下面我簡單地介紹下幾個比較常見的CSS方法論。

128.OOCSS

OOCSS是（Object Oriented CSS），顧名思義就是面向對象的CSS。
OOCSS主要有兩個原則：
一、結構和樣式分離
咱們平時必定遇到過這種狀況，好比一個頁面存在着多個不一樣功能的按鈕，這些按鈕的形狀大小都差很少，可是根據不一樣的功能會有不一樣的顏色或背景來加以區分。若是不進行結構和樣式分離，咱們的CSS代碼多是這樣的

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.btn-primary{     width:100px;     height:50px;     padding:5px 3px;     background:#ccc;     color:#000; } .btn-delete{     width:100px;     height:50px;     padding:5px 3px;     background:red;     color:#fff; }

 

這兩個或者可能更多的按鈕擁有一些不一樣的樣式，可是它們同時擁有相同的大小樣式等，咱們將其抽象的部分提取出來，結果以下：

1 2 3 4 5 6 7 8 9 10 11 12 13

.btn{     width:100px;     height:50px;     padding:5px 3px; } .primary{     background:red;     color:#fff; } .delete{     background:red;     color:#fff; }

 

這樣提取公用的樣式出來，而後按鈕同時引用btn和primary等。這種作法除了減小重複的代碼精簡CSS以外，還有一個好處是複用性，若是須要增長其餘額外的按鈕，只須要編寫不一樣的樣式，和btn配合使用便可。

（2）容器和內容分離
咱們平時寫代碼必定寫過這樣代碼

1 2 3 4

.content h3{     font-size:20px;     color:#333; }

 

這樣的代碼就是內容依賴於容器，沒有分離的代碼，也就是說h3的樣式依賴於.content容器，若是其餘地方要用到相同的樣式，可是它的容器卻不是.content，那你可能就是要再寫一遍.something h3。
因此OOCSS推薦分離容器和內容，能夠修改爲：

1 2 3 4

.title{     font-size:20px;     color:#333; }

 

關於這一點，我我的建議要分狀況來看，像前面這個例子，它適合樣式和容器分離。可是好比下面這種狀況：

1 2 3

.menu li{     font-size:12px; }

 

這種ul，li列表的樣式，我覺的就按照咱們原先的作法就能夠，不必定非得給一個類給li來設定樣式，即

1 2 3

.menu-item{     font-size:12px; }

 

這樣頁面的li標籤須要引用menu-item類。
固然採用哪種方式更好我也不卻肯定，我本身比較喜歡.menu li的寫法，你們自行思考。
這就是OOCSS的兩個基本原則，這裏只是簡單介紹OOCSS，各位若是有興趣的話請自行Google查找相關資料。

129.SMACSS

SMACSS是什麼呢，它的全稱是Scalable and Modular Architecture for CSS。簡單說就是可擴展和模塊化的CSS架構。
SMACSS將樣式分紅5種類型：Base，Layout，Module，State，Theme，咱們簡單來講說每一種類型分別指什麼。
一、Base
基礎樣式表，定義了基本的樣式，咱們平時寫CSS好比reset.css就是屬於基礎樣式表，另外我認爲清除浮動，一些動畫也能夠歸類爲基礎樣式。

二、Layout
佈局樣式，用於實現網頁的基本佈局，搭起整個網頁的基本骨架。

三、Module
網頁中不一樣的區域有這個不一樣的功能，這些功能是相對獨立的，咱們能夠稱其爲模塊。模塊是獨立的，可重用的組件，它們不依賴於佈局組件，能夠安全的刪除修改而不影響其餘模塊。

四、State
狀態樣式，一般和js一塊兒配合使用，表示某個組件或功能不一樣的狀態，好比菜單選中狀態，按鈕不可用狀態等。
關於狀態樣式，我我的以爲要分狀況進行討論：
（1）不一樣組件的同一狀態的樣式是同樣的，好比頭部的導航菜單的選中狀態樣式和側欄的菜單選中狀態樣式是同樣的，我認爲這部分狀態樣式能夠歸類爲State
（2）不一樣組件的統一狀態的樣式是不同的，即兩個地方的菜單雖然都是選中狀態，可是他們卻又不一樣的選中樣式，這部分樣式不該該被認爲是State類型，而是應該放在其組件對應的Module中。

五、Theme
皮膚樣式，對於可更換皮膚的站點來講，這個是頗有必要的，分離告終構和皮膚，根據不一樣的皮膚應用不一樣的樣式文件。

130.BEM

BEM是Block，Element，Modifier的縮寫。下面分別來介紹一下這三個概念：
（1）Block：在BEM的理論中，一個網頁是由block組成的，好比頭部是個block，內容是block，logo也是block，一個block可能由幾個子block組成。
（2）Element：element是block的一部分，具備某種功能，element依賴於block，好比在logo中，img是logo的一個element，在菜單中，菜單項是菜單的一個element
（3）Modifier：modifier是用來修飾block或者element的，它表示block或者element在外觀或行爲上的改變
咱們經過BEM命名法寫樣式以下：
.block{}
.block-element{}
.block-modifier{}
.block-element-modifier{}
BEM將頁面解析爲block和element，而後根據不一樣的狀態使用modifier來設置樣式。
我對BEM的思想理解可能不到位，對BEM的見解主要是由兩點：
（1）頁面CSS模塊化，每一個block就是一個模塊，模塊間相互獨立
（2）多級的class命名，避免選擇器的嵌套結構

關於CSS方法論

上面提到的這些CSS方法論，你們看了就會發現，它們其實有不少思想是相同的，好比：
一、選擇器的嵌套的優化
二、CSS代碼模塊化
三、抽象CSS代碼
…
這些方法論，咱們學習的時候，最重要的是去理解其思想，不必定非得照搬它的實現形式，多種方法結合使用。

131.     我本身總結的方法

談了這麼多，下面來講說我本身總結的寫CSS代碼的一些關鍵點。一、寫代碼以前：從PSD文件出發當咱們拿到設計師給的PSD時，首先不要急於寫CSS代碼，首先對整個頁面進行分析，主要關注點是下面幾個：（1）頁面分紅了幾個模塊，哪些模塊是公用的，常見的好比頭部和底部，還有一些菜單欄等等（2）分析每個模塊都有什麼樣式，提取出公用的樣式，注意公用樣式是全局公用（整個頁面公用）仍是局部公用（模塊內公用），公用樣式包括公用的狀態樣式，好比公用的選中狀態，禁用狀態等等。二、開始寫代碼根據對PSD文件的分析，咱們就能夠開始着手寫代碼，我比較推薦SMACSS將樣式分紅不一樣類型的作法：（1）第一步是搭好頁面的骨架，也就是base樣式，layout樣式。（2）第二步就是依次實現不一樣的模塊，在這裏我推薦BEM的命名思想，可是能夠嵌套一到兩層的選擇器結構三、優化代碼我相信當咱們完成基本的頁面效果後，仍是會存在着一些重複的或者不夠簡潔的代碼，這時候就是要去優化這些代碼，主要是在提取重複代碼，儘量地精簡代碼。