什麼情況下重構
結合程式碼的上下文重構程式碼會更加的容易。所以，如果是修復bug，或者開發新的功能時用到了已有的程式碼，覺得有可變動的空間，能更好的為專案所用，重構是最好的選擇。順帶的重構不至於會把專案搞亂，他人也可以從你重構的程式碼中受益，且不斷的重構程式碼，也能提升你的程式碼質量。
然而如果碰到一段有很多依賴的程式碼，也許你就得慎重考慮下是否要對其進行重構。重構有很多依賴的程式碼，就像抽衣服上的線：抽得越多，散開得越多。對於這類程式碼，如果時間很緊，先把工作完成也許更合適。然後再勻出些時間，回頭審視並重構程式碼。
高效能樣式表
級聯和權重
重構樣式表，前提得先是你的改動符合優秀框架的特點。要對瀏覽器的表現形式 級聯有深刻的理解。
• style
• id選擇器
• class類選擇器
• 型別選擇器
• !important
要紮實的理解上面樣式的層疊樣式覆蓋關係，懂得計算層級特指度（權重）。
本文所說的特指度（specificity）： 特指度表示一個css選擇器表示式的重要程度，可以通過一個公式來計算出一個數值，數越大，越重要。
優質的CSS
1、保持選擇器的簡單；瀏覽器是從右向左匹配選擇器的，所以避免層級過深。
/* bad */
div nav ul li a
/* good */
div a
複製程式碼2、分離CSS和JS；由於JS和CSS兩者都依賴於HTML元素的類和ID。所以應避免兩者的混亂，區別兩者的職能。JS中使用的類和ID，不應該在用來為元素新增樣式。
<div class="chenrf J_name"></div>
document.querySelector('.J_name')
複製程式碼3、合理的利用盒子模型；盒子模型有兩屬性：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檔案
策略
1、刪除殭屍程式碼。既然重構就儘可能的把一些存在但沒有使用的程式碼剔除
2、分離CSS和JS。跟上面講的一樣，為元素新增樣式的類和ID不應該在JS中用做選擇器
3、刪除冗餘的ID。頁面中的ID具有唯一性，且特指度最高，故重構時應降低更精確選擇器的特指度。
4、定義可複用的元件。把網站中一些常用的樣式介面元件化，精簡重複的CSS
5、隔離面相特定的瀏覽器樣式。瀏覽器之間存在差異，因此我們會在CSS中使用一些 “hack” 針對特定瀏覽器做調整。
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->
複製程式碼經常策略性針對的衡量重構，以便能夠更小更可控的模組釋出你的程式碼改動。