讓我們開門見山：編寫優秀的 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 代碼以及如何組織代碼。

SCSS

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

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

變量

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

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

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

如果沒有變量：你需要修改所有包含藍色設置的代碼。

如果使用了變量：你隻需要修改這個變量。

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

}

}

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

分塊與導入

從可維護性和可讀性的角度來說，無法將所有代碼都保存在一個大文件中。在實驗或構建小型應用時，這種做法尚且可行，但是到了專業的級別……想都不要想。很幸運的是，有了 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，等等），在此不做一一介紹了。

如果你想了解更多信息，請查看相應的文檔（

組織 CSS 文件：7-1模式

現在讓我們來介紹如何組織 CSS 文件。這個部分可以真正幫助你提高工作效率，並幫助你立刻找到需要修改的 CSS 代碼。

為此，讓我們了解一下 7-1 模式。是不是從沒有聽過這個模式。

首先你必須遵守以下兩條規則：

將所有內容分別寫入7個不同的文件夾中。

將它們全部導入位於根級別的 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 個文件夾了。

然後，你有兩個選擇：

你可以按照7-1模式組織CSS代碼，那麼你需要留下abstracts、components、layout 和 base 文件夾。

你想將所有的分塊文件和 mail.css 放在一個大文件夾內，那麼你會得到如下結構：

sass/

_animations.scss

_base.scss

_buttons.scss

_header.scss

...

_variables.scss

main.scss

但哪些不支持scss文件的瀏覽器該怎麼辦呢？這是我們的最後一步，我們現在就來學習如何將SCSS編譯為CSS。

從 SCSS 到 CSS

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

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

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

node-sass [options]

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

-w：監視目錄或文件。這意味著node-sasswaits在時刻監督你的代碼是否發生改動，一旦出現發生，它就會自動編譯成CSS。這在開發時非常有用。

--output-style：CSS文件的輸出內容。它的值可以是：嵌套、展開、緊湊、壓縮。我們將使用它來構建你的CSS文件。

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

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

創建項目：mkdirmy-app && cd my-app

初始化：npm init

添加node-sass庫：npm install node-sass --save-dev

創建文件夾，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 標簽內：

My app

My app

然後就可以了，你準備好了！你可以在編程的時候運行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",

},

...

}

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

添加自動前綴

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

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

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

以下是一個示例：

-webkit-animation-name: myAnimation;

-moz-animation-name: myAnimation;

-ms-animation-name: myAnimation;

這就是為什麼我們需要自動前綴來幫助我們的CSS代碼獲得瀏覽器的兼容，而不用增加額外的複雜性。

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

將所有的SCSS文件編譯成一個主CSS文件。

使用自動前綴為CSS文件添加前綴。

壓縮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 代碼了。

來源：技術學派今日頭條號