英文 | https://beforesemicolon.medium.com/50-css-best-practices-guidelines-to-write-better-css-c60807e9eee2

翻譯 | 楊小二

我最近寫了篇《掌握和成為更好的Web開發(fā)人員的15件事》（地址：https://beforesemicolon.medium.com/15-css-things-to-master-and-become-a-better-web-developer-a18f370a8bc5），然后意識到編寫CSS不僅需要專注于某些功能。

通常，使CSS變得困難的原因是，開發(fā)人員沒有一套可以遵循和使用的工具，以及最佳實(shí)踐指南，以幫助他們享受編寫CSS的樂趣。

多年來，我收集了一組規(guī)則和工具，這些規(guī)則和工具在CSS之旅中對我有很大幫助，我想與你分享其中我覺得比較實(shí)用及有有價值的50條規(guī)則。

1 、使用預(yù)處理器

CSS 預(yù)處理器能夠幫助你少寫CSS，它們可幫助你組織，避免重復(fù)和模塊化CSS的工具和實(shí)用程序。

我個人更喜歡SASS，但我也同樣喜歡LESS和Stylus。

我之所以喜歡他們，是因?yàn)樗麄儧]有采用“新方式”來設(shè)置頁面樣式。它仍然是CSS，具有額外的語法和功能。

2、分離全局與局部風(fēng)格

區(qū)分用于任何一個或一組 HTML 選擇器的樣式與用于特定事物的樣式至關(guān)重要。我將所有全局樣式保存在一個單獨(dú)的文件中（尤其是在使用預(yù)處理器時），但你也可以將其放在 CSS 文件的頂部，然后專注于為站點(diǎn)的特定組件、元素或部分設(shè)置特定樣式。

3、模塊化你的代碼風(fēng)格

你不需要將所有 CSS 捆綁在一個文件中，除非它會被使用。如果用戶登陸主頁，則只需要包含該頁面的樣式即可，不需要其他內(nèi)容。我將樣式表分為基本樣式和非基本樣式。

基本樣式是在頁面加載后用戶會看到的樣式，非基本樣式是那些保持隱藏狀態(tài)的組件，如對話框和通知。需要顯示用戶操作的元素或組件。

4、正確延遲加載樣式表

有很多方法可以延遲加載你的CSS文件，使用WebPack等捆綁程序并進(jìn)行動態(tài)導(dǎo)入時通常更容易。你可以創(chuàng)建自己的Javascript CSS加載器，也可以通過在頁面中包含樣式表時使用<link>標(biāo)記來延遲非關(guān)鍵CSS。

5、具體但不太具體

具體要好，因?yàn)樗x了哪種樣式適用于什么風(fēng)格，但是一旦過于具體，它就會變得降低性能，并同時增加捆綁包的大小。有時甚至表明CSS或設(shè)計(jì)系統(tǒng)不正確。特定選擇器的示例：

section#sample-section —（問為什么需要指定“ section”和ID）
main div p.title —（詢問為什么需要指定.title以外的任何內(nèi)容）
[disabled] -不夠具體且昂貴
#sample-最具體，最有效的選擇器
* -全球和超級昂貴（最慢）

作為過于具體的，有時是需要，但把它看作一個例外，而不是普遍的做法。不夠具體會導(dǎo)致樣式?jīng)_突，過于具體會給瀏覽器帶來困難。

6、像瀏覽器一樣閱讀CSS

查看以下選擇器：

nav ul li a

你最有可能從左到右閱讀它，但是瀏覽器從右到左閱讀它，這意味著，它會找到頁面上的所有<a>標(biāo)記，然后，對其進(jìn)行過濾以僅包含<li>內(nèi)部的那些，然后再次過濾以僅包含那些在<ul>內(nèi)，最后只有在<nav>內(nèi)的那些。

因此，它無法盡快匹配。如果沒有<a>標(biāo)記，則無需從<nav>開始匹配，只需找出沒有<a>標(biāo)記即可。

可以說，性能最高的CSS將為頁面上的每個HTML元素提供一個ID，并使用它們進(jìn)行樣式設(shè)置，而使用CSS選擇器則非常昂貴，深度嵌套時更糟。

也許你需要每一個性能，也許你不在乎，并認(rèn)為瀏覽器足夠快來處理此問題。理想情況下，你應(yīng)該考慮HTML樣式化頁面。

7、考慮HTML樣式以提高性能

在設(shè)計(jì)樣式時，請始終考慮您構(gòu)建 HTML 的方式，尤其是在您閱讀了前兩條規(guī)則/指南（6 和 5）之后。

如果你知道頁面上唯一的鏈接是導(dǎo)航鏈接，也許使用選擇器 a 是可以的，但如果你知道會有更多，使用一個類來區(qū)分它，比如 .nav-link。

當(dāng)嵌套和定位常見的 HTML 標(biāo)簽（如 <div>、<p> 和 <a> 標(biāo)簽）時，樣式選擇器的會更糟。尋找允許您有效渲染 CSS 但不要采取任何極端措施的策略。

例如，出于樣式目的向所有內(nèi)容添加 id 或 class，除非您使用類實(shí)用程序優(yōu)先庫或確實(shí)需要額外的性能。為了獲得更好的主意，請嘗試了解 CSS 的工作原理。


#main-navigation          /* ID (Fastest) */ body #page-wrap           /* ID */ .main-navigation          /* Class */ li a.nav-link             /* Class * div                       /* Tag (Slow)*/ nav ul li a               /* Tag (Slower)*/ *                         /* Universal (Slowest) */ [disabled]                /* Universal */

8、避免使用內(nèi)聯(lián)樣式

唯一可以覆蓋內(nèi)聯(lián)樣式的是使用 !important 標(biāo)簽，正如你將在下一個塊中閱讀的那樣，!important 標(biāo)簽可能很糟糕，但內(nèi)聯(lián)樣式需要它。

避免它們的另一個原因是，你出于某種原因添加了外部樣式表，并且該原因是將樣式與結(jié)構(gòu)（HTML）分開。對此也有例外，但是，如果你的外部樣式表中有樣式、HTML 中的樣式、Javascript 中的樣式，則很難跟蹤正在執(zhí)行的更改，并且隨著代碼庫的增長，它變得難以維護(hù)。

一些庫和框架（如 Svelte 和 Vue）允許 HTML（JSX）、CSS 和 Javascript 在同一個文件中共存，但歸根結(jié)底，這真的歸結(jié)為偏好。

9 、避免使用！important

如果你正在使用 Bootstrap 并且真的想覆蓋一個樣式，你將需要使用 !important 標(biāo)志，但同樣，你為什么首先使用 Bootstrap？

如果你發(fā)現(xiàn)自己需要使用 !important 標(biāo)志，這通常表明你遇到了問題。你可能正在使用難以覆蓋的第三方庫；你正在使用內(nèi)聯(lián)樣式；你對選擇器過于具體；你有 CSS 層次結(jié)構(gòu)或順序問題，或者應(yīng)該嘗試了解 CSS 特異性是如何計(jì)算的。

10、一致地編寫CSS

一致性是關(guān)鍵。即使你做錯了所有事情，也要保持一致，因?yàn)橐院蟾菀仔迯?fù)它們。找到適合你的命名約定，采用 CSS 方法，以相同的方式組織樣式，定義嵌套選擇器的級別等。定義你的樣式并堅(jiān)持并隨著時間的推移改進(jìn)它。

11 、使用設(shè)計(jì)系統(tǒng)

設(shè)計(jì)系統(tǒng)允許您為將來構(gòu)建，因?yàn)樗试S您定義一般的設(shè)計(jì)規(guī)則和規(guī)范，遵循組織，模塊化，定義最佳實(shí)踐等。之所以采用面向未來的策略，是因?yàn)樗菀讓?shí)現(xiàn)在全球范圍內(nèi)引入變更，修復(fù)和配置事物。

設(shè)計(jì)系統(tǒng)允許你為未來構(gòu)建，因?yàn)樗试S你定義一般設(shè)計(jì)規(guī)則和規(guī)范、遵循組織、模塊化、定義最佳實(shí)踐等。它是面向未來的策略的，原因是它更容易在全球范圍內(nèi)引入更改、修復(fù)和配置事物。

12、使用速記

有時你想指定 padding-top 或 border-right ，但根據(jù)經(jīng)驗(yàn)，我經(jīng)常回到這些來添加更多，所以，我習(xí)慣于總是使用速記，以便在不指定很多屬性的情況下更容易更改，代碼更少。

13 、結(jié)合通用樣式

通過將具有相同樣式規(guī)則的選擇器分組來避免重復(fù)樣式。你可以用逗號來分隔具有相同樣式主體的選擇器。

14、將常見技巧轉(zhuǎn)換為實(shí)用程序類

如果你發(fā)現(xiàn)自己一遍又一遍地應(yīng)用技巧或相同的樣式，請將它們轉(zhuǎn)換為 class-utils 以直接在 HTML 標(biāo)記上使用。

對我來說，這些是像帶有顯示 flex 或網(wǎng)格的 center 這樣的東西，所以我創(chuàng)建了一個類 .center-flex 和 .center-grid。創(chuàng)建類實(shí)用程序來自動化這些重復(fù)的樣式組合。

15、更多使用相對單位

你真的應(yīng)該嘗試更多地使用相對單位。像 em、rem、%、vw、vh、fr 等。使用 px 和 pt 設(shè)置固定值應(yīng)該是靜態(tài)設(shè)計(jì)的東西，盡管有些情況下需要這些值單位。瀏覽器很靈活，你的網(wǎng)站和單位也應(yīng)該如此。

16、注意昂貴的屬性

現(xiàn)在瀏覽器速度非常快，但有時，在復(fù)雜的網(wǎng)站上，我會看到一些與設(shè)置框陰影、邊框半徑、位置、過濾器，甚至寬度和高度相關(guān)的繪畫問題，尤其是對于復(fù)雜的動畫或重復(fù)更改。這些要求瀏覽器進(jìn)行復(fù)雜的重新計(jì)算，并將視圖重新繪制到每個嵌套的子級。

17 、最小化布局修改樣式

布局修飾符是width，height，left，top，margin，order等屬性。這些屬性的動畫和執(zhí)行更改的成本更高，因?yàn)樗鼈冃枰獮g覽器重新計(jì)算布局和接收更改的元素的所有后代。當(dāng)你同時對許多這些屬性進(jìn)行更改時，它開始變得更加明顯，因此請注意這一點(diǎn)。

18 、使用“will-change”作為最后的手段

“will-change”被用作性能提升來告訴瀏覽器一個屬性將如何改變。瀏覽器會在使用之前進(jìn)行復(fù)雜的計(jì)算，雖然這聽起來是件好事，但通常情況下，你并不需要它。除非你發(fā)現(xiàn)與事物變化相關(guān)的性能問題，例如在轉(zhuǎn)換或動畫事物時，否則使用是最后的手段。

19、對CSS寫注釋

注釋是個好東西，采納吧！如果你編寫了復(fù)雜的 hacks 或發(fā)現(xiàn)某些事情有效但不知道為什么，請?zhí)砑幼⑨尅閺?fù)雜的事情添加注釋，組織你的 CSS，幫助其他人理解你的想法和策略，并在你以后回來時，幫助你從你的混亂中弄明白它。

20、規(guī)范化或重置你的 CSS

每個瀏覽器都帶有CSS元素的默認(rèn)樣式，并且這些樣式各不相同，因此，你的東西可能在一個瀏覽器中看起來是一種方式，而在另一種瀏覽器中則不同，它可能具有你意想不到的額外邊框或形狀。通過重置或規(guī)范化你的 CSS，你可以簡化這些事情，并讓你的樣式有更好的機(jī)會在任何瀏覽器中看起來相同。

21 、考慮更好的字體加載策略

你可以繼續(xù)使用 @font-face 來定義你的字體，但使用 <link/> 標(biāo)簽來加載你的字體，這樣你就可以推遲它們，尤其是當(dāng)你有 1 個以上的字體文件時。你還應(yīng)該研究 SVG 字體并了解它們，因?yàn)樗鼈冊试S更準(zhǔn)確的字體渲染。在樣式表的頂部添加 @font-face 規(guī)則。

22 、避免過多的字體文件

也許設(shè)計(jì)師給了你太多的字體文件，這是一個危險(xiǎn)信號。字體過多的網(wǎng)站可能會變得混亂，因此，請始終確保包含頁面所需的字體。字體加載和應(yīng)用可能需要一些時間，當(dāng)你有太多字體時，你的 UI 通常會在字體加載后跳轉(zhuǎn)不到位。

23 、最小化 CSS

在將 CSS 加載到瀏覽器之前，將其最小化。你可以使用后處理器或使其成為站點(diǎn)部署的簡單構(gòu)建過程步驟。較小的 CSS 文件加載速度會更快，并且會更快地開始處理。

24 、使用 CSS 變量

我使用預(yù)處理器的第一個原因是變量和 CSS 變量更好，因?yàn)樗鼈冊跒g覽器中加載時會保留下來。支持很好，它允許你創(chuàng)建更靈活和可重用的 UI，更不用說它可以幫助你創(chuàng)建更強(qiáng)大的設(shè)計(jì)系統(tǒng)和功能。

25 、不要刪除大綱屬性，設(shè)置樣式！

不要將大綱屬性設(shè)置為“無”，而是設(shè)置樣式！如果你不喜歡它的外觀，請對其進(jìn)行樣式設(shè)置以匹配你網(wǎng)站的外觀。對于使用鍵盤或其他屏幕閱讀瀏覽你的網(wǎng)站的人來說，大綱對于讓他們跟蹤自己的位置至關(guān)重要。

26 、不要不必要地引入 CSS 庫/框架

現(xiàn)在大多數(shù)人做的第一件事就是添加一個 CSS 庫或框架，從長遠(yuǎn)來看，有時這可能是一個代價高昂的決定。通常這些人會遇到一些他們不知道該怎么做的事情，因此，會帶來整個圖書館來提供幫助。

添加 CSS 庫應(yīng)該慎重考慮。除非，你打算使用其大部分功能，否則不要添加，你和團(tuán)隊(duì)對這個決定需要感到滿意，這確實(shí)有助于大大減少交付時間和調(diào)試時間。如果你帶來了一個新的庫，請花時間學(xué)習(xí)并充分利用它。如果你經(jīng)常發(fā)現(xiàn)自己覆蓋或破解第三方庫，則不需要它！

27 、使用雙引號

每當(dāng)你包含任何字符串值（如背景或字體 URL 或內(nèi)容）時，請首選雙引號并保持一致。很多人省略了有時可以工作但可能會導(dǎo)致 CSS 解析工具出現(xiàn)問題的引號。此外，查看 CSS 屬性引號以自動化其中的一些。

28 、避免難以維護(hù)的黑客攻擊

每當(dāng)你將 hack 引入你的樣式時，最好將其放在一個單獨(dú)的文件中，以便于維護(hù)，例如 hacks.css。隨著代碼庫的增長，很難找到它們并解決它們，總的來說，如果可能的話，盡量避免黑客攻擊。

29 、使用 CSS 格式化文本

CSS 可以格式化你的 HTML 文本。無需在 HTML 中手動編寫所有大寫、所有小寫或大寫的單詞。更改 CSS 屬性值比更改 HTML 中的所有文本要快得多，而且國際化也更好，因?yàn)樗试S你根據(jù)需要編寫文本并使用 CSS 操縱它的外觀。

30 、驗(yàn)證 CSS

W3C組織提供了一個免費(fèi)的 CSS 驗(yàn)證器，你可以使用它來確保你的 CSS 遵循正確的 CSS 樣式規(guī)則和指南的一般指南。

31 、風(fēng)格反應(yīng)靈敏或至少流暢

你正在創(chuàng)建要在瀏覽器中使用的內(nèi)容，這意味著人們將使用各種設(shè)備類型和尺寸訪問它。通過考慮流暢或響應(yīng)式設(shè)計(jì)，真正考慮改善這些人的體驗(yàn)。如果你的項(xiàng)目不包括響應(yīng)計(jì)劃，請嘗試至少保持流暢。

32 、讓內(nèi)容定義大小

例如，不要設(shè)置按鈕的寬度和高度，而是考慮為間距設(shè)置一些填充并包括 max-width 和 max-height ，除非設(shè)計(jì)要求嚴(yán)格的大小。

33 、遵循 CSS 方法論

CSS 方法將確保你的樣式的一致性和未來證明。有幾個選項(xiàng)可以嘗試，或者你甚至可以采用多個選項(xiàng)。

BEM（塊元素修飾符）——這是一種強(qiáng)大的方法，旨在使用類命名約定將塊（組件）與元素（組件部分）和修飾符（組件和元素狀態(tài)）分開。
ITCSS（倒三角形 CSS）——一種非常強(qiáng)大的方法，可以根據(jù) 3 條原則按特定級別組織事物：通用到顯式，從低到高的特殊性，以及影響深遠(yuǎn)的本地化樣式規(guī)則。
OOCSS（面向?qū)ο蟮?CSS）——一種非常好的方法，旨在按照 CSS 中常見的面向?qū)ο蠓独蛛x和抽象獨(dú)立的片段以實(shí)現(xiàn)可重用性。

34 、避免不斷覆蓋/撤消樣式

一個巨大的危險(xiǎn)信號是你編寫 CSS 樣式，然后在其他地方編寫具有不同值的相同 CSS，幾乎覆蓋了所有內(nèi)容。如果你經(jīng)常這樣做，那么，你處理項(xiàng)目樣式的方式顯然有問題。

你幾乎永遠(yuǎn)不應(yīng)該陷入需要覆蓋自己的樣式的情況。它表明，你有樣式變化，并且你可能沒有事先規(guī)劃你的UI。

35 、最后添加動畫聲明

你可以做的另一件事是將你的動畫 @keyframes 放在一個單獨(dú)的文件中，并將其包含在樣式表的末尾或簡單地最后導(dǎo)入。這將確保在瀏覽器嘗試在加載時，執(zhí)行任何動畫之前讀取你的整個樣式。

36 、不要將第三方 CSS 覆蓋與你的混合

每當(dāng)你編寫樣式來覆蓋第三方庫時，請考慮將其放在單獨(dú)的文件中，以便于跟蹤和維護(hù)。如果你決定稍后刪除該庫，則刪除會更容易，并且將它們放入自己的文件中已經(jīng)是自我文檔化了。

37 、指定需要轉(zhuǎn)換的屬性

當(dāng)你指定轉(zhuǎn)換時，請始終包括你打算轉(zhuǎn)換的所有屬性名稱。使用“all”或不使用屬性名稱將迫使瀏覽器嘗試轉(zhuǎn)換所有內(nèi)容并影響轉(zhuǎn)換性能。

38 、避免在任何地方使用 id 屬性

也許你是一個瘋狂的人，他們迫切希望從你的 CSS 中獲得每一點(diǎn)性能，否則，在任何地方使用 id 都可能很糟糕。 id 屬性樣式很難覆蓋，并且每個頁面都是唯一的，因此請遵循以下 id 用法指南：

將它用于頁面上真正獨(dú)特的東西，例如logo標(biāo)識和容器；
不要在要重復(fù)使用的組件上或內(nèi)部使用它；
在你要鏈接到的網(wǎng)站的標(biāo)題和部分上使用它；
如有必要，使用 id 生成器來確保唯一性；

39 、注意樣式順序

CSS 代表級聯(lián)樣式表，這意味著最后出現(xiàn)的任何樣式都有可能覆蓋以前的樣式，因此，請按照確保應(yīng)用所需樣式的順序?qū)邮竭M(jìn)行排序。這完全是為了了解你對 CSS 特異性的理解。

40、整理你的風(fēng)格

Linting 的工作原理是確保你遵循為樣式定義的規(guī)則，并確保你的樣式一致、結(jié)構(gòu)良好，并遵循 CSS 最佳實(shí)踐。了解 Stylelint 以及如何在你喜歡的 IDE 中設(shè)置樣式 linting 以及如何設(shè)置你的配置文件。

41 、按字母順序排列 CSS 屬性

它使查找內(nèi)容變得更加容易，你甚至可以使用 Stylelint 來強(qiáng)制執(zhí)行此規(guī)則。

42 、框大小 border-box 一切

CSS 屬性 box-sizing 默認(rèn)值應(yīng)該是 border-box ，并且它被列為許多 CSS API 錯誤之一。在頂層簡單地聲明 *, *::after, *::before{box-sizing: border-box;}。

43 、避免顏色名稱

更喜歡用十六進(jìn)制和顏色函數(shù)指定顏色值，而不是說紅色、紫色、青色。有數(shù)百萬個十六進(jìn)制顏色值，而不是所有這些值的名稱。為了保持一致性，找到一種添加顏色的方法并堅(jiān)持下去。

44 、讓父級處理間距、位置和大小

當(dāng)為要在內(nèi)容流中使用的組件設(shè)置樣式時，讓內(nèi)容和內(nèi)部間距定義大小，不包括位置和邊距等內(nèi)容。讓使用此組件的容器來決定位置以及此組件與其他組件的距離。

45 、嘗試組織 CSS 以匹配標(biāo)記順序

它確實(shí)可以讓你更輕松地通過查看 CSS 來理解你的標(biāo)記。這是我做的事情，為我節(jié)省了很多時間。

46 、保持 HTML 語義并使用 CSS 進(jìn)行樣式設(shè)置

經(jīng)常會發(fā)現(xiàn)開發(fā)人員會四處更改 HTML 以應(yīng)用某種樣式。通常，將樣式設(shè)置為 CSS，并讓你的 HTML 以語義上有意義的方式構(gòu)建。此規(guī)則有例外，但始終確保采用的結(jié)構(gòu)不違反任何 HTML 語義規(guī)則。

首先，編寫 HTML 時要考慮內(nèi)容，而不是樣式。比添加 CSS 并在出于樣式原因更改 HTML 之前盡力而為。

47 、連字符還是下劃線？

類名和 id 名稱最常見的分隔符是連字符，但無論你選擇什么，都要堅(jiān)持使用。

48 、在你尋求 Javascript 幫助之前先找到 CSS 解決方案

我一直在分享如何在我的 Youtube UI/UX 庫中盡可能多地使用 CSS 構(gòu)建通用組件，我想讓你明白的是，在你嘗試添加 Javascript 之前，你應(yīng)該嘗試找到一個 CSS 解決方案（不要太老套），甚至，當(dāng)你添加 Javascript 時，請考慮讓 CSS 完成大部分樣式并使用 Javascript 來處理觸發(fā)器和副作用之類的事情。

49 、刪除未使用的 CSS

出于同樣的原因，你應(yīng)該發(fā)布你將使用的唯一 CSS，考慮使用 PurgeCSS 之類的工具來刪除渲染中不需要的 CSS。

這些工具將查看你的 CSS 和 HTML，以確定你需要哪些樣式。

如果你不確定你是否需要這個，考慮使用瀏覽器工具來查找你的代碼覆蓋率，它會告訴你是否正在發(fā)布未使用的樣式。

50 、使用后處理器

真正考慮將 PostCSS 添加到你的項(xiàng)目中，以便你可以利用各種插件來優(yōu)化你的 CSS，例如 Autoprefixer（添加 webkit-、moz-、ms- 等）、CSSNano（最小化你的 CSS）、postcss-preset-css（允許你編寫未來的 CSS），以及許多其他可以幫助你定義標(biāo)準(zhǔn)和規(guī)則、介紹工具、類實(shí)用程序、與 javascript 通信并標(biāo)準(zhǔn)化。

結(jié)論

沒有人會在一夜之間就會編寫更好的 CSS，這需要練習(xí)和調(diào)整。這些在我的 CSS 之旅中幫助了我很多，我相信它們也會幫助你。

每一次體驗(yàn)都是獨(dú)一無二的，你應(yīng)該保持開放的心態(tài)，嘗試各種事情，直到它們適合你為止。

不要害怕采用工具來幫助你，但也不要因?yàn)槊總€人都這樣做而急于跳入某事。在理解、編寫和組織 CSS 方面有藝術(shù)水平。無論你最終采用什么規(guī)則，都要保持一致。

感謝你的閱讀。祝你好運(yùn)！

學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號

50個CSS最佳做法指南，以幫助你編寫更好的CSS