英文 | https://beforesemicolon.medium.com/50-css-best-practices-guidelines-to-write-better-css-c60807e9eee2
翻譯 | 楊小二
我最近寫了篇《掌握和成為更好的Web開發人員的15件事》（位址：https://beforesemicolon.medium.com/15-css-things-to-master-and-become-a-better-web-developer-a18f370a8bc5），然後意識到編寫CSS不僅需要專注于某些功能。
通常，使CSS變得困難的原因是，開發人員沒有一套可以遵循和使用的工具，以及最佳實踐指南，以幫助他們享受編寫CSS的樂趣。
多年來，我收集了一組規則和工具，這些規則和工具在CSS之旅中對我有很大幫助，我想與你分享其中我覺得比較實用及有有價值的50條規則。
1 、使用預處理器
CSS 預處理器能夠幫助你少寫CSS，它們可幫助你組織，避免重複和子產品化CSS的工具和實用程式。
我個人更喜歡SASS，但我也同樣喜歡LESS和Stylus。
我之是以喜歡他們，是因為他們沒有采用“新方式”來設定頁面樣式。它仍然是CSS，具有額外的文法和功能。
2、分離全局與局部風格
區分用于任何一個或一組 HTML 選擇器的樣式與用于特定事物的樣式至關重要。我将所有全局樣式儲存在一個單獨的檔案中（尤其是在使用預處理器時），但你也可以将其放在 CSS 檔案的頂部，然後專注于為站點的特定元件、元素或部分設定特定樣式。
3、子產品化你的代碼風格
你不需要将所有 CSS 捆綁在一個檔案中，除非它會被使用。如果使用者登陸首頁，則隻需要包含該頁面的樣式即可，不需要其他内容。我将樣式表分為基本樣式和非基本樣式。
基本樣式是在頁面加載後使用者會看到的樣式，非基本樣式是那些保持隐藏狀态的元件，如對話框和通知。需要顯示使用者操作的元素或元件。
4、正确延遲加載樣式表
有很多方法可以延遲加載你的CSS檔案，使用WebPack等捆綁程式并進行動态導入時通常更容易。你可以建立自己的Javascript CSS加載器，也可以通過在頁面中包含樣式表時使用<link>标記來延遲非關鍵CSS。
5、具體但不太具體
具體要好，因為它定義了哪種樣式适用于什麼風格，但是一旦過于具體，它就會變得降低性能，并同時增加捆綁包的大小。有時甚至表明CSS或設計系統不正确。特定選擇器的示例：
- section#sample-section —（問為什麼需要指定“ section”和ID）
- main div p.title —（詢問為什麼需要指定.title以外的任何内容）
- [disabled] -不夠具體且昂貴
- #sample-最具體，最有效的選擇器
- * -全球和超級昂貴（最慢）
作為過于具體的，有時是需要，但把它看作一個例外，而不是普遍的做法。不夠具體會導緻樣式沖突，過于具體會給浏覽器帶來困難。
6、像浏覽器一樣閱讀CSS
檢視以下選擇器：
nav ul li a 你最有可能從左到右閱讀它，但是浏覽器從右到左閱讀它，這意味着，它會找到頁面上的所有<a>标記，然後，對其進行過濾以僅包含<li>内部的那些，然後再次過濾以僅包含那些在<ul>内，最後隻有在<nav>内的那些。
是以，它無法盡快比對。如果沒有<a>标記，則無需從<nav>開始比對，隻需找出沒有<a>标記即可。
可以說，性能最高的CSS将為頁面上的每個HTML元素提供一個ID，并使用它們進行樣式設定，而使用CSS選擇器則非常昂貴，深度嵌套時更糟。
也許你需要每一個性能，也許你不在乎，并認為浏覽器足夠快來處理此問題。理想情況下，你應該考慮HTML樣式化頁面。
7、考慮HTML樣式以提高性能
在設計樣式時，請始終考慮您建構 HTML 的方式，尤其是在您閱讀了前兩條規則/指南（6 和 5）之後。
如果你知道頁面上唯一的連結是導航連結，也許使用選擇器 a 是可以的，但如果你知道會有更多，使用一個類來區分它，比如 .nav-link。
當嵌套和定位常見的 HTML 标簽（如 <div>、<p> 和 <a> 标簽）時，樣式選擇器的會更糟。尋找允許您有效渲染 CSS 但不要采取任何極端措施的政策。
例如，出于樣式目的向所有内容添加 id 或 class，除非您使用類實用程式優先庫或确實需要額外的性能。為了獲得更好的主意，請嘗試了解 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、避免使用内聯樣式
唯一可以覆寫内聯樣式的是使用 !important 标簽，正如你将在下一個塊中閱讀的那樣，!important 标簽可能很糟糕，但内聯樣式需要它。
避免它們的另一個原因是，你出于某種原因添加了外部樣式表，并且該原因是将樣式與結構（HTML）分開。對此也有例外，但是，如果你的外部樣式表中有樣式、HTML 中的樣式、Javascript 中的樣式，則很難跟蹤正在執行的更改，并且随着代碼庫的增長，它變得難以維護。
一些庫和架構（如 Svelte 和 Vue）允許 HTML（JSX）、CSS 和 Javascript 在同一個檔案中共存，但歸根結底，這真的歸結為偏好。
9 、避免使用！important
如果你正在使用 Bootstrap 并且真的想覆寫一個樣式，你将需要使用 !important 标志，但同樣，你為什麼首先使用 Bootstrap？
如果你發現自己需要使用 !important 标志，這通常表明你遇到了問題。你可能正在使用難以覆寫的第三方庫；你正在使用内聯樣式；你對選擇器過于具體；你有 CSS 層次結構或順序問題，或者應該嘗試了解 CSS 特異性是如何計算的。
10、一緻地編寫CSS
一緻性是關鍵。即使你做錯了所有事情，也要保持一緻，因為以後更容易修複它們。找到适合你的命名約定，采用 CSS 方法，以相同的方式組織樣式，定義嵌套選擇器的級别等。定義你的樣式并堅持并随着時間的推移改進它。
11 、使用設計系統
設計系統允許您為将來建構，因為它允許您定義一般的設計規則和規範，遵循組織，子產品化，定義最佳實踐等。之是以采用面向未來的政策，是因為它更容易實作在全球範圍内引入變更，修複和配置事物。
設計系統允許你為未來建構，因為它允許你定義一般設計規則和規範、遵循組織、子產品化、定義最佳實踐等。它是面向未來的政策的，原因是它更容易在全球範圍内引入更改、修複和配置事物。
12、使用速記
有時你想指定 padding-top 或 border-right ，但根據經驗，我經常回到這些來添加更多，是以，我習慣于總是使用速記，以便在不指定很多屬性的情況下更容易更改，代碼更少。
13 、結合通用樣式
通過将具有相同樣式規則的選擇器分組來避免重複樣式。你可以用逗号來分隔具有相同樣式主體的選擇器。
14、 将常見技巧轉換為實用程式類
如果你發現自己一遍又一遍地應用技巧或相同的樣式，請将它們轉換為 class-utils 以直接在 HTML 标記上使用。
對我來說，這些是像帶有顯示 flex 或網格的 center 這樣的東西，是以我建立了一個類 .center-flex 和 .center-grid。建立類實用程式來自動化這些重複的樣式組合。
15、更多使用相對機關
你真的應該嘗試更多地使用相對機關。像 em、rem、%、vw、vh、fr 等。使用 px 和 pt 設定固定值應該是靜态設計的東西，盡管有些情況下需要這些值機關。浏覽器很靈活，你的網站和機關也應該如此。
16、注意昂貴的屬性
現在浏覽器速度非常快，但有時，在複雜的網站上，我會看到一些與設定框陰影、邊框半徑、位置、過濾器，甚至寬度和高度相關的繪畫問題，尤其是對于複雜的動畫或重複更改。這些要求浏覽器進行複雜的重新計算，并将視圖重新繪制到每個嵌套的子級。
17 、最小化布局修改樣式
布局修飾符是width，height，left，top，margin，order等屬性。這些屬性的動畫和執行更改的成本更高，因為它們需要浏覽器重新計算布局和接收更改的元素的所有後代。當你同時對許多這些屬性進行更改時，它開始變得更加明顯，是以請注意這一點。
18 、使用“will-change”作為最後的手段
“will-change”被用作性能提升來告訴浏覽器一個屬性将如何改變。浏覽器會在使用之前進行複雜的計算，雖然這聽起來是件好事，但通常情況下，你并不需要它。除非你發現與事物變化相關的性能問題，例如在轉換或動畫事物時，否則使用是最後的手段。
19、對CSS寫注釋
注釋是個好東西，采納吧！如果你編寫了複雜的 hacks 或發現某些事情有效但不知道為什麼，請添加注釋。為複雜的事情添加注釋，組織你的 CSS，幫助其他人了解你的想法和政策，并在你以後回來時，幫助你從你的混亂中弄明白它。
20、規範化或重置你的 CSS
每個浏覽器都帶有CSS元素的預設樣式，并且這些樣式各不相同，是以，你的東西可能在一個浏覽器中看起來是一種方式，而在另一種浏覽器中則不同，它可能具有你意想不到的額外邊框或形狀。通過重置或規範化你的 CSS，你可以簡化這些事情，并讓你的樣式有更好的機會在任何浏覽器中看起來相同。
21 、考慮更好的字型加載政策
你可以繼續使用 @font-face 來定義你的字型，但使用 <link/> 标簽來加載你的字型，這樣你就可以推遲它們，尤其是當你有 1 個以上的字型檔案時。你還應該研究 SVG 字型并了解它們，因為它們允許更準确的字型渲染。在樣式表的頂部添加 @font-face 規則。
22 、 避免過多的字型檔案
也許設計師給了你太多的字型檔案，這是一個危險信号。字型過多的網站可能會變得混亂，是以，請始終確定包含頁面所需的字型。字型加載和應用可能需要一些時間，當你有太多字型時，你的 UI 通常會在字型加載後跳轉不到位。
23 、 最小化 CSS
在将 CSS 加載到浏覽器之前，将其最小化。你可以使用後處理器或使其成為站點部署的簡單建構過程步驟。較小的 CSS 檔案加載速度會更快，并且會更快地開始處理。
24 、使用 CSS 變量
我使用預處理器的第一個原因是變量和 CSS 變量更好，因為它們在浏覽器中加載時會保留下來。支援很好，它允許你建立更靈活和可重用的 UI，更不用說它可以幫助你建立更強大的設計系統和功能。
25 、不要删除大綱屬性，設定樣式！
不要将大綱屬性設定為“無”，而是設定樣式！如果你不喜歡它的外觀，請對其進行樣式設定以比對你網站的外觀。對于使用鍵盤或其他螢幕閱讀浏覽你的網站的人來說，大綱對于讓他們跟蹤自己的位置至關重要。
26 、不要不必要地引入 CSS 庫/架構
現在大多數人做的第一件事就是添加一個 CSS 庫或架構，從長遠來看，有時這可能是一個代價高昂的決定。通常這些人會遇到一些他們不知道該怎麼做的事情，是以，會帶來整個圖書館來提供幫助。
添加 CSS 庫應該慎重考慮。除非，你打算使用其大部分功能，否則不要添加，你和團隊對這個決定需要感到滿意，這确實有助于大大減少傳遞時間和調試時間。如果你帶來了一個新的庫，請花時間學習并充分利用它。如果你經常發現自己覆寫或破解第三方庫，則不需要它！
27 、使用雙引号
每當你包含任何字元串值（如背景或字型 URL 或内容）時，請首選雙引号并保持一緻。很多人省略了有時可以工作但可能會導緻 CSS 解析工具出現問題的引号。此外，檢視 CSS 屬性引号以自動化其中的一些。
28 、避免難以維護的黑客攻擊
每當你将 hack 引入你的樣式時，最好将其放在一個單獨的檔案中，以便于維護，例如 hacks.css。随着代碼庫的增長，很難找到它們并解決它們，總的來說，如果可能的話，盡量避免黑客攻擊。
29 、使用 CSS 格式化文本
CSS 可以格式化你的 HTML 文本。無需在 HTML 中手動編寫所有大寫、所有小寫或大寫的單詞。更改 CSS 屬性值比更改 HTML 中的所有文本要快得多，而且國際化也更好，因為它允許你根據需要編寫文本并使用 CSS 操縱它的外觀。
30 、 驗證 CSS
W3C組織提供了一個免費的 CSS 驗證器，你可以使用它來確定你的 CSS 遵循正确的 CSS 樣式規則和指南的一般指南。
31 、 風格反應靈敏或至少流暢
你正在建立要在浏覽器中使用的内容，這意味着人們将使用各種裝置類型和尺寸通路它。通過考慮流暢或響應式設計，真正考慮改善這些人的體驗。如果你的項目不包括響應計劃，請嘗試至少保持流暢。
32 、 讓内容定義大小
例如，不要設定按鈕的寬度和高度，而是考慮為間距設定一些填充并包括 max-width 和 max-height ，除非設計要求嚴格的大小。
33 、 遵循 CSS 方法論
CSS 方法将確定你的樣式的一緻性和未來證明。有幾個選項可以嘗試，或者你甚至可以采用多個選項。
- BEM（塊元素修飾符）——這是一種強大的方法，旨在使用類命名約定将塊（元件）與元素（元件部分）和修飾符（元件和元素狀态）分開。
- ITCSS（倒三角形 CSS）——一種非常強大的方法，可以根據 3 條原則按特定級别組織事物：通用到顯式，從低到高的特殊性，以及影響深遠的本地化樣式規則。
- OOCSS（面向對象的 CSS）——一種非常好的方法，旨在按照 CSS 中常見的面向對象範例分離和抽象獨立的片段以實作可重用性。
34 、 避免不斷覆寫/撤消樣式
一個巨大的危險信号是你編寫 CSS 樣式，然後在其他地方編寫具有不同值的相同 CSS，幾乎覆寫了所有内容。如果你經常這樣做，那麼，你處理項目樣式的方式顯然有問題。
你幾乎永遠不應該陷入需要覆寫自己的樣式的情況。它表明，你有樣式變化，并且你可能沒有事先規劃你的UI。
35 、最後添加動畫聲明
你可以做的另一件事是将你的動畫 @keyframes 放在一個單獨的檔案中，并将其包含在樣式表的末尾或簡單地最後導入。這将確定在浏覽器嘗試在加載時，執行任何動畫之前讀取你的整個樣式。
36 、不要将第三方 CSS 覆寫與你的混合
每當你編寫樣式來覆寫第三方庫時，請考慮将其放在單獨的檔案中，以便于跟蹤和維護。如果你決定稍後删除該庫，則删除會更容易，并且将它們放入自己的檔案中已經是自我文檔化了。
37 、指定需要轉換的屬性
當你指定轉換時，請始終包括你打算轉換的所有屬性名稱。使用“all”或不使用屬性名稱将迫使浏覽器嘗試轉換所有内容并影響轉換性能。
38 、避免在任何地方使用 id 屬性
也許你是一個瘋狂的人，他們迫切希望從你的 CSS 中獲得每一點性能，否則，在任何地方使用 id 都可能很糟糕。 id 屬性樣式很難覆寫，并且每個頁面都是唯一的，是以請遵循以下 id 用法指南：
- 将它用于頁面上真正獨特的東西，例如logo辨別和容器；
- 不要在要重複使用的元件上或内部使用它；
- 在你要連結到的網站的标題和部分上使用它；
- 如有必要，使用 id 生成器來確定唯一性；
39 、注意樣式順序
CSS 代表級聯樣式表，這意味着最後出現的任何樣式都有可能覆寫以前的樣式，是以，請按照確定應用所需樣式的順序對樣式進行排序。這完全是為了了解你對 CSS 特異性的了解。
40、 整理你的風格
Linting 的工作原理是確定你遵循為樣式定義的規則，并確定你的樣式一緻、結構良好，并遵循 CSS 最佳實踐。了解 Stylelint 以及如何在你喜歡的 IDE 中設定樣式 linting 以及如何設定你的配置檔案。
41 、按字母順序排列 CSS 屬性
它使查找内容變得更加容易，你甚至可以使用 Stylelint 來強制執行此規則。
42 、框大小 border-box 一切
CSS 屬性 box-sizing 預設值應該是 border-box ，并且它被列為許多 CSS API 錯誤之一。在頂層簡單地聲明 *, *::after, *::before{box-sizing: border-box;}。
43 、避免顔色名稱
更喜歡用十六進制和顔色函數指定顔色值，而不是說紅色、紫色、青色。有數百萬個十六進制顔色值，而不是所有這些值的名稱。為了保持一緻性，找到一種添加顔色的方法并堅持下去。
44 、 讓父級處理間距、位置和大小
當為要在内容流中使用的元件設定樣式時，讓内容和内部間距定義大小，不包括位置和邊距等内容。讓使用此元件的容器來決定位置以及此元件與其他元件的距離。
45 、嘗試組織 CSS 以比對标記順序
它确實可以讓你更輕松地通過檢視 CSS 來了解你的标記。這是我做的事情，為我節省了很多時間。
46 、保持 HTML 語義并使用 CSS 進行樣式設定
經常會發現開發人員會四處更改 HTML 以應用某種樣式。通常，将樣式設定為 CSS，并讓你的 HTML 以語義上有意義的方式建構。此規則有例外，但始終確定采用的結構不違反任何 HTML 語義規則。
首先，編寫 HTML 時要考慮内容，而不是樣式。比添加 CSS 并在出于樣式原因更改 HTML 之前盡力而為。
47 、連字元還是下劃線？
類名和 id 名稱最常見的分隔符是連字元，但無論你選擇什麼，都要堅持使用。
48 、 在你尋求 Javascript 幫助之前先找到 CSS 解決方案
我一直在分享如何在我的 Youtube UI/UX 庫中盡可能多地使用 CSS 建構通用元件，我想讓你明白的是，在你嘗試添加 Javascript 之前，你應該嘗試找到一個 CSS 解決方案（不要太老套），甚至，當你添加 Javascript 時，請考慮讓 CSS 完成大部分樣式并使用 Javascript 來處理觸發器和副作用之類的事情。
49 、 删除未使用的 CSS
出于同樣的原因，你應該釋出你将使用的唯一 CSS，考慮使用 PurgeCSS 之類的工具來删除渲染中不需要的 CSS。
這些工具将檢視你的 CSS 和 HTML，以确定你需要哪些樣式。
如果你不确定你是否需要這個，考慮使用浏覽器工具來查找你的代碼覆寫率，它會告訴你是否正在釋出未使用的樣式。
50 、 使用後處理器
真正考慮将 PostCSS 添加到你的項目中，以便你可以利用各種插件來優化你的 CSS，例如 Autoprefixer（添加 webkit-、moz-、ms- 等）、CSSNano（最小化你的 CSS）、postcss-preset-css（允許你編寫未來的 CSS），以及許多其他可以幫助你定義标準和規則、介紹工具、類實用程式、與 javascript 通信并标準化。
結論
沒有人會在一夜之間就會編寫更好的 CSS，這需要練習和調整。這些在我的 CSS 之旅中幫助了我很多，我相信它們也會幫助你。
每一次體驗都是獨一無二的，你應該保持開放的心态，嘗試各種事情，直到它們适合你為止。
不要害怕采用工具來幫助你，但也不要因為每個人都這樣做而急于跳入某事。在了解、編寫群組織 CSS 方面有藝術水準。無論你最終采用什麼規則，都要保持一緻。
感謝你的閱讀。祝你好運！
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)