寫CSS的同學(xué)們往往會(huì)體會(huì)到,隨著項(xiàng)目規(guī)模的增加,項(xiàng)目中的CSS代碼也會(huì)越來(lá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)理覺得要修改樣式,或者要?jiǎng)h掉它,如果沒有規(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í)可能也不知不覺地在使用它。
提高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è)面并沒有用到它們,這種情況會(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í)可能不知不覺也會(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)容依賴于容器,沒有分離的代碼,也就是說(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列表的樣式,我覺的就按照我們?cè)鹊淖龇ň涂梢裕灰欢ǚ堑媒o一個(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è)人覺得要分情況進(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://m.newbst.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)