大佬教你如何寫出更好的CSS,分享web前端資料

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

注意:這篇文章不是關於如何設計漂亮的應用。本文是關於如何寫出便於維護的 CSS 代碼以及如何組織代碼。

1、SCSS

將在下面例子中使用 SCSS。SCSS 是一個 CSS 的預處理器。從根本上來說,它是一個 CSS 的超集:它增加了一些很酷的功能,例如變量,嵌套,導入和混入(mixins)等。

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

變量

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

那麼你處處都用到了藍色:按鈕的 background-color(背景色),標題和鏈接的 color(顏色)。藍色無處不在。

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

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

如果使用了變量:你只需要修改這個變量。
嵌套

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

可以寫成:

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

分塊與導入

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

你可以通過使用前下劃線給文件命名,來創建分塊的文件:animations.scss, base.scss,_variables.scss 等。

至於導入,你可以使用 @import 指令。例如,你可以這麼做:

哈哈!你可能想,你在這裏犯了一個錯誤!應該是 _animations.scss,而不是 animations;)

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

關於變量、嵌套、分塊和導入,我們需要了解的就這麼多。SCSS 還有很多其他功能:比如混入、繼承和其他指令(@for,@if,等等),在此不做一一介紹了。

我記不清曾經多少次在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 商店:
在這裏插入圖片描述
Google 商店

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

融會貫通

下面的示例演示了 BEM 的功能。
在這裏插入圖片描述
BEM 的功能

寫一個博文組件
在這裏插入圖片描述
博文組件

寫多個按鈕

3、組織 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和其他類似的東西。
主文件

你需要將以上所有內容導入到該文件中。

我知道你覺得以上內容有點太多,一時難以接受。這個架構適合於大型項目,而非小項目。下面我們介紹一種更適合小項目的做法。

首先,你不需要 vendors 文件夾。可以將所有外部 CSS 代碼放在頭部的link標籤內。接下來,如果你的應用只有一個主題的話,可以省略 themes 文件夾。最後,你可能不會有大量頁面特定的風格,所以也 pages 也沒必要。好了,現在只剩下 4 個文件夾了。

然後,你有兩個選擇:

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

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

你可以隨便選。

你可能會想:你說服了我!但是我該如何使用呢?我是說,哪些不支持scss文件的瀏覽器該怎麼辦呢?說的好!這是我們的最後一步,我們現在就來學習如何將SCSS編譯爲CSS。
4. 從 SCSS 到 CSS

首先,你需要 Node.js 和 NPM(或 Yarn)。

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

它的 CLI(命令行界面)相當容易使用:

它有多個選擇,但我們只使用其中兩個:

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

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

如果你是一個好奇心很重的人(我希望如此,因爲開發人員應該好奇!)那麼,請點擊這裏查看 完整的文檔。

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

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

初始化:npm init

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

創建文件夾,index.html和main.scss文件:

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

將包含編譯好的 CSS 文件的連接加入到 index.html 文件的 head 標籤內:

然後就可以了,你準備好了!你可以在編程的時候運行npm run watch,並在瀏覽器中打開index.html文件。如果你想縮小CSS,只需運行npm run build。
5. 補充

添加實時重新加載

你可能希望添加實時重新加載以提高工作效率,而無需手動重新加載本地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 代碼了。
點此鏈接:最後送福利了,自己是從事了五年的前端工程師,整理了一份最全面前端學習資料,裏面概括應用網站開發,css,html,JavaScript,jQuery,Ajax,node,angular等。等多個知識點高級進階乾貨的相關視頻資料,等你來拿
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章