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 web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。