教你如何寫出更好的CSS，多年前端開發(fā)工作經(jīng)驗(yàn)總結(jié)

時(shí)間：2023-05-24 04:00:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-05-24 04:00:01 來源：網(wǎng)站運(yùn)營

教你如何寫出更好的CSS，多年前端開發(fā)工作經(jīng)驗(yàn)總結(jié)：讓我們開門見山：編寫優(yōu)秀的 CSS 代碼是件十分痛苦的事情。很多開發(fā)人員都不想做 CSS 開發(fā)。你讓我干什么都行，但是 CSS 還是算了吧。

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

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

企業(yè)喜歡招什么樣的web前端？Web前端教程請(qǐng)點(diǎn)擊【一起學(xué)習(xí)交流】即刻獲取學(xué)習(xí)教程以及電子書，開發(fā)工具




我本人經(jīng)常和 CSS 苦苦糾纏。

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

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

它經(jīng)常會(huì)使用平淡無奇的設(shè)計(jì)。

CSS 框架使得定制很困難，更不用說超越框架了。

在使用之前，你必須先學(xué)習(xí)如何使用它們。

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

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

1. SCSS

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

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

變量

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

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

突然有一天，你不喜歡藍(lán)色，開始喜歡綠色。

如果沒有變量：你需要修改所有包含藍(lán)色設(shè)置的代碼。

如果使用了變量：你只需要修改這個(gè)變量。

嵌套

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

可以寫成：

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

分塊與導(dǎo)入

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

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

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

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

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

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

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

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

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

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

塊

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

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

命名：塊名：.block

示例：.card、.form、.post、.user-navigation

元素

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

命名：塊名+ __ +元素名：.block__element

示例：.post__author、.post__date、.post__text

修飾符

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

命名：塊名稱或元素名稱+ -- +修飾符名稱：.block__element--修飾符，.塊--修飾符

示例：.post--important，.post__btn--disabled

注意事項(xiàng)

在使用 BEM 的時(shí)候，你可以用且只能用類來命名。不能用 ID，不能用標(biāo)簽。只能用類。

塊和元素可以嵌入其他塊和元素，但是它們必須是完全獨(dú)立的。請(qǐng)記?。邯?dú)立。所以如果你想將把一個(gè)按鈕放在標(biāo)題下的話，就不要在按鈕上加邊距，否則按鈕就會(huì)與標(biāo)題綁定。請(qǐng)改用工具類。

是的，你的 HTML 文件會(huì)超負(fù)荷，但是不用擔(dān)心，與 BEM 帶來的好處相比，這只是個(gè)小小的缺點(diǎn)。

示例

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

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







Google 商店

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

融會(huì)貫通

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







BEM 的功能

寫一個(gè)博文組件







博文組件

寫多個(gè)按鈕

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

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

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

將所有內(nèi)容分別寫入7個(gè)不同的文件夾中。

將它們?nèi)繉?dǎo)入位于根級(jí)別的 main.scss 文件中。僅此而已。

7 個(gè)文件夾：

base：你可以將所有的樣板代碼放入該文件夾中。對(duì)于這里的樣板，我指的是：每次開始一個(gè)新項(xiàng)目時(shí)，你需要寫的所有CSS代碼。例如：排版規(guī)則、動(dòng)畫、工具程序（對(duì)于工具程序，我指的是margin-right-large、text-center、...等類）等等。

components：這里指組件。這個(gè)文件夾包含所有用于構(gòu)建頁面的組件，例如按鈕、表單、滑塊、彈出窗口等等。

layout：頁面不同部分用到的布局，也就是說：頁眉、頁腳、導(dǎo)航、分區(qū)、你自己的網(wǎng)格等等。

pages：頁面。有的頁面可能有特定的樣式，與通常的處理方式不同。那么你可以將它放入該文件夾。

themes：主題。如果你的應(yīng)用中有不同的主題（黑暗模式、管理員等等），那么可以將它們放入該文件夾。

abstracts：抽象。你可以將所有函數(shù)和變量與混入（mixin）放在這里。簡而言之，就是你所有的幫手。

vendors：外部資源。應(yīng)用或項(xiàng)目怎么可能沒有外部的庫呢？你可以將所有不依賴于你的文件都放入該文件夾。例如，你可以放入Font Awesome文件、Bootstrap和其他類似的東西。

主文件

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

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

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

然后，你有兩個(gè)選擇：

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

你想將所有的分塊文件和 mail.css 放在一個(gè)大文件夾內(nèi)，那么你會(huì)得到如下結(jié)構(gòu)：

你可以隨便選。

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

4. 從 SCSS 到 CSS

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

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

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

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

-w：監(jiān)視目錄或文件。這意味著node-sasswaits在時(shí)刻監(jiān)督你的代碼是否發(fā)生改動(dòng)，一旦出現(xiàn)發(fā)生，它就會(huì)自動(dòng)編譯成CSS。這在開發(fā)時(shí)非常有用。

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

如果你是一個(gè)好奇心很重的人（我希望如此，因?yàn)殚_發(fā)人員應(yīng)該好奇?。┠敲?，請(qǐng)點(diǎn)擊這里查看 完整的文檔。

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

創(chuàng)建項(xiàng)目：mkdirmy-app && cd my-app

初始化：npm init

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

創(chuàng)建文件夾，index.html和main.scss文件：

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

將包含編譯好的 CSS 文件的連接加入到 index.html 文件的 head 標(biāo)簽內(nèi)：

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

5. 補(bǔ)充

添加實(shí)時(shí)重新加載

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

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

安裝live-server軟件包：npm install -g live-server。注意：它是一個(gè)全局包。

將npm-run-all添加到項(xiàng)目依賴項(xiàng)中：npm install npm-run-all --save-dev：有了它我們就可以同時(shí)運(yùn)行多個(gè)腳本。

將這些腳本添加到package.json：







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

添加自動(dòng)前綴

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

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

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







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

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

將所有的SCSS文件編譯成一個(gè)主CSS文件。

使用自動(dòng)前綴為CSS文件添加前綴。

壓縮CSS文件

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

添加兩個(gè)依賴項(xiàng)，postcss-cli和autoprefixer：npm install autoprefixer postcss-cli --save-dev

修改build腳本，并將這些腳本添加到 `package.json：







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

如果你想知道我是如何在項(xiàng)目中應(yīng)用這些技術(shù)的，請(qǐng)點(diǎn)擊這里查看 代碼倉庫 和 結(jié)果。希望你能通過這些例子更深入理解。現(xiàn)在，你可以準(zhǔn)備開始編寫具有可維護(hù)性、模塊化和可重用性的 CSS 代碼了。

企業(yè)喜歡招什么樣的web前端？Web前端教程請(qǐng)點(diǎn)擊【一起學(xué)習(xí)交流】即刻獲取學(xué)習(xí)教程以及電子書，開發(fā)工具