如何用CSS代碼重構(gòu)與優(yōu)化之路

寫CSS的同學(xué)們往往會(huì)體會(huì)到，隨著項(xiàng)目規(guī)模的增加，項(xiàng)目中的CSS代碼也會(huì)越來(lái)越多，如果沒(méi)有及時(shí)對(duì)CSS代碼進(jìn)行維護(hù)，CSS代碼不斷會(huì)越來(lái)越多。CSS代碼交錯(cuò)復(fù)雜，像一張龐大的蜘蛛網(wǎng)分布在網(wǎng)站的各個(gè)位置，你不知道修改這行代碼會(huì)有什么影響，所以如果有修改或增加新功能時(shí)，開發(fā)人員往往不敢去刪除舊的冗余的代碼，而保險(xiǎn)地增加新代碼，最終的壞處就是項(xiàng)目中的CSS會(huì)越來(lái)越多，最終陷入無(wú)底洞。

CSS代碼重構(gòu)的目的

我們寫CSS代碼時(shí)，不僅僅只是完成頁(yè)面設(shè)計(jì)的效果，還應(yīng)該讓CSS代碼易于管理，維護(hù)。我們對(duì)CSS代碼重構(gòu)主要有兩個(gè)目的：

1、提高代碼性能

2、提高代碼的可維護(hù)性

提高代碼性能

提高CSS代碼性能主要有兩個(gè)點(diǎn)：

1、提高頁(yè)面的加載性能

提高頁(yè)面的加載性能，簡(jiǎn)單說(shuō)就是減小CSS文件的大小，提高頁(yè)面的加載速度，盡可以的利用http緩存

2、提高CSS代碼性能

不同的CSS代碼，瀏覽器對(duì)其解析的速度也是不一樣的，如何提高瀏覽器解析CSS代碼的速度也是我們要考慮的

提高代碼的可維護(hù)性

提高CSS代碼的可維護(hù)性主要是體現(xiàn)在下面幾點(diǎn)：

1、可重用性

一般來(lái)說(shuō)，一個(gè)項(xiàng)目的整體設(shè)計(jì)風(fēng)格是一致的，頁(yè)面中肯定有幾個(gè)風(fēng)格一致但有些許不同的模塊，如何在盡可能多地重用CSS代碼，盡可能少地增加新代碼，這是CSS代碼中非常重要的一點(diǎn)。如果CSS代碼的重用性高，我們可能只需要寫一些不一樣的地方，對(duì)頁(yè)面性能和可維護(hù)性、提高開發(fā)效率都有很大的幫助。

2、可擴(kuò)展性

如果產(chǎn)品增加了某個(gè)功能，我們應(yīng)該保證新增加的CSS代碼不會(huì)影響到舊的CSS代碼和頁(yè)面，并且盡可能少地增加新代碼而重用舊代碼。

3、可修改性

如果某個(gè)模塊產(chǎn)品經(jīng)理覺(jué)得要修改樣式，或者要?jiǎng)h掉它，如果沒(méi)有規(guī)劃好相應(yīng)的CSS代碼，過(guò)了一段時(shí)間之后，開發(fā)人員可能已經(jīng)不記得這段代碼作用了幾個(gè)地方，不敢修改或刪除它，這樣下去CSS代碼也就越來(lái)越多，影響了頁(yè)面的性能，還造成了代碼的復(fù)雜度。

CSS代碼重構(gòu)的基本方法

前面說(shuō)到了CSS代碼重構(gòu)的目的，現(xiàn)在我們來(lái)說(shuō)說(shuō)一些如何達(dá)到這些目的的一些基本方法，這些方法都是易于理解，容易實(shí)施的一些手段，大家平時(shí)可能也不知不覺(jué)地在使用它。

提高CSS性能的手段

首先說(shuō)說(shuō)如何提高CSS性能，根據(jù)頁(yè)面的加載性能和CSS代碼性能，主要總結(jié)有下面幾點(diǎn)：

1、盡量將樣式寫在單獨(dú)的css文件里面，在head元素中引用

有時(shí)候?yàn)榱藞D方便或者快速搞定功能，我們可能會(huì)直接將樣式寫在頁(yè)面的style標(biāo)簽或者直接內(nèi)聯(lián)在元素上，這樣雖然簡(jiǎn)單方便，但是非常不利于日后的維護(hù)。將代碼寫成單獨(dú)的css文件有幾點(diǎn)好處：

（1）內(nèi)容和樣式分離，易于管理和維護(hù)

（2）減少頁(yè)面體積

（3）css文件可以被緩存、重用，維護(hù)成本降低

2、不使用@import

這條手段已經(jīng)是眾所周知，這里簡(jiǎn)單提一下，@import影響css文件的加載速度

3、避免使用復(fù)雜的選擇器，層級(jí)越少越好

有時(shí)候項(xiàng)目的模塊越來(lái)越多，功能越來(lái)越復(fù)雜，我們寫的CSS選擇器會(huì)內(nèi)套多層，越來(lái)越復(fù)雜。

建議選擇器的嵌套最好不要超過(guò)三層，比如：

header.logo.text{}

可以優(yōu)化成

haeder.logo-text{}

簡(jiǎn)潔的選擇器不僅可以減少css文件大小，提高頁(yè)面的加載性能，瀏覽器解析時(shí)也會(huì)更加高效，也會(huì)提高開發(fā)人員的開發(fā)效率，降低了維護(hù)成本。

4、精簡(jiǎn)頁(yè)面的樣式文件，去掉不用的樣式

很多時(shí)候，我們會(huì)把所有的樣式文件合并成一個(gè)文件，但是這樣有一個(gè)問(wèn)題：很多其他頁(yè)面的CSS同時(shí)引用到當(dāng)前頁(yè)面中，而當(dāng)前頁(yè)面并沒(méi)有用到它們，這種情況會(huì)造成兩個(gè)問(wèn)題：

（1）樣式文件偏大，影響加載速度

（2）瀏覽器會(huì)進(jìn)行多余的樣式匹配，影響渲染時(shí)間。

正確的處理方法是根據(jù)當(dāng)前頁(yè)面需要的css去合并那些當(dāng)前頁(yè)面用到的CSS文件。

PS：合并成一個(gè)文件有一個(gè)優(yōu)點(diǎn)：樣式文件會(huì)被瀏覽器緩存，進(jìn)入到其他頁(yè)面樣式文件不用再去下載。這條規(guī)則應(yīng)根據(jù)場(chǎng)景來(lái)區(qū)別對(duì)待，如果是大項(xiàng)目，應(yīng)該合并成不同的樣式文件，如果是簡(jiǎn)單的項(xiàng)目，建議合并成一個(gè)文件即可。如果無(wú)法確認(rèn)項(xiàng)目規(guī)模，建議分開成不同的樣式文件，日后要合并也比較方便。

5、利用CSS繼承減少代碼量

我們知道有一部分CSS代碼是可以繼承的，如果父元素已經(jīng)設(shè)置了該樣式，子元素就不需要去設(shè)置該樣式，這個(gè)也是提高性能的行之有效的方法。

常見的可以繼承的屬性比如：

color，font-size，font-family等等

不可繼承的比如：

position，display，float等

大家可以查看CSS參考手冊(cè)

提高可維護(hù)性的方法

提高CSS代碼的可維護(hù)性，簡(jiǎn)單的說(shuō)就是要讓開發(fā)人員易于理解CSS代碼，容易去修改它，不會(huì)破壞原有的功能。下面說(shuō)說(shuō)一些常用的手段。

1、命名與備注

命名是提高代碼可讀性的第一步，也是及其重要的一步。很多人都有這樣的體會(huì)：命名是寫代碼中最讓程序員頭疼的事情之一，尤其是對(duì)母語(yǔ)非英語(yǔ)的開發(fā)人員來(lái)說(shuō)，要找一個(gè)合適貼切的名字并不容易。提高自己命名的能力，可以多看看別人的代碼。下面是CSS中的一些命名相關(guān)的建議：

頭：header 內(nèi)容：content/container 尾：footer 導(dǎo)航：nav 側(cè)欄：sidebar 欄目：column 頁(yè)面外圍控制整體佈局寬度：wrapper 左右中：left right center 登錄條：loginbar 標(biāo)志：logo 廣告：banner 頁(yè)面主體：main 熱點(diǎn)：hot 新聞：news 下載：download 子導(dǎo)航：subnav 菜單：menu 子菜單：submenu 搜索：search 友情鏈接：friendlink 頁(yè)腳：footer 版權(quán)：copyright 滾動(dòng)：scroll 內(nèi)容：content 標(biāo)簽：tags 文章列表：list 提示信息：msg 小技巧：tips 欄目標(biāo)題：title 加入：joinus 指南：guide 服務(wù)：service 注冊(cè)：regsiter 狀態(tài)：status 投票：vote 合作伙伴：partner 導(dǎo)航：nav 主導(dǎo)航：mainnav 子導(dǎo)航：subnav 頂導(dǎo)航：topnav 邊導(dǎo)航：sidebar 左導(dǎo)航：leftsidebar 右導(dǎo)航：rightsidebar 菜單：menu 子菜單：submenu 標(biāo)題: title 摘要: summary

2、提取重復(fù)樣式

這一個(gè)方法很容易理解，簡(jiǎn)單說(shuō)就是提取相同的樣式成為一個(gè)單獨(dú)的類再引用，這樣不僅可以精簡(jiǎn)CSS文件大小，而且CSS代碼變少，更易于重用和維護(hù)。例如下面的例子：

原來(lái)的代碼是這樣：

.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; }

這兩個(gè)樣式的區(qū)別在于文字顏色的不同，我們可以將其公共的樣式提取出來(lái)，然后再分別設(shè)置其不同的樣式

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

提取公用的部分，然后在頁(yè)面上分別引用column-title和about等，這樣代碼更簡(jiǎn)潔，維護(hù)起來(lái)也更方便了。這個(gè)例子非常簡(jiǎn)單，實(shí)際上項(xiàng)目中可能有更復(fù)雜的情況，總之就要要盡可能的DRY，盡可能的提取重復(fù)的東西。

3、書寫順序

這個(gè)書寫順序指的是各個(gè)樣式的書寫順序，下面是推薦的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等)

書寫順序不一定非得按照上面的推薦來(lái)進(jìn)行，而是根據(jù)你自己的習(xí)慣，但是最好能保證前后的習(xí)慣一致的，或者團(tuán)隊(duì)?wèi)?yīng)該有一個(gè)共同的代碼規(guī)范去遵守，這樣后期維護(hù)起來(lái)也會(huì)方便許多。

以上是我個(gè)人總結(jié)的一些簡(jiǎn)單的寫好和重構(gòu)CSS代碼的方法，大家當(dāng)然不必拘泥于此，有不同的意見和建議歡迎進(jìn)行交流！

CSS方法論

什么是CSS方法論呢？簡(jiǎn)單地說(shuō)就是一些同行為了提高CSS的可維護(hù)性、提出的一些編寫CSS代碼的規(guī)范和方法。他們提出了一些概念，這些概念可能聽起來(lái)很高大上，但是實(shí)際你平時(shí)可能不知不覺(jué)也會(huì)用到這些所謂的CSS方法論。下面我簡(jiǎn)單地介紹下幾個(gè)比較常見的CSS方法論。

OOCSS

OOCSS是（Object Oriented CSS），顧名思義就是面向?qū)ο蟮腃SS。

OOCSS主要有兩個(gè)原則：

1、結(jié)構(gòu)和樣式分離

我們平時(shí)一定遇到過(guò)這種情況，比如一個(gè)頁(yè)面存在著多個(gè)不同功能的按鈕，這些按鈕的形狀大小都差不多，但是根據(jù)不同的功能會(huì)有不同的顏色或背景來(lái)加以區(qū)分。如果不進(jìn)行結(jié)構(gòu)和樣式分離，我們的CSS代碼可能是這樣的

.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; }

這兩個(gè)或者可能更多的按鈕擁有一些不同的樣式，但是它們同時(shí)擁有相同的大小樣式等，我們將其抽象的部分提取出來(lái)，結(jié)果如下：

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

這樣提取公用的樣式出來(lái)，然后按鈕同時(shí)引用btn和primary等。這種做法除了減少重復(fù)的代碼精簡(jiǎn)CSS之外，還有一個(gè)好處是復(fù)用性，如果需要增加其他額外的按鈕，只需要編寫不同的樣式，和btn配合使用即可。

（2）容器和內(nèi)容分離

我們平時(shí)寫代碼一定寫過(guò)這樣代碼

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

這樣的代碼就是內(nèi)容依賴于容器，沒(méi)有分離的代碼，也就是說(shuō)h3的樣式依賴于.content容器，如果其他地方要用到相同的樣式，但是它的容器卻不是.content，那你可能就是要再寫一遍.something h3。

所以O(shè)OCSS推薦分離容器和內(nèi)容，可以修改成：

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

關(guān)于這一點(diǎn)，我個(gè)人建議要分情況來(lái)看，像前面這個(gè)例子，它適合樣式和容器分離。但是比如下面這種情況：

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

這種ul，li列表的樣式，我覺(jué)的就按照我們?cè)鹊淖龇ň涂梢?，不一定非得給一個(gè)類給li來(lái)設(shè)定樣式，即

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

這樣頁(yè)面的li標(biāo)簽需要引用menu-item類。

當(dāng)然采用哪一種方式更好我也不卻確定，我自己比較喜歡.menu li的寫法，大家自行思考。

這就是OOCSS的兩個(gè)基本原則，這里只是簡(jiǎn)單介紹OOCSS，各位如果有興趣的話請(qǐng)自行Google查找相關(guān)資料。

SMACSS

SMACSS是什么呢，它的全稱是Scalable and Modular Architecture for CSS。簡(jiǎn)單說(shuō)就是可擴(kuò)展和模塊化的CSS架構(gòu)。

SMACSS將樣式分成5種類型：Base，Layout，Module，State，Theme，我們簡(jiǎn)單來(lái)說(shuō)說(shuō)每一種類型分別指什么。

1、Base

基礎(chǔ)樣式表，定義了基本的樣式，我們平時(shí)寫CSS比如reset.css就是屬于基礎(chǔ)樣式表，另外我認(rèn)為清除浮動(dòng)，一些動(dòng)畫也可以歸類為基礎(chǔ)樣式。

2、Layout

布局樣式，用于實(shí)現(xiàn)網(wǎng)頁(yè)的基本布局，搭起整個(gè)網(wǎng)頁(yè)的基本骨架。

3、Module

網(wǎng)頁(yè)中不同的區(qū)域有這個(gè)不同的功能，這些功能是相對(duì)獨(dú)立的，我們可以稱其為模塊。模塊是獨(dú)立的，可重用的組件，它們不依賴于布局組件，可以安全的刪除修改而不影響其他模塊。

4、State

狀態(tài)樣式，通常和js一起配合使用，表示某個(gè)組件或功能不同的狀態(tài)，比如菜單選中狀態(tài)，按鈕不可用狀態(tài)等。

關(guān)于狀態(tài)樣式，我個(gè)人覺(jué)得要分情況進(jìn)行討論：

（1）不同組件的同一狀態(tài)的樣式是一樣的，比如頭部的導(dǎo)航菜單的選中狀態(tài)樣式和側(cè)欄的菜單選中狀態(tài)樣式是一樣的，我認(rèn)為這部分狀態(tài)樣式可以歸類為State

（2）不同組件的統(tǒng)一狀態(tài)的樣式是不一樣的，即兩個(gè)地方的菜單雖然都是選中狀態(tài)，但是他們卻又不同的選中樣式，這部分樣式不應(yīng)該被認(rèn)為是State類型，而是應(yīng)該放在其組件對(duì)應(yīng)的Module中。

5、Theme

皮膚樣式，對(duì)于可更換皮膚的站點(diǎn)來(lái)說(shuō)，這個(gè)是很有必要的，分離了結(jié)構(gòu)和皮膚，根據(jù)不同的皮膚應(yīng)用不同的樣式文件。

BEM

BEM是Block，Element，Modifier的縮寫。下面分別來(lái)介紹一下這三個(gè)概念：

（1）Block：在BEM的理論中，一個(gè)網(wǎng)頁(yè)是由block組成的，比如頭部是個(gè)block，內(nèi)容是block，logo也是block，一個(gè)block可能由幾個(gè)子block組成。

（2）Element：element是block的一部分，具有某種功能，element依賴于block，比如在logo中，img是logo的一個(gè)element，在菜單中，菜單項(xiàng)是菜單的一個(gè)element

（3）Modifier：modifier是用來(lái)修飾block或者element的，它表示block或者element在外觀或行為上的改變

我們通過(guò)BEM命名法寫樣式如下：

.block{}

.block-element{}

.block-modifier{}

.block-element-modifier{}

BEM將頁(yè)面解析為block和element，然后根據(jù)不同的狀態(tài)使用modifier來(lái)設(shè)置樣式。

我對(duì)BEM的思想理解可能不到位，對(duì)BEM的看法主要是由兩點(diǎn)：

（1）頁(yè)面CSS模塊化，每個(gè)block就是一個(gè)模塊，模塊間相互獨(dú)立

（2）多級(jí)的class命名，避免選擇器的嵌套結(jié)構(gòu)

關(guān)于CSS方法論

上面提到的這些CSS方法論，大家看了就會(huì)發(fā)現(xiàn)，它們其實(shí)有很多思想是相同的，比如：

1、選擇器的嵌套的優(yōu)化

2、CSS代碼模塊化

3、抽象CSS代碼

…

這些方法論，我們學(xué)習(xí)的時(shí)候，最重要的是去理解其思想，不一定非得照搬它的實(shí)現(xiàn)形式，多種方法結(jié)合使用。

我自己總結(jié)的方法

談了這么多，下面來(lái)說(shuō)說(shuō)我自己總結(jié)的寫CSS代碼的一些關(guān)鍵點(diǎn)。

1、寫代碼之前：從PSD文件出發(fā)

當(dāng)我們拿到設(shè)計(jì)師給的PSD時(shí)，首先不要急于寫CSS代碼，首先對(duì)整個(gè)頁(yè)面進(jìn)行分析，主要關(guān)注點(diǎn)是下面幾個(gè)：

（1）頁(yè)面分成了幾個(gè)模塊，哪些模塊是公用的，常見的比如頭部和底部，還有一些菜單欄等等

（2）分析每一個(gè)模塊都有什么樣式，提取出公用的樣式，注意公用樣式是全局公用（整個(gè)頁(yè)面公用）還是局部公用（模塊內(nèi)公用），公用樣式包括公用的狀態(tài)樣式，比如公用的選中狀態(tài)，禁用狀態(tài)等等。

2、開始寫代碼

根據(jù)對(duì)PSD文件的分析，我們就可以開始著手寫代碼，我比較推薦SMACSS將樣式分成不同類型的做法：

（1）第一步是搭好頁(yè)面的骨架，也就是base樣式，layout樣式。

（2）第二步就是依次實(shí)現(xiàn)不同的模塊，在這里我推薦BEM的命名思想，但是可以嵌套一到兩層的選擇器結(jié)構(gòu)

3、優(yōu)化代碼

我相信當(dāng)我們完成基本的頁(yè)面效果后，還是會(huì)存在著一些重復(fù)的或者不夠簡(jiǎn)潔的代碼，這時(shí)候就是要去優(yōu)化這些代碼，主要是在提取重復(fù)代碼，盡可能地精簡(jiǎn)代碼。

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

分享題目：如何用CSS代碼重構(gòu)與優(yōu)化之路
當(dāng)前地址：http://www.bm7419.com/news5/319705.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)站營(yíng)銷、用戶體驗(yàn)、自適應(yīng)網(wǎng)站、網(wǎng)站導(dǎo)航、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)