CSS重構(gòu)：樣式表性能調(diào)優(yōu)
css同樣需要好好寫。
序言
- 為什么要讀這本書？
其實(shí)這個問題說來話長，但是簡單的說。就是用團(tuán)隊(duì)年會拿的獎金買的書。而且這是我讀的第一本書。
而且，這是我讀的第一本有關(guān)css的紙質(zhì)書。因?yàn)樽鳛橐粋€前端，css總是被忽視一個技能。隨著nodejs以及很多js框架的誕生，前端由以前的被UI兼職，現(xiàn)在獨(dú)立出來，并且開始逐步搶占后端以及native端的底盤，我們越來越多去關(guān)注js的性能，設(shè)計模式，垃圾回收機(jī)制等等。
殊不知，CSS才是良好用戶體驗(yàn)的關(guān)鍵。
秉持這一觀點(diǎn)（僅代表個人），我推薦買了這本書。拿到手以后，薄薄的100多頁，然后興沖沖。。。
- 是什么吸引我
這里我要引用書中的序言
人們常將前端技術(shù)HTML CSS 和JavaScript親切的稱為“三劍客”， 大抵說的是它們并肩而支撐起了數(shù)以億計的網(wǎng)站， 英勇、俠義之氣概不亞于桃園結(jié)義的劉關(guān)張， 但若將網(wǎng)站比作一個少女，HTML可視作她的身軀，CSS必然是伊人的著裝打扮，而JavaScript則是其言談舉止。胭脂粉易得，化妝之術(shù)難學(xué)。……改動一處樣式，結(jié)果頁面布局大亂，修改起樣式來如履薄冰，這哪里是哪里??！樣式明明加上了，可千呼萬喚就是不生效！伺候好一個瀏覽器，別家的又亂了，這還能按時發(fā)布嗎？！
簡單的文字，寫出了前端選手們的心聲啊。
重構(gòu)的原則
- 什么是重構(gòu)
重構(gòu)是指在不改變代碼行為的前提下，重寫代碼，使其更加簡潔、易于復(fù)用。
在國內(nèi)的大環(huán)境里，很多團(tuán)隊(duì)都急于嘗鮮，項(xiàng)目進(jìn)度飛快，需求上天入地、變化多端。重構(gòu)這個東西基本成了程序員的夢想?；蛘邠Q一句話說，不想重構(gòu)自己代碼的程序員不是一個好程序員。
為什么要重構(gòu)呢？
顯然，是因?yàn)楫?dāng)前的代碼不夠高效，且不利于維護(hù)。我們盡量提倡做小范圍的重構(gòu)，但是現(xiàn)實(shí)經(jīng)常不如人意，很多基礎(chǔ)的架構(gòu)都冗余很多東西。那么問題來了。我們要重構(gòu)，就要知道什么的是良好的架構(gòu)
下面我列舉書中提到的幾點(diǎn)：
- 優(yōu)秀的架構(gòu)是可預(yù)測的，就是當(dāng)其他人拿到你的代碼時，可以很快理解它是做什么用的
- 優(yōu)秀的架構(gòu)可提升代碼復(fù)用性
- 優(yōu)秀的架構(gòu)可擴(kuò)展
- 優(yōu)秀的架構(gòu)可維護(hù)
如果我們重構(gòu)可以使得后來的架構(gòu)的達(dá)到以上目的，那么我們的重構(gòu)就是值得的。否則，不要輕易去重構(gòu)。
- 什么時候可以去重構(gòu)代碼
如果我們平時在修復(fù)bug，或者在開發(fā)新功能時，重構(gòu)代碼是最好的選擇。只有不斷的去重構(gòu)代碼，代碼的質(zhì)量才能達(dá)到卓越。
但是，現(xiàn)實(shí)是殘酷的。很多時候，我所面臨的代碼里面有很多的依賴，重構(gòu)這些依賴就好比拆毛衣上的線，拆的越多，需要重構(gòu)的部分也就越多。這個時候，如果時間比較緊，先把工作做完是更好的選擇。
還有，就是最好不要不要把重構(gòu)的眼光放在一些無關(guān)痛癢的編碼風(fēng)格上，不要患有“不是我寫的癥”。
在一個技術(shù)團(tuán)隊(duì)中，一個優(yōu)秀的領(lǐng)導(dǎo)能理解重構(gòu)代碼的重要性，但是未必所有人都是這樣他們可能會持有一下觀點(diǎn)：
- 花時間重寫代碼，看不到功能上的變化，浪費(fèi)時間
- 這些代碼還能繼續(xù)正常工作，沒有必要修復(fù)
- 你應(yīng)該當(dāng)初就把代碼寫正確。
如果有人持有以上建議，而且你對自己重構(gòu)有信心并且，不會影響項(xiàng)目進(jìn)度，作者建議你去重構(gòu)。在這個地方，我個人覺得還是要保持謹(jǐn)慎。確認(rèn)自己的重構(gòu)是有效的，不要為了重構(gòu)而重構(gòu)。因?yàn)?，不成熟的?yōu)化，也是一件讓人頭疼的事情。
如何寫出更好的CSS
-
級聯(lián)
級聯(lián)是瀏覽器選擇為元素用哪一種樣式的方法。
-
選擇器的優(yōu)先級
樣式的優(yōu)先級（我暫且這么稱呼，書中用特指度來描述）決定你的哪一行css是在工作的。
-
用權(quán)重相加的方式來計算優(yōu)先級
一般而言，選擇器越特殊，它的優(yōu)先級越高。也就是選擇器指向的越準(zhǔn)確，它的優(yōu)先級就越高。
通常我們用1表示標(biāo)簽名選擇器的優(yōu)先級，用10表示類選擇器的優(yōu)先級，用100標(biāo)示ID選擇器的優(yōu)先級，如果是屬性后面加了！important那么屬性將會變?yōu)闊o窮。
舉例：
- div.test1 .span var 優(yōu)先級 1+10 +10 +1
- span#xxx .songs li 優(yōu)先級1+100 + 10 + 1
- #xxx li 優(yōu)先級 100 +1
-
通過選擇器特指度來計算優(yōu)先級
特指度是用來表示css識別元素的精確性，可以用（a, b, c, d）四個維度來表示
a 若果用style屬性來表示css樣式，則a = 1 否則為0
b b為id選擇器的數(shù)量
c 類選擇器屬性選擇器，偽類選擇器的數(shù)量
d 類型選擇器和偽元素的數(shù)量
在計算特指度時，左邊選擇的特指度最高，若兩個值相等，需要比較右側(cè)緊挨著的變量的值。如果兩個選擇器的特指度都相等，那么在css文檔中排在后面的將生效。
舉例： #nav-g > ul > li > a.nav-link
- 樣式不是用style來加載的所以a = 1
- 有一個id選擇器 b = 2
- 有一個類選擇器 c = 1
- 有三個類型選擇器 d為3
最后就是，除了！important之外，行內(nèi)樣式的特指度是最高的。
如果有兩個屬性都用！important，則規(guī)則集排在后面的生效
-
-
如何寫好css
- 使用注釋，我個人的觀點(diǎn)，注釋必須要有，但不宜過多，過多的注釋同樣會讓人產(chǎn)生誤解
- 結(jié)構(gòu)一致，比如，有的人喜歡吧規(guī)則集寫在一行里，例如li {color: #fff; font-size: 10px; ...}，不過我個人更喜歡每個規(guī)則一行，然后按照一定的次序?qū)⑺麄兣帕?/li>
- 保持選擇器的簡單
- 簡單的選擇器有利于樣式的重構(gòu)，即使改變了dom的結(jié)構(gòu)，但其任然可以正常工作
- 簡單的選擇器，性能更好，瀏覽器在關(guān)聯(lián)規(guī)則表的時，通常會從右邊開始匹配，使用特指度更高的選擇器使得，樣式能夠快速的匹配。
- js與css的選擇器分開，js最好去操作類名達(dá)到改變樣式的目的，除了一些特定的功能比如說隱藏。
- 要使用有意義的命名
- 命名不需要粒度太細(xì)，否則就是過于模塊化，這樣的代碼顯得冗余，且沒有達(dá)到代碼復(fù)用的效果
-
css的分類
通用樣式：瀏覽器通常會自帶一些樣式，我們需要一個通用的樣式來將這些樣式覆蓋掉，以達(dá)到在不同的瀏覽器呈現(xiàn)統(tǒng)一的效果
-
基礎(chǔ)樣式 因?yàn)樵卦跊]有設(shè)置樣式的情況下會繼承父容器的樣式，有一些樣式例如
- color
- font-family
- Line-height
不需要每次都去設(shè)置它們，我們只需要定義一個基礎(chǔ)的樣式。
- 文檔元素<head></head> <link></link><title><base><meta>這些標(biāo)簽不會顯示所以不需要樣式
- 區(qū)塊元素 <address> <article><aside><body><footer><header><nav><section>這些元素主要用來做布局用，所以要注意它們的盒模型屬性的設(shè)置
- 標(biāo)題和文本元素 <h1>-<h6> <p><pre><figure><ficaption>這些元素用來展示文本，所以要注意文本相關(guān)的屬性
- 錨點(diǎn)標(biāo)簽元素:link :visited :focus :hover :active,這些元素標(biāo)識了一些狀態(tài)可以去關(guān)注out-line等
- 文本語義元素<abbr><b><cite><code><data><dfn><em><i><kbd><s><strong><time><u>等
- 列表元素<ol>(有序)<ul>(無序)<dl>(定義列表)
- 組合元素<div><main><spsan>
- 表格
- 表單
- 多媒體
組件樣式，包括組件的基本樣式以及其行為，例如不同狀態(tài)，動畫等
結(jié)構(gòu)化樣式
功能樣式
瀏覽器特定樣式
通過樣式的分類，我們可以更好的去組織我們的樣式，吧同類的樣式放在一起，從而使得我們的樣式文件更加容易去維護(hù)。
關(guān)于測試
這是一個永恒 的話題，下面列舉幾點(diǎn)
確定好自己的項(xiàng)目需要運(yùn)行的范圍，然后定制合適的測試環(huán)境，例如當(dāng)前項(xiàng)目可以運(yùn)行在多大屏幕上，可以在哪些瀏覽器上使用。
可以通過工具來查看，我們的css是否已經(jīng)準(zhǔn)確的掛載到dom樹上
-
視覺回歸測試
我之前以為視覺回歸測試就是傳說中“觀察法”，其實(shí)里面還是有一些學(xué)問的。
- 測試重要的點(diǎn)
- 保持測試粒度
- 在不同的瀏覽器上測試
- 使用Gemini工具測試
指定編碼規(guī)范，現(xiàn)在有很多工具例如eslint，css-beauty等
建立模式庫，有利于編碼規(guī)范，同樣可以建立對應(yīng)測試的模式庫。
重構(gòu)吧
了解了上述知識后，我們就可以來重構(gòu)我們的項(xiàng)目。
建立不同類型的css，將他們組織在不同的文件中
去除無用的id以及僵尸代碼。
重構(gòu)是一個持續(xù)的過程，我們無法做到一次絕對完美的重構(gòu)，但是，只要一直去做，那將會得到更好的用戶體驗(yàn)。
