淺談CSS重構樣式表性能

什麼狀況下重構

結合代碼的上下文重構代碼會更加的容易。因此，若是是修復bug，或者開發新的功能時用到了已有的代碼，以爲有可變更的空間，能更好的爲項目所用，重構是最好的選擇。順帶的重構不至於會把項目搞亂，他人也能夠從你重構的代碼中受益，且不斷的重構代碼，也能提高你的代碼質量。

然而若是碰到一段有不少依賴的代碼，也許你就得慎重考慮下是否要對其進行重構。重構有不少依賴的代碼，就像抽衣服上的線：抽得越多，散開得越多。對於這類代碼，若是時間很緊，先把工做完成也許更合適。而後再勻出些時間，回頭審視並重構代碼。

高性能樣式表

級聯和權重

重構樣式表，前提得先是你的改動符合優秀框架的特色。要對瀏覽器的表現形式 級聯有深入的理解。

• style

• id選擇器

• class類選擇器

• 類型選擇器

• !important

要紮實的理解上面樣式的層疊樣式覆蓋關係，懂得計算層級特指度（權重）。

本文所說的特指度（specificity）： 特指度表示一個css選擇器表達式的重要程度，能夠經過一個公式來計算出一個數值，數越大，越重要。

優質的CSS

一、保持選擇器的簡單；瀏覽器是從右向左匹配選擇器的，因此避免層級過深。

/* bad */
div nav ul li a

/* good */
div a
複製代碼

二、分離CSS和JS；因爲JS和CSS二者都依賴於HTML元素的類和ID。因此應避免二者的混亂，區別二者的職能。JS中使用的類和ID，不該該在用來爲元素添加樣式。

<div class="chenrf J_name"></div>

document.querySelector('.J_name')
複製代碼

三、合理的利用盒子模型；盒子模型有兩屬性：content-box、border-box，區別於寬度高度的計算方式，合理的選擇，適用於當下場景，能讓你的開發節奏加快。

測試

測試CSS有難度，由於不一樣的平臺、屏幕尺寸和設備都須要測試。全面測試的對CSS代碼的改動進行測試會花費較長的時間，而且須要用到多種不一樣的工具。

代碼組織和重構策略

順序組織CSS代碼

1.通用樣式，消除不一樣瀏覽器之間的不一致性

2.基礎樣式，設定網站全部元素的基本樣式，margin、padding、line-height等

3.組件和容器樣式，以基礎樣式爲基礎進行，可複用的。樣式的調整都交由父容器處理。

4.結構化樣式，用來建立網站的佈局，內再包含組件和容器樣式

5.功能性樣式，最精確的樣式，針對特定的效果，好比js使用所添加的 !important 類

6.瀏覽器特定樣式；可選，針對特定瀏覽器生效的樣式，好比IE7: *diaplay: inline

多個文件仍是大文件

用戶訪問包含CSS文件的網站時，瀏覽器首先要請求CSS文件，而後將其下載下來，在解析他們並用用恰當的樣式。所以，咱們須要儘量的是其須要下載的CSS文件縮小。

• 在小型項目中用一個CSS文件徹底能夠接受，操做起來也簡單。

• 在大型項目中拆分爲多個文件，這樣後期代碼維護比較便捷

• 多個文件下的大型項目，可使用工具在上線前，或者自動化工具把其頁面須要的樣式CSS文件，拼接合併爲一個CSS文件

策略

一、刪除殭屍代碼。既然重構就儘量的把一些存在但沒有使用的代碼剔除

二、分離CSS和JS。跟上面講的同樣，爲元素添加樣式的類和ID不該該在JS中用作選擇器

三、刪除冗餘的ID。頁面中的ID具備惟一性，且特指度最高，故重構時應下降更精確選擇器的特指度。

四、定義可複用的組件。把網站中一些經常使用的樣式接口組件化，精簡重複的CSS

五、隔離面相特定的瀏覽器樣式。瀏覽器之間存在差別，所以咱們會在CSS中使用一些 「hack」 針對特定瀏覽器作調整。

<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->
複製代碼

常常策略性針對的衡量重構，以便可以更小更可控的模塊發佈你的代碼改動。