編寫更好的 CSS

08-22

編寫更好的 CSS

來自專欄極光日報11 人贊了文章

注意：本文並不會教你設計出漂亮的應用，而是如何編寫可文虎的 CSS 代碼。

當項目開始的時候，我們編寫了一系列的 CSS selector： .title input #app，並且一切正常。隨著功能的增加，CSS 變得越來越複雜，你開始寫出這樣的 CSS 選擇器 div#app .list li.item a ，並且你還要寫出類似這樣甚至更複雜的 CSS 選擇器，這個時候代碼可讀性非常的差。當你需要修改某個地方的時候往往還會影響到其他的地方，特別是修改別人寫的 CSS 的時候。。

當然你可能會覺得使用 CSS 框架已經能夠很好的處理這些問題，但是這還是有一些問題：

使得設計變得平庸。
定製框架沒有提供的功能可能很困難。

SCSS

SCSS 是 CSS 預處理器。基本上，他是 CSS 的超集：它增加了一些很酷的功能，如變數、嵌套、import 和 mixins。

變數

SCSS 運行我們使用變數，這最大的好處是重用代碼。例如：

你有一個應用，應用的主基調是藍色，所以很多地方都會將顏色設置為 blue。這個時候設計師有個需求，想要將主基調換成修改成紅色，我們只能在用到 blue 的地方挨個修改。有了變數我們就可以很好的解決這類問題。

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

嵌套

使用 CSS 選擇器表示 html 嵌套的兩個元素：

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

用 SCSS 現在可以表示成。

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

這樣和 html 有對應的關係可以直觀的看出個元素之間關係，可讀性很強。

代碼分離和 imports

工程複雜的時候，不可能將所有代碼放在一個大文件中。

在 SCSS 中我們可以直接導入「_」開頭的 .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;}

處理這些特點，SCSS 還提供了很多使用的特性，例如 mixins、繼承和其他指令(@for ,@if , …),如果想要了解更多可以參考文檔。

BEM 命名方法

BEM 不是具體的類庫，是一套命名的規則，目的是能夠通過類名來直觀標識元素的結構關係。

Block

BEM 試圖將整個用戶界面分成可重用獨立的部分，例如我們的應用可以分成三大部分：頭部、內容、腳步，這些部分就相當於塊（實際開發中可能會分的更細）。

我們可以給這些類這樣命名：.header .content 和 .footer

Elements

每個塊(block) 又可以細分成多個元素，例如 header 中包含很多元素：logo、搜索框。。

元素命名規則：塊名 + __ + 元素名（注意是雙下劃線）。

例如： .header__logo.header__search

Modifiers

最後如果還想給搜索框加上其他的 CSS 修飾，比如說應用主基調藍色，這樣我們就可以用修飾器來標識。

修飾的類命名規則為：塊類名/元素類名 + -- + 修飾器名。

例如： .head__search--blue.

注意：

如果你使用 BEM，只能使用 class，不能使用 id 和 tag。
Block/element 可以嵌套到其他的 Block/element 中，但是他們必須是相對獨立的。

一個完整的示例

我們以 Google 商城為例，思考如何組織裡面的元素。

組織 CSS 文件：7-1模式

我們將代碼成功分離後，現在要考慮如何組織 CSS 文件，這部分內容可以極大的提高你的工作效率。為此我們將了解 7-1 模式，非常簡單只有兩個規則：

將所有部分內容寫入 7 個不同的文件夾中。
將它們全部導入根文件 main.scss 中。

7 個目錄：

base:這個目錄放置你的模板代碼，模板代碼指的是每一次新建項目的時候都需要的 CSS 代碼，例如：動畫，工具類（margin-right-large, text-center）等等。
components:包含構建頁面的所有組件，如按鈕、表單、彈出框等等。
layout:用於頁面布局的不同部分，例如頁眉、頁腳和導航等等。
pages:有時需要實現一個特殊的頁面，你可以放置到這個目錄中。
themes:如果你的應用有不同的主題（例如：護眼模式、夜晚模式），可以放置到這個目錄中。
abstracts:將所有函數、變數和 mixins 放到這裡。
vendors:用於放置外部類庫，例如：Font awesome 文件或 Bootstrap。

main file

這個文件導入所有的 CSS 代碼。

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

這種架構適用於大型的，但是不適用於小型項目，所以這裡提供小型項目的版本：

首先不需要 venders 這個目錄，直接將所有的外部類庫用 header 的 link 導入。可以根據自己的需求將 themes、pages 移除。這樣就只剩 4 個目錄。

現在你有兩個選擇：

如果你想你的 CSS 代碼遵循 7-1 模式，也可以使用abstracts ,components ,layout和base 這四個目錄的結構。
可以將所有分離的代碼放到一個目錄中，看上去就像這樣：

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

一切取決於你。

從 SCSS 到 CSS

我們編寫的 SCSS 不能直接使用，瀏覽器不識別。還需要將 SCSS 文件轉換成 CSS 文件。

我們需要使用 node-sass 這個工具，來完成這部分工作。

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

有多種選擇，但是我們只使用兩種：

-w：監聽目錄或文件。這意味著當代碼中的任何更改時，它會自動編譯為CSS。在開發時非常有用。

--output-style：CSS文件的輸出是什麼。它可以是以下值之一：nested|expanded|compact|compressed。我們將使用它來構建您的CSS文件。

詳情可以參考文檔。

現在我們新建一個簡單項目來集成這一套開發環境。

創建工程：

mkdir my-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" }, ...}

在 index.html 中導入編譯後的 css 文件:

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

到這裡我們已經成功集成了 SCSS 開發環境。

原文：How to get better at writing CSS
推薦閱讀：好的 CSS 命名規範可以節約 Debug 時間

極光日報，極光開發者旗下媒體。

每天導讀三篇英文技術文章。