編寫優秀 CSS 程式碼的 8 個策略

本文由碼農網 – 小峰原創翻譯，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

編寫基本的CSS和HTML是我們作為Web開發人員學習的首要事情之一。然而，我遇到的很多應用程式顯然沒有人花時間真正考慮前端開發的長久性和可維護性。

我認為這主要是因為許多開發人員對組織CSS / HTML和JavaScript的策略缺乏深刻的理解。

在我和我們團隊的觀念中，編寫可維護的前端程式碼非常重要。儘管我們有一些使用了多年的客戶端，但要記住你永遠不會是唯一一個工作於應用程式的人。僅僅因為你的一次性元素和配置對你有意義，並不意味著它們對下一個可能繼承應用程式的人有意義。

為了防止這篇文章太長，我今天將主要討論CSS程式碼。JavaScript程式碼是另一個完全不同的棘手問題。

這篇文章的目的不在於規則手冊，而在於你正在編寫CSS時的指南。希望能幫助大家找到自己的流程，而這篇文章的目標是讓你的CSS一致，簡單，易於使用。

下面是8個保持CSS有條理和易於長期維護的祕訣。

1.不要寫不需要的樣式定義

例如：編寫display:block;時要注意，因為很多元素預設有這個樣式。

另一個例子是在元素上定義字型大小，它將繼承你正在定義的正文字型大小。

目標是雙重的：

• 減少CSS檔案的長度，以便瀏覽。
• 明確你的CSS類需要做什麼，而不是定義一堆已經產生的垃圾。

這裡有一個常見問題是CSS沒有清理乾淨，此時，為了簡潔起見，可以完全刪除。

2.將CSS看作可重用元件

不要將CSS元素視為每個單獨頁面上的特定表單或元素，如果你可以定義可重用的CSS實用程式和元件以供自己使用，則可以減少很多複雜性。

編寫旨在重用的類的作用：

• 確保你的設計在不同的頁面之間保持一致。當你在很多頁面上共享CSS類時，你知道當你改變這個類時，它會在每一個出現的頁面發生改變。
• 這使得編寫CSS真的很快。首先，如果大多數樣式被定義為你所知道的實用程式和類，那麼你就不必花費大量時間重新整理和重新建立應用程式中已存在的樣式。

3.在CSS中定義實用工具來幹你的CSS

我們將’utilities’定義為一個CSS類，實際上它只用來做一件特定的事情，而不是封裝整個元素。

你會看到這個策略經常用於流行的CSS框架，如Bootstrap和Foundation。

在這些流行的框架中你所看到的一些例子是：

.hide { display: none; }
.text-center { text-align: center; }

例如，使用.hide，就不必每次想要在頁面上隱藏元素時就得編寫一個新的類——你只需要在你的元素上加上.hide類，它會使元素display: none; 。

我們寫了一些實用程式檔案，這些檔案在應用程式之間共享，使用一些常用的實用程式可以減少為每個元素編寫特定樣式的需求。

一個很好的例子是我們如何使用margin和padding實用程式。下面是padding實用程式的一個簡單例子：

.padding-0 { padding: 0; }
.padding-xxs { padding: 5px; }
.padding-xs { padding: 10px; }
.padding-sm { padding: 20px; }
.padding-md { padding: 30px; }
.padding-lg { padding: 40px; }
.padding-xl { padding: 50px; }
.padding-xxl { padding: 60px; }

通過結合使用這些工具，我們可以與我們間距的畫素數保持一致，並且可以快速標記頁面，而不必編寫非常多的CSS。

實用程式背後的理念是，你認為你可能會不止一次地使用它們。如果它是一次性樣式，或者如果你認為組合樣式會經常使用，那麼可能它作為CSS類將可以更好地工作。

4.除非絕對需要，否則避免巢狀

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

所以你試影像這樣寫樣式：

.user-form li a { color: red; }

然後在這過程中，你意識到你需要列表元素中的一個連結實際上是黑色的。所以你試圖為黑色的連結編寫一個工具類：

.link--black { color: black; }

此處.link–black連結將被CSS特殊性所覆蓋，並且將無法壓倒.my-form li a樣式。

現在你可能想要確保列表元素中的所有錨標記是紅色的，但是你不知道未來的元素會怎麼樣以及可能會對設計做出什麼樣的更改。

你可能會問，“好的親，那麼你怎麼解決上面的問題呢？”

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

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

a { 
  color: blue;
  &:hover {
    color: black;
  }
}
.link--red { color: red; }

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

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

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

5.利用BEM防止巢狀

能夠真正防止過度巢狀的一個策略是名為BEM（Block Element Modifier）的命名策略。

使用BEM的一個很好的例子就是當你有一個真正具體的樣式的元件時，如果使用實用程式會太麻煩和複雜的話。

這個例子看起來像這樣：

// HTML snippet
<div class=”profile”>
  <img src=”person.jpg” class=”profile__photo”/>
</div>
// BEM CSS
.profile {
  background-color: white;
  border: 1px solid #ccc;
}
.profile__photo {
  border-radius: 50%;
  border: 1px solid #000;
}

你可以從這個例子中看到，我可以從我的樣式表中看到.profile__photo巢狀在.profile中，然而實際上並不需要巢狀這個類。這真的是BEM最棒的地方，也是為什麼我建議使用它的原因。

6.只使用!inportant作為最後的手段

在一個類上放上!important定義會使得覆蓋程式碼變成一件令人頭痛的事情，特別是當你試圖處理媒體查詢時。

這是我在處理Foundation的某個版本遇到的一個令人頭痛的問題，因為他們決定對可見類打上!important。

這對於移動裝置也是一個痛苦的根源。例如，如果你希望手機螢幕顯示某些內容，則必須使用另一個!important類來重寫.hide類以顯示它。

我一直找不到使用!important的有效藉口，除了在別人錯誤使用!important定義的情況下。

7.重新發明輪子需要時間和精力，所以要慎重考慮

比如說在客戶端專案中建立自己的網格CSS框架，可能就是一個重新發明輪子的例子。

根據我的經驗，除非你想知道它是如何工作的，否則自己寫這些東西其實並沒有多大的好處。有許許多多的邊緣情況可以讓你自己動手編寫程式碼，所以為什麼不使用別人已經寫好的免費又能工作良好的程式碼呢？

也就是說，自己動手建立可能是一個很好的學習經驗——但這很可能不屬於生產應用程式的過程。

好的，那麼JavaScript外掛呢？

在談論JavaScript或jQuery外掛時，我要說的是，對於任何你使用的具有很好整合選項的真正常見元件來說，情況也是如此。其中的一些例子是照片輪播的JavaScript轉盤，或日期選擇器。

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

例如，我會使用立即可用的Foundation或Bootstrap模組，如果我正工作於依賴jQuery的專案，但是會在React中構建我自己的模組（只是因為編寫元件以便通過引入jQuery插入到React元件中會更容易）。

8.關注前端程式碼！

最後，我要向你建議的最重要的事情是，你得關注你為前端編寫的程式碼，掌握它，並持之以恆地改進它（統計提高自己！）。

我相信這是長期可維護的應用程式與難以處理的應用程式之間最大的區別因素之一。

通過遵循編寫CSS的八個技巧，你將為自己和未來繼承你的程式碼的開發人員節省時間和精力。

你遵循什麼準則來組織和精簡你的CSS？歡迎留言，共同進步。