用 Notepad 或 TextEdit 來編寫 HTML

可以使用專業的 HTML 編輯器來編輯 HTML：

• Adobe Dreamweaver
• Microsoft Expression Web
• CoffeeCup HTML Editor

不過，我們同時推薦使用文本編輯器來學習 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。我們相信，使用一款簡單的文本編輯器是學習 HTML 的好方法。

通過記事本，依照以下四步來創建您的第一張網頁。

步驟一：啟動記事本

如何啟動記事本：

開始

所有程序

附件

記事本

步驟二：用記事本來編輯 HTML

在記事本中鍵入 HTML 代碼：

步驟三：保存 HTML

在記事本的文件菜單選擇“另存為”。

當您保存 HTML 文件時，既可以使用 .htm 也可以使用 .html 擴展名。兩者沒有區別，完全根據您的喜好。

在一個容易記憶的文件夾中保存這個文件

步驟四：在瀏覽器中運行這個 HTML 文件

啟動您的瀏覽器，然后選擇“文件”菜單的“打開文件”命令，或者直接在文件夾中雙擊您的 HTML 文件。

結果應該類似這樣：

我們開門見山：編寫優秀的 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。

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，等等），在此不做一一介紹了。

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

組織 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 商店：

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

融會貫通

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

組織 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。

從 SCSS 到 CSS

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

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

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

node-sass <input> <output> [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 標簽內：

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

補充

添加實時重新加載

你可能希望添加實時重新加載以提高工作效率，而無需手動重新加載本地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 代碼，并且添加了提供商前綴！太棒了是不是嗎？

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

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

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

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

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

作者：homas Lombart，軟件開發。

譯者：彎月，責編：屠敏

“征稿啦”

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

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

以使用專業的 HTML 編輯器來編輯 HTML：

• Adobe Dreamweaver
• Microsoft Expression Web
• CoffeeCup HTML Editor

不過，我們同時推薦使用文本編輯器來學習 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。我們相信，使用一款簡單的文本編輯器是學習 HTML 的好方法。

通過記事本，依照以下四步來創建您的第一張網頁。

步驟一：啟動記事本

如何啟動記事本：

開始

所有程序

附件

記事本

步驟二：用記事本來編輯 HTML

在記事本中鍵入 HTML 代碼：

步驟三：保存 HTML

在記事本的文件菜單選擇“另存為”。

當您保存 HTML 文件時，既可以使用 .htm 也可以使用 .html 擴展名。兩者沒有區別，完全根據您的喜好。

在一個容易記憶的文件夾中保存這個文件。

步驟四：在瀏覽器中運行這個 HTML 文件

啟動您的瀏覽器，然后選擇“文件”菜單的“打開文件”命令，或者直接在文件夾中雙擊您的 HTML 文件。

結果應該類似這樣：