切斷CSS與JavaScript的耦合

用來為元素指定樣式的類別與ID不應該在JavaScript中被用來選取元素，因為這樣就會產生相依性(dependency)，讓這些選擇器不容易被修改，也可能會造成JavaScript的錯誤。

切斷CSS與JavaScript的耦合並不難，...

以下因為沒存到草稿全沒了心好痛...
晚點再補上 我需要玩點遊戲來撫慰我受傷的心靈...QQ

切斷CSS與JavaScript的耦合並不難，先在JavaScript中找到選取元素的地方然後在選擇器前加上js-，在將選擇器加到定義元素的HTML裡頭即可。

拆分基底樣式

任何網站中的基底樣式應該最簡單的樣式，因為它們運用的是類型選擇器(type selectors)。
用CSS Dig分析過網站之後，Selectors面板會列出不少選擇器在何時與何處使用的資訊。

接著將基底樣式用分組的方法列出來：

• 標題<h1>~<h6>
• 文本<p>、<fig>、<code>
• 連結<a>
• 列表<dl>、<ol>、<ul>
• 表單<form>、<legend>、<fieldset>、<input>、<button>
• 表格<table>、<thead>、<tbody>、<tfoot>、<tr>、<rd>
• 媒體<audio>、<object>、<video>

知道這些選擇器的使用有多頻繁及其使用位置之後就可以對選擇器進行比較，找出最常使用的屬性。
若一個類型選擇器只會被單獨使用而且只出現一次，就可以放心的將它移除。
若類型選擇器被使用了很多次，就可以依照下列的步驟來處理：

1. 在基底樣式中替要進行重構的類型選擇器製作新的規則集。
2. 在所有選擇器中找出最常使用的屬性並且複製到新做好的規則集中。
3. 移除其他規則集中可繼承自新基底樣式的重複樣式。

移除多餘的ID

在CSS檔中，最具高特定度的選擇器會使用到ID。
在內含好幾個ID的選擇器中，可以先將最右側的ID與最左側的ID都先刪除，因為在任何頁面中，ID最多只會被用到一次，所以在選擇器中多寫的那幾個ID都是多餘的。

將ID轉成類別

多餘的ID被移除之後，其餘用到ID的選擇器可以轉而使用類別。
這種調整需要花一些時間，不過到最後所得到的CSS特定度會降低很多，而且很容易就可以在需要的地方複用。
在將ID轉成類別時要記得使用有意義的名稱。不要用隱晦不明或過於特定的名稱。

轉用類別後會發現某些元素的樣式因特定度降低而改變，若需要調整許多其他的選擇器才能解決一個特定問題，比較好的方法不是將ID變成類別，等到有特定度更高的樣式需要被重構成較低特定度時再來重構在部分的樣式碼吧。

拆分工具樣式

工具樣式是可運用!important例外的唯一樣式。
目的相同的應該要分成一組形成工具樣式。當CSS併接的時候工具樣式應該放在最後面，因此在合併檔案時要確保這些樣式排在正確的順序上。

不屬於工具樣式但用到!important例外的樣式，應該使用瀏覽器的開發者工具進行分析，判斷為何會這麼用。
分析後發現其實不需要用到!important則可以放心地將它移除。
若!important是用來覆寫繼承而來的樣式，那就別去動它並用註解寫下為什麼要在這裡使用它。
若!important所覆寫的樣式已重構過則可再回頭檢視這段樣式碼並進行重構，而且也可以放心地移除。

定義可複用組件

定義可複用組件(reusable components)也許是進行CSS重構時最棘手的工作之一，因為我們擔心有沒有在第一時間就將它弄對。
這種擔心是不必要的，即使沒有在一開始就完全100%做對，將來還是可以回過頭來將它改好。

定義可複用組件有助於移除重複的CSS，也有助於移除存留下來為元素指定樣式的重複ID。

移除行內CSS與過度模組化的類別

移除行內(inline)CSS與過度模組化的類別應該要同時進行，因為他們基本上是一樣的東西。除非寫在style屬性內的行內CSS屬性被!important例外所覆寫。否則它的特定度會比類別高出很多。
移除這兩種東西，應該晚點做而不要太早做。

按照本章所介紹的順序進行重構，至此應該…

• 有一到自己的方法能一致地將CSS架構好
• 不會留有太多廢碼
• 已將CSS與JavaScript的耦合切斷
• 已建置好基本樣式
• 已透過移除多餘ID並將ID轉成類別的方式將最高特定度降低
• 已將工具樣式拆分，並減少!important的使用
• 已定義可複用組件

接下來可以開始移轉行內樣式(如果還找的到的話)，在移除行內CSS之前需要將它暫時放在樣式表末，林時做出來的類別當中也許還要用!important來維持它的特定度。

若找到的是不再需要的樣式，將它移除或者是把他們移到樣式表中刺盪的位置。
同樣的，應該要檢查那些與基本及組件樣式不同的行內樣式，看看是不是因為設計或寫碼不一致所產生的。
如果是的話就可以放心的將該行內樣式移除，如果樣式的不同是刻意做出來的就應該透過元素的容器來使用該樣式。

隔離針對特定瀏覽器的CSS改裝

為了克服各個瀏覽器的限制所做的改裝(hacks)，很容易就會汙染到CSS，在隔離針對特定瀏覽器的改裝之前，要記得先檢查網站的使用情形，以判斷是否不在繼續支援該瀏覽器。
刪除瀏覽器的改裝很容易，也比將它重構成適當的樣式碼還要來得好。

成效評估

學習如何進行重構的方法後，瞭解如何對成效進行評估也是很重要的，這樣才能知道重構工作要達成哪些目標。

1. 網站壞了嗎？
   重構後衡量成效最快且最簡單的方法就是找出重構後變得不符合需求的樣式。
   切記，重構是在不 改變樣式行為的前提下進行重新寫碼的過程。
   先檢查外觀是否相同，若沒發現任何視覺回歸再開始檢查其他的面向。

2. 低耦合
   高品質的CSS與套用它的HTML應該要拆開來處理，製作出可複用組件與容器元素，將CSS與HTML間的耦合拆解掉。

3. 低特定度
   CSS特定度與規則集的順序決定了要套用到元素上的樣式。
   選擇器特定度是可以被估算且來判斷CSS碼庫中是否含有許多不容易維護且帶有高特定度之選擇器的衡量標準。

4. 檔案更少也更小
   在傳送CSS檔給使用者前，應該先經過併接與縮整。
   併接可以減少需下載的檔案數，縮整可以透過移除不必要之字元的方式來降低檔案的大小。
   這兩種方式都可以加快檔案的下載，能更快地載入網頁。

5. UI錯誤數
   開始進行CSS重構並運用寫碼準則之後，因雜亂或重複樣式碼所造成的UI錯誤數應該會越來越少。
   軟體難免會有臭蟲，可能由網站開發者錯造成，而且瀏覽器廠商也可能造成瀏覽器本身的問題，一但透過模版庫與視覺回歸測試這兩種有效的方法，就可以越快偵測並診斷出問題。

6. 省下開發與檢測時間
   將CSS有條理地組織成幾個檔案、建立編碼準則以及創建UI模版庫之後，建造並維護使用者介面的速度應該會比之前要來得快上許多。在大部分的情況下，都可以判斷開發時程是否因重構與強化工作流程而縮短。
   除了縮短開發時程之外，若使用正確的工具，檢測介面的速度也會變得更快。

本書心得

這本書真的點出不少我在剛接觸HTML與CSS時遇到的問題與狀況，受益良多
不過重構與觀念上的東西真的不是一下子就能轉換的，需要花點時間一次又一次地嘗試與修改
想要擁有優良架構要求的CSS並不困難!!