編寫好的 CSS

已發表: 2016-10-17

我一直在努力學習新事物。但是，我也嘗試學習如何改進我已經做事的方式。在我的全職演出和客戶端項目中，我一直想要改進的是我的 CSS。在談到 CSS 時，我一直覺得自己非常出色，但我一直覺得它讀起來很亂，而且通常很難維護。

我一直在嘗試做的是找出什麼是好的、可讀的、可維護的 CSS。我想我已經想出了（並找到了）一些使這一切成為可能的方法。

問題

關於 CSS，有幾件事困擾著我。我最常見的煩惱是：

重複公共代碼
瀏覽器前綴
缺乏評論
超過合格的選擇器
糟糕的班級名稱

當涉及到我的個人項目時，我對我的代碼負全部責任。我很少評論我的 CSS，並且經常將其視為事後的想法。那是錯誤的。

很長一段時間以來，我認為我的類名是“語義的”，只是我在做事，所以沒有必要解釋代碼，或者小“黑客”或任何東西。

回到一個長期項目的代碼很快證明這個理論是非常錯誤的。

當談到工作中的代碼時，我不能承擔所有責任。事實上，部分問題在於參與其中的人數。目前我們的團隊中有 7 人曾在某個時候為我們的網站編寫過 CSS，另外還有 6-8 人來來去去。年。團隊中的每個成員都有不同程度的 CSS 知識和能力。

同樣，與長期項目的情況一樣，一些代碼是舊的。其中很多是 CSS3 之前的版本，或者是 5 年前的任何流行趨勢。在這兩種情況下，寫作時通常有不同的做事方式，在某些情況下，自然缺乏知識。

我還了解到，一些程序員會堅持認為他們的代碼是“自我記錄的”。如果你不熟悉這個術語，它的意思是“我的代碼沒有註釋”。

解決方案

雖然沒有什麼是完美的，但我相信我們可以做一些事情來改進我們的代碼。不久前，我發現了 Harry Roberts 的 CSS 指南。 Itt 信守“編寫健全、可管理、可擴展的 CSS 的高級建議和指南”的承諾。

註釋

雖然 CSS 指南給出了評論樣式的具體細節，但我個人只是嘗試加入一些東西來告訴我未來我的想法。我以一個代表標題的註釋開始每個組件，它們詳細說明了組件的意圖。

使用預處理器時，我將特定註釋設置為包含在 CSS 中或被預處理器跳過。我還在這部分工作，並試圖養成放東西的習慣，任何東西。

面向對象

面向對像是一種將大事分解成小事的編程範式。來自維基百科：

面向對象編程 (OOP) 是一種編程範式，它表示“對象”[…] 的概念，它們通常是類的實例，[並且] 用於相互交互以設計應用程序和計算機程序。

說到 CSS，我們稱之為面向對象的 CSS，或OOCSS 。基本概念將元素的結構與元素的皮膚分開。這意味著我們可以輕鬆地重用任何重複出現的設計模式，而不必同時重用特定的實現細節。 OOCSS 非常注重代碼的重用，這使我們更快，並且可以減小代碼庫的大小。

我想到了骨骼等結構方面；提供稱為object的構造的通用框架。這些對像是簡單的設計模式，沒有任何化妝品。我們從一組組件中抽像出結構以獲得通用對象。

然後，我們可以選擇將“皮膚”層添加到我們的結構中，以便我們可以為抽象賦予特定的外觀和感覺。例如（取自 CSS 指南）：

 /**
 * 一個簡單、無設計的按鈕對象。 使用 `.btn--*` 皮膚擴展此對象
 * 班級。
 */
.btn {
    顯示：內聯塊；
    填充：1em 2em；
    垂直對齊：中間；
}

/**
 * 正面按鈕的皮膚。 擴展`.btn`。
 */
.btn--陽性{
    背景顏色：綠色；
    白顏色;
}

/**
 * 負按鈕的皮膚。 擴展`.btn`。
 */
.btn--負{
    背景顏色：紅色；
    白顏色;
}

在這裡，我們看到.btn類如何簡單地為元素提供結構，但與裝飾無關。我們可以使用第二個類擴展.btn ，例如.btn--positve以賦予該元素更具體的樣式：

 <button class="btn btn--positive">確定</button>

我更喜歡在我的 HTML 中使用多個類，而不是在預處理器中使用@extend類的東西。這讓我在我的 HTML 中有更多的可見性，讓我可以快速查看哪些類應用於我的元素。這也意味著我的類沒有與我的 CSS 中的其他樣式緊密綁定。它有助於 OOCSS 遵循封裝的概念。

邊界元法

BEM （塊、元素、修飾符）是 Yandex 開發的一種前端方法。 BEM 實際上是一個非常完整的方法論，老實說我還沒有深入研究所有細節，但我關心的只是命名約定。

我正在使用類似 BEM的命名約定。概念是相同的，但確切的語法可能略有不同。

BEM 將課程分為三組：

塊：組件的根或基
元素：塊內的組件
修飾符：塊的變體或擴展

一個非常基本的類比（不是示例）：

 。狗 {}
.dog__tail {}
.dog--小{}

元素用兩個下劃線 (__) 分隔，修飾符用兩個連字符 (-) 分隔。

在上面的類比中，我們看到.dog是塊，元素的根。然後， .dog__tail是一個元素，它是.dog塊的較小部分。最後， .dog--small是修飾符，是.dog塊的特定變體。您還可以將修改器應用於元素。例如，我們可以再次使用.dog__tail--short來指定dog__tail元素的變體。

在某些情況下，我可能需要多個詞來表示塊、元素或修飾符。在任何情況下，這些都用一個連字符 (-) 分隔，並且類總是用小寫字母書寫。

預處理器

我一直在花時間在我的工作流程中使用 CSS 預處理器，到目前為止，它非常有價值。 CSS 預處理器採用預處理語言編寫的代碼並將它們轉換為良好的舊 CSS。它們不是CSS，這意味著它們不受 CSS 的相同規則和限制的約束。雖然 CSS 很棒，但它並不總是能讓我們輕鬆地做我們想做的事情。

例如，在 CSS 中非常棒的一件事是variables 。也許您希望某個元素的左邊距與另一個元素的寬度相同，突然有人決定這些數字需要更改。由於它們是相同的數字，並且您的佈局可能依賴於該數字，因此您必須更改多個位置。但是使用變量，您可以只在一個地方更改它並讓它反映在整個佈局中。當然，預處理器不僅僅是變量，還有很多，但這是一個開始！

您顯然不必使用預處理器，但我認為您會發現大多數使用預處理器的人不會回去。我知道我不會。靈活性的提高和可讀性的提高是我不能放棄的。僅僅能夠使用變量和 mixins 就足以讓我著迷。

有幾個可用的預處理器，但我真正看過和使用過的只有兩個是LESS和SASS 。請看一下，並考慮將其中一個添加到您的工作流程中，您將不會回頭。

結束語

我的真正觀點是，CSS可以更好。一切都可以變得更好。最近有人在 Reddit 上的一篇帖子的評論中告訴我“CSS 沒有語義”。我完全不同意。毫無疑問，CSS 100%可以是語義化的。

事實上，使用 OOCSS 和 BEM 確實為您的 CSS 賦予了非常語義化的含義。這並不意味著它一開始就很容易，但它非常值得探索。將其與 CSS 預處理器結合起來，您就有可能獲得非常易讀、可維護和可擴展的 CSS 。

我還想指出，這不僅使您的 CSS（無論是否經過預處理）更具可讀性，而且通過將語義類名稱應用於元素，還使您的 HTML 更具可讀性。

TL;博士

好吧，也許這很多——總而言之，通過這樣做來編寫更好的 CSS：

面向對象的 CSS ：

每個班級都做一件事——做得好，做得對

塊、元素、修飾符 (BEM) 樣式類名稱：

塊： .grid
元素： .grid__item （2 個下劃線）
修飾符： .grid--wide （2 個連字符）

預處理器很棒：

看看它們：LESS – SASS
或查找其他：8 個 CSS 預處理器以加快開發時間