我們開門見山：編寫優(yōu)秀的 CSS 代碼是件十分痛苦的事情。很多開發(fā)人員都不想做 CSS 開發(fā)。你讓我干什么都行，但是 CSS 還是算了吧。

在我創(chuàng)建應(yīng)用的時候，從來都無法從 CSS 中享受到樂趣。但是你也躲不過去，是不是？我是說，我們?nèi)褙炞⒂谟脩趔w驗，但是如今設(shè)計也是不容忽視的部分。

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

今天我的目的是：讓你寫出更好的 CSS。我想讓你回顧一下舊項目，然后想一想：天啊，我怎么會寫這樣的東西？

但是，你可能會想：好，你說的很對，但是 CSS 框架呢？CSS 框架就是為了幫助我們寫出更好的 CSS 代碼，不是嗎？

當(dāng)然，但是 CSS 框架也有一些缺點：

• 它經(jīng)常會使用平淡無奇的設(shè)計。
• CSS 框架使得定制很困難，更不用說超越框架了。
• 在使用之前，你必須先學(xué)習(xí)如何使用它們。

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

注意：這篇文章不是關(guān)于如何設(shè)計漂亮的應(yīng)用。本文是關(guān)于如何寫出便于維護的 CSS 代碼以及如何組織代碼。

SCSS

我將在我的例子中使用 SCSS。

SCSS 是一個 CSS 的預(yù)處理器。從根本上來說，它是一個 CSS 的超集：它增加了一些很酷的功能，例如變量，嵌套，導(dǎo)入和混入（mixins）等。

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

變量

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

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

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

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

// Declare a variable

$primary-color: #0099ff;

// References a variable

h1 {

color: $primary-color;

}

嵌套

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

h1 {

font-size: 5rem;

color: blue;

}

h1 span {

color: green;

}

可以寫成：

h1 {

font-size: 5rem;

color: blue;

span {

color: green;

}

}

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

分塊與導(dǎo)入

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

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

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

// _animations.scss

@keyframes appear {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

}

// header.scss

@import "animations";

h1 {

animation: appear 0.5s ease-out;

}

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

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

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

如果你想了解更多信息，請查看相應(yīng)的文檔（https://sass-lang.com/guide）。文檔寫得很好，且易于理解。

組織 CSS 代碼：BEM 方法論

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

我們常常不知道如何命名。然而命名很重要。假如你正在構(gòu)建某個應(yīng)用，并且由于某種原因不得不將其擱置數(shù)月，那該怎么辦？還有更糟的，假如有人想把項目拿回去，該怎么辦？如果你的 CSS 代碼沒有恰當(dāng)?shù)拿敲凑б豢瓷先ズ茈y明白你在說什么。

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

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

塊

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

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

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

元素

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

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

修飾符

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

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

注意事項

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

示例

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

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

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

融會貫通

下面的示例演示了 BEM 的功能（https://codepen.io/thomlom/pen/RJvVdQ）。

組織 CSS 文件：7-1模式

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

為此，讓我們了解一下 7-1 模式。

你可能會想，我從未聽過這種模式。

相信我，這很簡單。你必須遵守以下兩條規(guī)則：

1. 將所有內(nèi)容分別寫入7個不同的文件夾中。
2. 將它們?nèi)繉?dǎo)入位于根級別的 main.scss 文件中。僅此而已。

7 個文件夾：

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

主文件

你需要將以上所有內(nèi)容導(dǎo)入到該文件中。

@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;

...

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

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

然后，你有兩個選擇：

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

sass/

_animations.scss

_base.scss

_buttons.scss

_header.scss

...

_variables.scss

main.scss

你可以隨便選。

你可能會想：你說服了我！但是我該如何使用呢？我是說，哪些不支持scss文件的瀏覽器該怎么辦呢？

說的好！這是我們的最后一步，我們現(xiàn)在就來學(xué)習(xí)如何將SCSS編譯為CSS。

從 SCSS 到 CSS

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

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

它的 CLI（命令行界面）相當(dāng)容易使用：

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

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

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

如果你是一個好奇心很重的人（我希望如此，因為開發(fā)人員應(yīng)該好奇！）那么，請點擊這里查看完整的文檔（https://github.com/sass/node-sass#command-line-interface）。

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

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

touch index.html

mkdir -p sass/{abstracts,base,components,layout} css

cd 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 標(biāo)簽內(nèi)：

<!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>

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

補充

添加實時重新加載

你可能希望添加實時重新加載以提高工作效率，而無需手動重新加載本地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",

},

...

}

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

添加自動前綴

我們設(shè)置好了開發(fā)工具，太棒了！現(xiàn)在，讓我們來談?wù)剺?gòu)建工具，特別是：自動前綴（Autoprefixer）。

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

實際上，在構(gòu)建網(wǎng)站時，你可能會使用一些并非所有瀏覽器都完全支持的新功能。因此，提供商方案可以提供對這些功能的支持。

以下是一個示例：

-webkit-animation-name: myAnimation;

-moz-animation-name: myAnimation;

-ms-animation-name: myAnimation;

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

那么我們?nèi)绾斡酶斆鞯貥?gòu)建CSS呢？

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

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

• 添加兩個依賴項，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"

...

}

現(xiàn)在當(dāng)你運行 npm run build 時，可以生成經(jīng)過壓縮的 CSS 代碼，并且添加了提供商前綴！太棒了是不是嗎？

但是你知道更酷的是什么嗎？我為你設(shè)置了一個代碼倉庫（https://github.com/thomlom/scss-boilerplate），以幫助你迅速開始：）

如果你想知道我是如何在項目中應(yīng)用這些技術(shù)的，請點擊這里查看我的代碼倉庫（https://github.com/thomlom/portfolio）和結(jié)果（https://thomlom.github.io/portfolio/）。我希望你能通過這些例子更深入理解。

呼～，今天就說這么多！現(xiàn)在，你已準(zhǔn)備好可以開始編寫具有可維護性、模塊化和可重用性的 CSS 代碼了。

我希望你喜歡這篇文章。歡迎在下方留言分享你的想法。

原文：https://medium.freecodecamp.org/how-to-get-better-at-writing-css-a1732c32a72f

作者：homas Lombart，軟件開發(fā)。

譯者：彎月，責(zé)編：屠敏

“征稿啦”

CSDN 公眾號秉持著「與千萬技術(shù)人共成長」理念，不僅以「極客頭條」、「暢言」欄目在第一時間以技術(shù)人的獨特視角描述技術(shù)人關(guān)心的行業(yè)焦點事件，更有「技術(shù)頭條」專欄，深度解讀行業(yè)內(nèi)的熱門技術(shù)與場景應(yīng)用，讓所有的開發(fā)者緊跟技術(shù)潮流，保持警醒的技術(shù)嗅覺，對行業(yè)趨勢、技術(shù)有更為全面的認知。

如果你有優(yōu)質(zhì)的文章，或是行業(yè)熱點事件、技術(shù)趨勢的真知灼見，或是深度的應(yīng)用實踐、場景方案等的新見解，歡迎聯(lián)系 CSDN 投稿，聯(lián)系方式：微信（guorui_1118，請備注投稿+姓名+公司職位），郵箱（guorui@csdn.net）。