編寫優秀的 css 代碼是件十分痛苦的事情。很多開發人員都不想做 CSS 開發。你讓我干什么都行，但是 CSS 還是算了吧。

在我創建應用的時候，從來都無法從 CSS 中享受到樂趣。但是你也躲不過去，是不是？我是說，我們全神貫注于用戶體驗，但是如今設計也是不容忽視的部分。

項目剛開始的時候，一切都很美好。你有一些 CSS 選擇器，諸如 .title、input、#App 等等，非常簡單。但是隨著應用逐漸變大，CSS 也越來越糟。你對 CSS 選擇器感到困惑。你會發現自己寫了一些 div#app .list li.item a 之類的東西。然后你一遍又一遍地寫相同的代碼。最后你把所有代碼都扔到文件末尾，因為你根本不在乎，CSS 爛透了。結果你得到了 500 行根本無法維護的 CSS 代碼。

我本人經常和 CSS 苦苦糾纏。

今天目的是：讓你寫出更好的 CSS。我想讓你回顧一下舊項目，然后想一想：天啊，我怎么會寫這樣的東西？但是，你可能會想：好，你說的很對，但是 CSS 框架呢？CSS 框架就是為了幫助我們寫出更好的 CSS 代碼，不是嗎？

當然，但是 CSS 框架也有一些缺點：

• 它經常會使用平淡無奇的設計。
• CSS 框架使得定制很困難，更不用說超越框架了。
• 在使用之前，你必須先學習如何使用它們。

既然你關注了這篇文章，那么你一定有自己的原因，對不對？好了，廢話不多說，讓我們開始學習如何寫出更好地 CSS 代碼。

注意：這篇文章不是關于如何設計漂亮的應用。本文是關于如何寫出便于維護的 CSS 代碼以及如何組織代碼。

1. SCSS

將在下面例子中使用 SCSS。SCSS 是一個 CSS 的預處理器。從根本上來說，它是一個 CSS 的超集：它增加了一些很酷的功能，例如變量，嵌套，導入和混入（mixins）等。

下面介紹一些我們即將使用的功能。

變量

你可以在 SCSS 中使用變量。主要的好處在于可重用性。我們假設你的應用有一組顏色。主色是藍色。

那么你處處都用到了藍色：按鈕的 background-color（背景色），標題和鏈接的 color（顏色）。藍色無處不在。

突然有一天，你不喜歡藍色，開始喜歡綠色。

• 如果沒有變量：你需要修改所有包含藍色設置的代碼。
• 如果使用了變量：你只需要修改這個變量。

// Declare a variable$primary-color: #0099ff; // References a variableh1 { color: $primary-color;}

嵌套

你可以在 SCSS 中使用嵌套。那么如下代碼：

h1 { 
 font-size: 5rem; 
 color: blue;
} 
h1 span { 
 color: green;
}

可以寫成：

h1 { 
 font-size: 5rem; 
 color: blue; 
 span { 
 color: green; 
 }
}

可讀性更好了，是不是？你可以利用嵌套在更短時間內寫出復雜的選擇器。

分塊與導入

從可維護性和可讀性的角度來說，你無法將所有代碼都保存在一個大文件中。在實驗或構建小型應用時，這種做法尚且可行，但是到了專業的級別……想都不要想。很幸運的是，有了 SCSS 后，我們依然可以繼續沿用這種做法。

你可以通過使用前下劃線給文件命名，來創建分塊的文件：_animations.scss，_ base.scss，_variables.scss 等。

至于導入，你可以使用 @import 指令。例如，你可以這么做：

// _animations.scss
@keyframes appear { 
 0% {opacity: 0;} 
 100% {opacity: 1;}
}
// header.scss
@import "animations";
h1 { 
 animation: appear 0.5s ease-out;
}

哈哈！你可能想，你在這里犯了一個錯誤！應該是 _animations.scss，而不是 animations;)

非也。如果你使用這種命名方式，聰明的 SCSS 知道你指的是分塊文件。

關于變量、嵌套、分塊和導入，我們需要了解的就這么多。SCSS 還有很多其他功能：比如混入、繼承和其他指令（@for，@if，等等），在此不做一一介紹了。

2. 組織 CSS 代碼：BEM 方法論

我記不清曾經多少次在CSS類中使用包攬一切的名字了。比如：·.button·、·.page-1·、·.page-2·、·.custom-input·。

我們常常不知道如何命名。然而命名很重要。假如你正在構建某個應用，并且由于某種原因不得不將其擱置數月，那該怎么辦？還有更糟的，假如有人想把項目拿回去，該怎么辦？如果你的 CSS 代碼沒有恰當的命名，那么乍一看上去很難明白你在說什么。

BEM 可以幫助我們解決這個問題。BEM 是一種命名約定，是英文 Block Element Modifier（塊元素修飾符）的縮寫。

這種方法可以使我們的代碼結構化，并提高模塊化和可重用性。現在讓我們說一說什么是塊、元素和修飾符。

塊

你可以把塊視為組件。還記得你小時候玩過樂高積木嗎？讓我們回憶一下小時候。

如果需要建造一個簡單的房子，你會怎么做？你需要一個窗戶，一個屋頂，一扇門和一些墻壁。這些就是我們的塊。它們有著本身的意義。

• 命名：塊名：.block
• 示例：.card、.form、.post、.user-navigation

元素

接下來，你應該如何用你的樂高積木建造一個窗口呢？可能有些積木看起來像框架，如果你把四個這樣的積木組裝起來，就會得到一個漂亮的窗戶。這些就是我們的元素。它們是塊的一部分，它們對于建塊必不可少。但是，在塊外面的時候，它們便無用武之地。

• 命名：塊名+ __ +元素名：.block__element
• 示例：.post__author、.post__date、.post__text

修飾符

現在窗戶已經建好了，但是你可能想要一個綠色或一個小窗戶。這些我們稱之為修飾符。它們是塊或元素上的標志，它們用于改變行為，外觀等等。

• 命名：塊名稱或元素名稱+ -- +修飾符名稱：.block__element--修飾符，.塊--修飾符
• 示例：.post--important，.post__btn--disabled

注意事項

• 在使用 BEM 的時候，你可以用且只能用類來命名。不能用 ID，不能用標簽。只能用類。
• 塊和元素可以嵌入其他塊和元素，但是它們必須是完全獨立的。請記住：獨立。所以如果你想將把一個按鈕放在標題下的話，就不要在按鈕上加邊距，否則按鈕就會與標題綁定。請改用工具類。
• 是的，你的 html 文件會超負荷，但是不用擔心，與 BEM 帶來的好處相比，這只是個小小的缺點。

示例

以下是一個練習。你可以去你最喜歡或最常用的網站，然后想想看哪些是塊、元素和修飾符。

例如，以下是我想象中的 google 商店：

Google 商店

現在該你了。認真想想哪些地方可以改進。與往常一樣，你必須自己搜索、實驗和構件，以便更好地滿足你的需求。

融會貫通

下面的示例演示了 BEM 的功能。

BEM 的功能

寫一個博文組件

博文組件

寫多個按鈕

3. 組織 CSS 文件：7-1模式

你還跟得上節奏嗎？很好！現在讓我們來介紹如何組織 CSS 文件。這個部分可以真正幫助你提高工作效率，并幫助你立刻找到需要修改的 CSS 代碼。

為此，讓我們了解一下 7-1 模式。你可能會想，我從未聽過這種模式。相信我，這很簡單。你必須遵守以下兩條規則：

1. 將所有內容分別寫入7個不同的文件夾中。
2. 將它們全部導入位于根級別的 main.scss 文件中。僅此而已。

7 個文件夾：

• base：你可以將所有的樣板代碼放入該文件夾中。對于這里的樣板，我指的是：每次開始一個新項目時，你需要寫的所有CSS代碼。例如：排版規則、動畫、工具程序（對于工具程序，我指的是margin-right-large、text-center、...等類）等等。
• components：這里指組件。這個文件夾包含所有用于構建頁面的組件，例如按鈕、表單、滑塊、彈出窗口等等。
• layout：頁面不同部分用到的布局，也就是說：頁眉、頁腳、導航、分區、你自己的網格等等。
• pages：頁面。有的頁面可能有特定的樣式，與通常的處理方式不同。那么你可以將它放入該文件夾。
• themes：主題。如果你的應用中有不同的主題（黑暗模式、管理員等等），那么可以將它們放入該文件夾。
• abstracts：抽象。你可以將所有函數和變量與混入（mixin）放在這里。簡而言之，就是你所有的幫手。
• vendors：外部資源。應用或項目怎么可能沒有外部的庫呢？你可以將所有不依賴于你的文件都放入該文件夾。例如，你可以放入Font Awesome文件、Bootstrap和其他類似的東西。

主文件

你需要將以上所有內容導入到該文件中。

@import abstracts/variables;
@import abstracts/functions;
@import base/reset;
@import base/typography;
@import base/utilities;
@import components/button;
@import components/form;
@import components/user-navigation;
@import layout/header;
@import layout/footer;
...

我知道你覺得以上內容有點太多，一時難以接受。這個架構適合于大型項目，而非小項目。下面我們介紹一種更適合小項目的做法。

首先，你不需要 vendors 文件夾。可以將所有外部 CSS 代碼放在頭部的link標簽內。接下來，如果你的應用只有一個主題的話，可以省略 themes 文件夾。最后，你可能不會有大量頁面特定的風格，所以也 pages 也沒必要。好了，現在只剩下 4 個文件夾了。

然后，你有兩個選擇：

1. 你可以按照7-1模式組織CSS代碼，那么你需要留下abstracts、components、layout 和 base 文件夾。
2. 你想將所有的分塊文件和 mail.css 放在一個大文件夾內，那么你會得到如下結構：

sass/ 
 _animations.scss 
 _base.scss 
 _buttons.scss 
 _header.scss 
 ... 
 _variables.scss 
 main.scss

你可以隨便選。

你可能會想：你說服了我！但是我該如何使用呢？我是說，哪些不支持scss文件的瀏覽器該怎么辦呢？說的好！這是我們的最后一步，我們現在就來學習如何將SCSS編譯為CSS。

4. 從 SCSS 到 CSS

首先，你需要 Node.js 和 NPM（或 Yarn）。

我們將使用一個名為 node-sass 的包，它可以讓我們將 .scss 文件編譯為 .css 文件。

它的 CLI（命令行界面）相當容易使用：

node-sass <input> <output> [options]

它有多個選擇，但我們只使用其中兩個：

• -w：監視目錄或文件。這意味著node-sasswaits在時刻監督你的代碼是否發生改動，一旦出現發生，它就會自動編譯成CSS。這在開發時非常有用。
• --output-style：CSS文件的輸出內容。它的值可以是：嵌套、展開、緊湊、壓縮。我們將使用它來構建你的CSS文件。

如果你是一個好奇心很重的人（我希望如此，因為開發人員應該好奇！）那么，請點擊這里查看 完整的文檔。

現在我們知道需要用哪些工具。其余的工作更簡單。只需按以下步驟操作：

• 創建項目：mkdirmy-app && cd my-app
• 初始化：npm init
• 添加node-sass庫：npm install node-sass --save-dev
• 創建文件夾，index.html和main.scss文件：

touch index.htmlmkdir -p sass/{abstracts,base,components,layout} csscd sass && touch main.scss

• 將這些腳本加入到package.json文件中：

{ 
 ... 
 "scripts": { 
 "watch": "node-sass sass/main.scss css/style.css -w", 
 "build": "node-sass sass/main.scss css/style.css --output-style compressed" 
 }, 
 ...
}

• 將包含編譯好的 CSS 文件的連接加入到 index.html 文件的 head 標簽內：

<!DOCTYPE html>
<html lang=”en”>
 <head> 
 <meta charset=”UTF-8"> 
 <meta name=”viewport” content=”width=device-width, initial-scale=1.0"> 
 <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> 
 <link rel=”stylesheet” href=”css/style.css”> 
 <title>My app</title>
 </head>
 <body> 
 <h1 class=”heading”>My app</h1>
 </body>
</html>

然后就可以了，你準備好了！你可以在編程的時候運行npm run watch，并在瀏覽器中打開index.html文件。如果你想縮小CSS，只需運行npm run build。

5. 補充

添加實時重新加載

你可能希望添加實時重新加載以提高工作效率，而無需手動重新加載本地index.html文件。

你可以按照以下簡單的步驟操作：

• 安裝live-server軟件包：npm install -g live-server。注意：它是一個全局包。
• 將npm-run-all添加到項目依賴項中：npm install npm-run-all --save-dev：有了它我們就可以同時運行多個腳本。
• 將這些腳本添加到package.json：

{ 
 ... 
 "scripts": { 
 "start": "npm-run-all --parallel liveserver watch", 
 "liveserver": "live-server", 
 "watch": "node-sass sass/main.scss css/style.css -w", 
 }, 
 ...
}

現在如果你運行 npm run start，就可以立即看到代碼的變更。

添加自動前綴

我們設置好了開發工具，太棒了！現在，讓我們來談談構建工具，特別是：自動前綴（Autoprefixer）。

它是一個工具（尤其是postcss插件），它可以解析CSS，并利用這些值（https://caniuse.com/）將提供商的前綴加入到CSS規則中。

實際上，在構建網站時，你可能會使用一些并非所有瀏覽器都完全支持的新功能。因此，提供商方案可以提供對這些功能的支持。以下是一個示例：

-webkit-animation-name: myAnimation;
-moz-animation-name: myAnimation;
-ms-animation-name: myAnimation;

你可能會想，這寫起來太乏味了。這就是為什么我們需要自動前綴來幫助我們的CSS代碼獲得瀏覽器的兼容，而不用增加額外的復雜性。

那么我們如何用更聰明地構建CSS呢？

1. 將所有的SCSS文件編譯成一個主CSS文件。
2. 使用自動前綴為CSS文件添加前綴。
3. 壓縮CSS文件

還有最后幾步，請堅持看下去，馬上就結束了。

• 添加兩個依賴項，postcss-cli和autoprefixer：npm install autoprefixer postcss-cli --save-dev
• 修改build腳本，并將這些腳本添加到 `package.json：

{ 
 ... 
 "scripts": { 
 "start": "npm-run-all --parallel liveserver watch", 
 "liveserver": "live-server", 
 "watch": "node-sass sass/main.scss css/style.css -w", 
 "compile": "node-sass sass/main.scss css/style.css", 
 "prefix": "postcss css/style.css --use autoprefixer -o css/style.css", 
 "compress": "node-sass css/style.css css/style.css --output-style compressed", 
 "build": "npm-run-all compile prefix compress" 
 ...
}

現在當你運行 npm run build 時，可以生成經過壓縮的 CSS 代碼，并且添加了提供商前綴！太棒了是不是嗎？但是你知道更酷的是什么嗎？這里為你設置了一個代碼倉庫，以幫助你迅速開始：）

如果你想知道我是如何在項目中應用這些技術的，請點擊這里查看 代碼倉庫 和 結果。希望你能通過這些例子更深入理解。現在，你可以準備開始編寫具有可維護性、模塊化和可重用性的 CSS 代碼了。