CSS編程中值得注意的地方有哪些

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)CSS編程中值得注意的地方有哪些，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)公司專注于平房網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供平房營(yíng)銷型網(wǎng)站建設(shè)，平房網(wǎng)站制作、平房網(wǎng)頁(yè)設(shè)計(jì)、平房網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù)，打造平房網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供平房網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

CSS即層疊樣式表，所以一層一層覆蓋其實(shí)是其本質(zhì)特征。真正的問題在于維護(hù)，許多人認(rèn)為CSS僅是樣式，不是代碼，無需維護(hù)，所以任意書寫，只要將自己需要的樣式的優(yōu)先級(jí)設(shè)為最高即可，才導(dǎo)致了深層級(jí)CSS的出現(xiàn)，因?yàn)槊看翁砑右粋€(gè)樣式就必須比以前的優(yōu)先級(jí)高才能在頁(yè)面看到。深層級(jí)不僅造成維護(hù)性降低，可讀性也是一個(gè)問題，人不是機(jī)器，無法很優(yōu)雅的按優(yōu)先級(jí)閱讀，所以很難確認(rèn)一個(gè)樣式用于哪里，其實(shí)還存在許多的冗余樣式，在任何地方都被覆蓋的樣式。這樣的代碼在擴(kuò)展性上，一開始反而是有優(yōu)勢(shì)的，因?yàn)樘砑右粋€(gè)新class，無需擔(dān)心影響其他地方，但慢慢隨著項(xiàng)目規(guī)模的增大，頁(yè)面增多，需要復(fù)制樣式的地方也越來越多，它們之間又存在微小的差異，設(shè)計(jì)的更改，需求的變化，這一切都會(huì)將這種快餐式的CSS推進(jìn)柏油坑。因?yàn)殡y以維護(hù)，所以無法響應(yīng)需求，所以無法復(fù)用，只能復(fù)制，惡性循環(huán)。

正如上面所說的，問題在于可讀性、維護(hù)性、擴(kuò)展性、復(fù)用性這幾個(gè)方面。所以只要提高它們就能解決問題, 雖然這么說，也不是如此簡(jiǎn)單的。先來談?wù)勗贑SS中，這些概念都有著怎樣的意義。
可讀性

有人認(rèn)為CSS不是程序，不需要可讀性，有人認(rèn)為CSS只要寫出來就有可讀性，因?yàn)楹芎?jiǎn)單。拋開各種預(yù)處理器不說，原生CSS結(jié)構(gòu)確實(shí)簡(jiǎn)單，沒有需要編程的部分，但仍然可能導(dǎo)致混亂。原因有二，一是CSS可以層疊，其中涉及到了優(yōu)先級(jí)和作用范圍，如果寫的不好，人很難讀出其中的意義，二是CSS屬性眾多，加上CSS3引入了很多用法獨(dú)特的屬性，一個(gè)選擇器可能包含幾十個(gè)屬性。比如下面這段我隨便寫的CSS代碼：

CSS 

  1. span {   

  2.     -webkit-box-shadow: 6px 4px 4px red;   

  3.     -moz-box-shadow: 6px 4px 4px red;   

  4.     box-shadow: 6px 4px 4px red;   

  5. }   

  6. div span {   

  7.     border-width: 4px;   

  8.     border-style: dotted;   

  9.     border-color: blue;   

  10. }   

  11. #box {   

  12.     border-left: 2px solid red;   

  13.     border-bottom: 2px solid red;    

  14. }  

乍一看也沒什么，都是border，大致能看出來這段CSS只是為了添加一個(gè)紅色的陰影讓box看起來比較立體。但中間的部分似乎是搗亂的，你可能會(huì)說這太傻了，看不到嗎。是的，當(dāng)這3部分散落在上萬行的CSS中時(shí)，肯定看不到。于是有人很自然的想起了我們可愛的瀏覽器，沒錯(cuò)，在瀏覽器中可以快速找到作用于目標(biāo)的CSS樣式，但這也是萬惡之源。首先我假設(shè)你不知道中間那部分東西是為了什么而寫的，因?yàn)槟闶强繛g覽器找到它的。然后剩下兩種可能，不管三七二十一改了再說和看看它為什么存在。前者悲劇的可能性是100%，后者悲劇的可能性是90%，因?yàn)槟阋呀?jīng)掉坑里了，很快我們會(huì)發(fā)現(xiàn)要修改它還牽扯到了另外的地方，接著在瀏覽器中探索到另一個(gè)莫名其妙的樣式，當(dāng)你弄懂全部的時(shí)候，你應(yīng)該已經(jīng)把上萬行的代碼弄了個(gè)一清二楚了，也許最幸運(yùn)的是，浪費(fèi)了幾個(gè)小時(shí)的時(shí)間發(fā)現(xiàn)只需要修改一行就能達(dá)到目的。

當(dāng)然，我們可以天真的認(rèn)為，只要把他們寫在一起就可以了，這樣找起來很簡(jiǎn)單。而我將繼續(xù)順著這樣的思路來嘗試曝露問題。
維護(hù)性

所謂物以類聚是很有道理的，人們習(xí)慣將事物歸類，但問題是分類標(biāo)準(zhǔn)，樣式并不關(guān)心業(yè)務(wù)，無論是什么文字內(nèi)容，還是功能有何不同，它在乎的只是樣式，比如文字的尺寸，間距和寬高，顏色等等。如果簡(jiǎn)單的將一個(gè)組件的樣式放在一起，勢(shì)必帶來的就是小段代碼的重復(fù)書寫。不覺得有多嚴(yán)重？我來舉個(gè)栗子。

CSS 

  1. aside {   

  2.     box-shadow: 6px 4px 4px #AA3343;   

  3. }   

  4. nav {   

  5.     box-shadow: 6px 4px 4px #AB3633;       

  6. }   

  7. .item {   

  8.     box-shadow: 6px 4px 4px #AA3732;   

  9. }   

  10. .item.otherStatus {   

  11.     box-shadow: 6px 4px 4px #AA3132;   

  12. }  

繼續(xù)說上面的例子，box需要陰影，但如果這個(gè)項(xiàng)目的UI統(tǒng)一風(fēng)格，包括sidebar，navigator以及item都需要這樣的陰影呢？再如果，明天客戶或者UX一拍腦袋，這個(gè)陰影應(yīng)該是灰色的不該是紅色的呢？不要繼續(xù)天真的認(rèn)為全局替換是救命稻草。首先，沒有幾個(gè)網(wǎng)站會(huì)用red，blur做色調(diào)的，你用的應(yīng)該是#AA3333，這樣的代碼，然后你發(fā)現(xiàn)sidebar用了#A43433，而navigator是#AB3633，等等，item有兩個(gè)狀態(tài)，而兩個(gè)狀態(tài)對(duì)應(yīng)的顏色是不一樣的。這怎么可能？但當(dāng)你打開瀏覽器的時(shí)候你會(huì)發(fā)現(xiàn)本來就相差無幾的顏色，在陰影中變得一模一樣了，誰(shuí)看的出來呢，當(dāng)初使用的時(shí)候可能也不過是隨意的在mockup中取的一個(gè)顏色。

大量的重復(fù)帶來的不僅僅是代碼的冗余，我們必須靠人力去同步它們，而人很難保證它們的修改是完全一致的，尤其是當(dāng)它們中引入了一些不一致的獨(dú)特的東西時(shí)。不要小看CSS，其后果就是進(jìn)度和人力的壓力，后面就是PM有沒有讀過《人月神話》的事了。

肯定有人在想，誰(shuí)讓你當(dāng)初要寫成這樣呢。我們?cè)谧x代碼的時(shí)候最喜歡問，當(dāng)初為什么要這么寫？但慢慢的你會(huì)讀出它的歷史，有時(shí)候它是身不由己的。這就涉及到了下一個(gè)要討論的內(nèi)容。
擴(kuò)展性

擴(kuò)展性是一個(gè)具有欺騙性的東西，所謂的擴(kuò)展性其實(shí)就是在現(xiàn)有基礎(chǔ)上再次開發(fā)新東西的性能，但我認(rèn)為它還必須有前提條件，那就是保持可讀性與維護(hù)性。

簡(jiǎn)單的追求可維護(hù)性是自取滅亡，原因很簡(jiǎn)單，將新舊代碼完全分離的時(shí)候擴(kuò)展性最高，因?yàn)椴槐負(fù)?dān)心對(duì)以前的部分有影響，新的樣式可以隨意發(fā)揮。是不是很神奇，這樣想的我們寫下的代碼，肯定就是前面我們追問的代碼。所以自己回答自己吧，當(dāng)初沒考慮可讀性和維護(hù)性，只想著快點(diǎn)增加新的樣式，就這么寫了。

那什么才是一個(gè)好的擴(kuò)展性呢，簡(jiǎn)單來說，就是多功能產(chǎn)品。比如一個(gè)box，也許它的樣式就時(shí)
復(fù)用性

似乎我一直在說的就是重復(fù)，那我們就來說說復(fù)用性，如何才能復(fù)用CSS代碼是一個(gè)很大的問題，比如粒度，是一兩個(gè)屬性進(jìn)行復(fù)用還是一大組選擇器進(jìn)行復(fù)用呢，再比如對(duì)象，是為了class復(fù)用屬性，還是為了html復(fù)用class呢。這些選擇不算太重要，但是帶來的影響卻很重大，可以說是整個(gè)CSS結(jié)構(gòu)的改變。下面繼續(xù)用box的陰影來討論復(fù)用。

CSS 

  1. .shadow {   

  2.     -webkit-box-shadow: 6px 4px 4px #A93334;   

  3.     -moz-box-shadow: 6px 4px 4px #A93334;   

  4.     box-shadow: 6px 4px 4px #A93334;   

  5.     border-left: 2px solid #A93334\9;   

  6.     border-bottom: 2px solid #A93334\9;    

  7. }  

這樣看起來我有了一個(gè)shadow的class可以給任意的目標(biāo)加上這個(gè)陰影了，但這導(dǎo)致了一個(gè)復(fù)用的問題，和上面那段搗亂的CSS樣式一樣，如果item已有另外2個(gè)border了，那這個(gè)class是無法去除的。所以復(fù)用時(shí)不僅要考慮需要什么，還要考慮不需要什么。另外一些必須的屬性比如display還有overflow等也是要考慮的，因?yàn)閡ser agent的原因，很多屬性是隱藏在element中的。

上述就是小編為大家分享的CSS編程中值得注意的地方有哪些了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

名稱欄目：CSS編程中值得注意的地方有哪些
文章網(wǎng)址：http://bm7419.com/article46/jceseg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、網(wǎng)站策劃、搜索引擎優(yōu)化、網(wǎng)站內(nèi)鏈、網(wǎng)站收錄、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(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í)需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站