8 個幫助你編寫可維護、精簡化前端程式碼的 CSS 策略

寫基本的 CSS 和 HTML 是入門 Web 開發首先需要學習的事情之一。然而我遇到的很多程式顯然沒有真正的花時間去考慮前端開發的長期性和可維護性。

我認為這主要是因為很多開發者在組織他們的 CSS/HTML 和 JavaScript 時沒有深入地理解相關的策略。

對於我和我們團隊來說，最重要的事情寫可維護的前端程式碼。雖然我們有好幾個客戶一直合作多年，但一定要記住，你永遠不會是在某個應用程式的唯一開發者。你的一次性程式碼和配置僅僅對你有意義，這並不意味著它們對開發這個應用的下一任開發者有意義。

為了不讓本文太長，我今天會主要講述與組織 CSS 相關的內容。組織 JavaScript 有完全不同的做法。

本文的目標是至少成為一個規則，最好能成為你編寫 CSS 的指南。我會鼓勵你找到自己的處理方式，但這裡的目標是使 CSS 一致、簡單、易於使用。

這裡有 8 個技巧用來組織 CSS，使之便於長期維護。

1.不要寫不需要的樣式

例如：在任何地方寫 display:block 時都需要注意。因為許多元素預設都有這種樣式。

再比如，定義繼承了你定義過字型大小的元素的字型大小。

這裡的目標是雙重的：

• 減少 CSS 檔案的長度，這樣更容易在 CSS 檔案中定位程式碼位置。
• 明確 CSS 類實際需要做什麼，而不是定義一堆已有的垃圾樣式。

一個常見問題是有許多不再使用的 CSS 樣式沒有清理掉，為了簡潔起見，這些 CSS 樣式可以完全刪除。

2. 考慮把 CSS 當作可複用元件

如果你可以定義可複用的 CSS 工具和元件來使用而不是把 CSS 元素看作每個單頁特有的形式和元素，就會大大減少程式碼的複雜性。

寫可複用的類來做這樣一些事情：

• 確定你的設計在多個不同的頁面之間保持一致，你應該知道如果你改變了一個類的樣式，變化會表現在每一個頁面上。
• 這樣寫 CSS 確實很快。多數時候，如果你把部分樣式定義為一個工具或者類，你就不需要花大量的時間來更新和重建應用中已經存在於其它地方的樣式。

3. 在 CSS 中定義工具以使你的 CSS 更實用

我們將 ‘工具’ 定義為這樣一種 CSS 類，它是為某種特定的目標而生，而不是為了表示一整個元素。

在流程的 CSS 框架，比如 Bootstrap 和 Foundation 中，你會經常看到對這一策略的應用。

在流程框架中可以看到這樣一些例子：

比如，使用 .hide 之後，就不需要每次都寫一個類來隱藏頁面上的元素，你可以直接在元素上使用 .hide 類，它會賦於元素 display: none; 樣式。

我們已經建立了自己的工具檔案並在各個應用之間共用，我們使用一些公共工具來減少為每個元素寫特定樣式的需求。

關於這點，有一個不錯的例子，使用 margin 和 padding 工具。這裡我們有一個 padding 工具的示例（我們也定義了 margin 相關的工具，以及只有 padding-left 和 padding-right 的工具等）：

通過組合這些工具，我們可以保持空白畫素一致，同時快速為頁面做上標記，還不用寫大量的 CSS。

在定義工具的時候，你應該考慮到會多次使用它們。如果是一次性的樣式，或者只是想組合一些常用的樣式，那麼最好是定義成專門的 CSS 類。

4. 避免巢狀，除非你真的需要它

有一些核取方塊的表單。 在這個特定的情況下，你需要你的核取方塊內聯（並排）。

你要是試影象這樣寫你的風格：

你意識到你需要列表元素中的一個連結實際上是黑色的。 所以你試圖寫一個黑色連結的工具類：

這個.link – 黑色連結將被CSS的特殊性所覆蓋，並且將無法壓倒.my-form li風格。

這可能是您的意圖，現在要確保您的列表元素中的所有錨點標記是紅色的，但是你不知道未來的元素和可能做出的設計更改。

你可能會讀到這個問題，“好的 Corinne，但是你怎麼解決上面的問題呢？”

通過上面的例子，你應該明白錨標籤的顏色應該是一個遠離預設連結顏色的變體。

所以，在這種情況下，我會100％確定一個額外的工具類來處理紅色連結。所以這是一個在實踐中看起來像什麼的例子：

然後將其新增到HTML中的每個li元素。

我會在這裡作出這樣的假設：這個紅色的連結將在某一天在應用程式的其他地方被使用。 我不想將它嵌入到使用者表單中，因為那樣我就不得不在未來寫出另外一種風格來解釋需要紅色連結的情況。

另外，因為我將自己的懸停定義在自己的錨點上，所以紅色連結將會變成黑色懸停，而不必定義任何其他樣式。

5. 利用 BEM 來防止過多的巢狀

BEM (Block Element Modifier) 策略可以地真正防止過度巢狀。

使用 BEM 的一個例子是當你使用一個具有很多具體樣式的元件時，它會變得很複雜很混亂並且無法使用 utilitiy 。

舉個上述那樣的例子：

從這個例子中你可以看出，我定義的樣式表中 .profile__photo 是與 .profile 巢狀的，但是沒有使用巢狀的類。這就是 BEM 最厲害的地方，這也是為什麼我推薦使用 BEM 。

6. 只在不得已時使用 !important

在一個類上定義 !important 是一種使程式碼被有痛覆蓋的方法，特別是當你試圖處理 media 查詢時。

而且這對於移動端來說很麻煩。比如說，如果你希望在手機螢幕顯示某些內容，則必須使用另一個 !important 類來覆蓋 .hide 類以在移動裝置上顯示它。

我沒有找到一個合理的藉口來使用 !important ，除非你是在重寫別人之前放錯位置的 !important 類。

7. 有時候需要重新發明輪子，但請認真考量其他可行選項

在客戶端專案中構建自己的網格 CSS 框架，這就是一個重複造輪子的例子。

據我的經驗，除非你想知道它是如何工作的，否則自己寫這些東西並沒有多大的好處。出現過很多自己構建的邊緣案例，而且也沒有理由不去用別人已經做得很好且免費的東西。

也就是說，自己造一個輪子可能是一個很好的學習經驗 – 但這在應用生產中或許並不適用。

好吧，但 JavaScript 外掛呢？

在談論 JavaScript 或 jQuery 外掛時，我會說，對於那些與你使用的任何元件都很好整合的常見元件來說，情況也是如此。 這裡有一些例子，例如： JavaScript 轉盤之間交換照片，或日期選擇器。

這裡的邊緣案例可以使用一些帶有封裝元件邏輯（React，Ember，Angular等）的 JavaScript 框架外掛。 如果你想要做的事情相對簡單，有時可能比將這些外掛放到這些元件中更麻煩。

例如，如果我使用的是依賴於 jQuery 的專案，但是會在 React 中構建我自己的模組，那麼我將使用基礎模組或引導模組（僅僅是因為編寫元件以便通過引入 jQuery 插入到 React 元件中）。

8. 在乎你的前端程式碼

最後，我建議你做的最重要的事情是在乎你寫的前端程式碼，掌握程式碼，並且始終不斷地改進程式碼（同時也要不斷提升自己！）。

在一個需要長期維護的應用程式和一個很難上手且總是出問題的專案之間，我相信不斷改進程式碼是最大重要因素之一。

寫 CSS 時使用這八個技巧，你不僅可以節省你自己的時間，還能節省未來接手你程式碼的開發者的時間。

你採取哪一個建議來精簡你的 CSS 程式碼？請在下方評論，讓我知道你的選擇。