以前我們做重構，只是考慮如何將PSD轉換成HTML和CSS頁面。但往往這樣是不夠的，我們應該去考慮更多的事情。
比如說，我們應該去思考怎么和PD、用研、交互、程序等等打交道，考慮工程化等等。
可能有人會說，你站在臺上吹牛，可知民間疾苦。也有很多人可能更想知道，在手淘這樣一個高大尚的團隊怎么做重構？那么我們來看看一個簡單的示例。
如上圖所示，這不僅僅是在淘寶、手淘中有，估計只要是做Web的，都可能會碰到這個東東。相信你們的產品里也有這個東東。不同的產品、不同的業務線、不同的頁面都可能有。那么怎么做？
從示意圖，不難發現他們有一些共性：
* 嵌套
* 左邊是圖、右邊是文本
* 有按鈕
也發現他們有一些不同之處：
* 左邊的圖不一樣，有圓的、方的、大的和小的這些不確定因素
* 右邊的內容有單行的、多行的
* 標題有頂端對齊的、垂直居中的
* 右邊內容不固定
* 寬度不固定
上圖我是從淘寶頁面上截圖過來的代碼示意圖。或許你看到這樣的代碼之后，你也會搖頭說“這么優秀的團隊怎么也寫出這么差的代碼”？在任何一個優秀的團隊，都會有不同水平的人員。A工程師覺得上一部分代碼并沒有問題，然后B工程師覺得下部分代碼也是OK的。如此一來，就會有六種不同的結構，不同的樣式代碼。但對于一位"專業的"重構人員來說，他是沒有辦法接受的。
我們不仿仔細看看，不管哪一種風格，他都分為三個部分。如此一來整個結構就非常的清晰：
將左邊的圖和右邊的按鈕稱為`.media-object`，中間的標題或內容稱為`.media-body`。簡單的重構一下：
或許這個時候，現在這樣能滿足很多情景的需求了，其實再仔細想想，是不是真的就滿足了呢？比如說標題和頭像要垂直居，那么前面所做的是否能滿足需求呢？作為一位專業的重構，此時你就要去思考了，你寫的這個拿去出去以后，其他工程師用起來能不能得心應手。而且個性化又要如何處理。
這個時候或許會根據不同的產品添加不同的類名做細微化的樣式處理。而在這個過程中，我們僅是處理樣式的細微化，并不會對整個布局結構產生任何影響。
接下來一個新問題，其實它擴展性還不夠強大，在整個效果中，有的時候有最右邊的按鈕，有的時候又沒有。那么我們應該怎么辦？要不要動結構？或者我們添加新東西之后，這樣能不能實現？或者說能不能頂端對齊、垂直居中、底端對齊，這一切的問題有沒有更好的方法能實現？其實是有的，比如說現在討論較多的，也很火的Flexbox布局。當然這個很多團隊并不敢大膽的在項目中使用，必須受限于瀏覽器的兼容性。那么有沒有其他的方法呢？
除了Flexbox之外，其實還可以使用Flag Object。
正如上面代碼截圖所示，其實這個東東大家非常常見，但就不會往這上面去想。為什么不會往上面想呢？因為從前面走過來的人，都已經被兼容性給毒害了，思路就被兼容性限死了。其實事情是這樣？話說回來，我們目前還有多少人在兼容IE的低版本呢？既然不多，那我們的思路為什么又不能拓寬呢？
繼續往下探討，前面那部分工作，還是以前重構工程師做的事情，不管你的結構怎么變化，怎么優化，還是做著以前的事情：**將設計圖還原**。那我們有沒有考慮，我們是否也可以略思考一點工程上的事情，也就是說，雖然重構不懂工程，但也可以參與、去思考，哪怕不做高大尚的工程化，我們僅對CSS做點工程上的思考，難道這樣不可以？
將上在的示例分解一下，整個樣式分為兩部分`_media-layout.scss`和`_media-skin.scss`。并且通過Sass獨有的特性，將這兩個文件引入到`media.scss`文件。而其中`_media-layout.scss`只是負責布局上的樣式，而`_media-skin.scss`負責皮膚或細化上的樣式。
這里僅僅是提供一種思路，而這種思路是我自己親身經歷過的一件事情。接下來我在繼續思考，大家都在講Angular、React等。而對于一位不懂JS的人來說，這既是一件興奮又痛苦的事情。為什么這么說呢？看大家都在玩先進的東東，而且能做出很多有意思的東東，但對于不懂的同學來說，看著這些東東，也就是幾個字母，里面能干嘛，并不懂。
雖然我也不懂，但我在思考，我們是否可以做一個萬能的標簽。把剛才我們做的事情都通過這個標簽來完成。說到這個時候，很多人會想到Web組件化，比如Google的Polymer。而我們也有一個改造的Polymer，在這個基礎上，就算你不太懂JS，或許遵守一定的規則也能寫出一個類似這樣的標簽，做這樣的事情。
其實這些思考還不夠多，因為我們還需要面對很多事情，比如粒子如何管理？其實這件事情我以及我們的團隊都一直在探索，也一直還沒有完美的答案。只是希望我們不斷的探索之后，會有一個很好的答案與大家一起分享。
除此之外，我們考慮可復用性、可擴展性、可維護性和可定制性之外，未來的重構可做的事情不僅僅是這些。可以說任何你想做的事情你都可以做，任何前端工程師做的事情你都可以做。比如說，頁面的性能優化，可定制的工具化等等。
或許你還在糾結重構的存在的價值何在，那么價值是通過什么方式來向團隊或你的老板體現呢？其實很簡單，想辦法讓用戶爽，讓老板爽。最簡單用你的技術去做出成績，直接用錢體現出你存在的價值。
總而言之：**未來是美好的，道路是曲折的，現實是殘酷的，加油吧!!!**
