初學者的 14 個 CSS 最佳實踐

已發表: 2022-07-25

當您開始使用網頁設計時，讓一切正常工作並查看您希望它看起來如何的關鍵元素落在 CSS 手中。 這是層疊樣式表的縮寫，它們允許您以任何您想要的方式設置 HTML 元素的樣式。

雖然您可以通過多種方式嘗試 CSS（通常是內聯方式），但還有更好的方式來實現它。 這符合您應該遵循的一系列最佳實踐，以確保您的代碼功能正常、沒有不必要的體積並且組織良好。

今天，我們將為初學者重點介紹 14 個 CSS 最佳實踐，但即使是經驗豐富的專業人士有時也應該複習基礎知識。

1. 組織樣式表

應用 CSS 最佳實踐時，您的首要任務是組織樣式表。 您如何處理這將取決於您的項目，但作為一般規則，您需要遵守以下組織原則：

始終如一

無論您選擇如何組織 CSS，請確保您的選擇在整個樣式表以及整個網站中保持一致。

從命名類到行縮進到註釋結構，保持一致將幫助您更輕鬆地跟踪您的工作。 此外，它確保以後進行更改不會令人頭疼。

CSS：使您的網站外觀和功能正常的關鍵。 為您的下一個項目添加書籤！ 點擊推文

自由使用換行符

儘管 CSS 即使在視覺上很難看也能正常工作，但如果您使用大量換行符來保持每個代碼片段的獨立和清晰，那麼它對您和任何其他將使用您的代碼的開發人員來說都會更好。

通常，最好將每個屬性和值對放在一個新行上。

來自 Mozilla.org 的 CSS 代碼的屏幕截圖，顯示了 CSS 在結構化時的易讀性，因此屬性和值對存在於各自的行中。
CSS 代碼

在有意義的地方創建新的部分

同樣，您如何設置樣式表在很大程度上取決於您正在處理的網站類型。 但作為一般規則，最好為樣式設置部分，因為它們將被使用。 因此，文本樣式部分、列表和列部分、導航和鏈接部分等等。 您甚至可以為特定頁面創建部分，這些部分的樣式可能與商店或常見問題解答等其他部分不同。

評論你的代碼

即使只有您會看到您的 CSS，但對您的評論進行徹底的評論仍然是一個好主意。 評論將如下所示：

 /* This is what a standard CSS comment looks like */

這使您更容易一目了然地找出每個部分的相關內容，而無需稍後仔細研究每一行。

評論可以幫助您定義部分，但您也可以使用它們來提供有關您所做決定的見解 - 特別是如果您覺得以後可能會忘記。

為大型項目使用單獨的樣式表

這不適用於每個網站，但如果您有一個需要大量特定 CSS 的大型網站，那麼使用多個樣式表是個好主意。 沒有人——包括你——應該滾動很長時間才能找到你需要的單行代碼。

避免麻煩並為不同的站點部分創建單獨的樣式表——尤其是當它們具有完全不同的樣式時。

例如，您可能希望為全局樣式創建一個樣式表，並為您的在線商店創建另一個樣式表，其中包含產品描述、標題或定價的專用樣式。

2. 內聯 CSS 與外部 CSS 與內部 CSS

在構建網站和調整其樣式時，您可能需要處理三種不同類型的 CSS。 讓我們來談談每個是什麼和做什麼，然後討論你應該在你的項目中實際使用哪些。

  • 內聯 CSS。 這允許您設置特定 HTML 元素的樣式，
  • 外部 CSS 。 這涉及使用諸如樣式表之類的文件來設置整個站點的樣式。
  • 內部 CSS。 這允許您設置整個頁面而不是特定元素的樣式。

許多開發人員建議完全避免使用內聯 CSS，因為它通常無法緩存，並且建議避免將 CSS 拆分到多個文件中。 至少，它應該謹慎使用。

如果您要在網站的單個部分、文本位或單個頁面的區域上使用一些樣式，我們真的可以看到對它的需求。 這可能是內聯 CSS 是可行解決方案的唯一情況。

除此之外，根據您的需要使用外部 CSS 或內部 CSS 是更好的選擇，因為它們可以節省您的時間和精力。 確定樣式一次，然後在您的網站上應用它們。 繁榮 - 完成。

3. 縮小你的樣式表

另一個 CSS 最佳實踐是縮小樣式表。 有許多縮小工具可用於加快樣式表的加載時間，包括直接在 Kinsta CDN 中。

調整 Kinsta CDN 中的代碼縮小設置。
調整 Kinsta CDN 中的代碼縮小設置。

這使您可以調整整個網站的代碼縮小設置。

4.使用預處理器

Sass/SCSS 等預處理器讓您可以使用變量和函數，更好地組織 CSS 並節省時間。 它們通過允許您從預處理器語法創建 CSS 來工作。

這意味著預處理器就像一個“CSS +”，其中包含一些通常不存在於 CSS 中的特性。 添加這些功能通常會使輸出 CSS 更清晰且更易於導航。

您需要在網站服務器上安裝 CSS 編譯器才能使用預處理器。 一些最流行的預處理器包括 Sass、LESS 和 Stylus。

Sass 主頁的屏幕截圖。
薩斯

5. 考慮一個 CSS 框架

CSS 框架在某些情況下可能很有用，但對很多人來說可能是不必要的，尤其是當您的網站規模較小時。

框架可以很容易地快速部署大型項目，也可以避免錯誤。 它們提供了標準化的好處，這在幾個人同時從事一個項目時是必不可少的。

每個人都將使用相同的命名程序、相同的佈局選項、相同的註釋程序等等。

另一方面，它們也會導致網站看起來很一般，並且大部分代碼最終可能會被未使用。

Bootstrap 主頁的屏幕截圖。
引導程序

您以前可能遇到過 CSS 框架。 Bootstrap 和 Foundation 是兩個最流行的例子。 其他框架包括 Tailwind CSS 和 Bulma。

6.從重置開始

另一件要迅速付諸實踐的事情是通過 CSS 重置開始您的開發工作。 使用 normalize.css 之類的東西可以使所有瀏覽器都以一致的方式呈現頁面元素，同時遵循最新的標準以最大程度地減少瀏覽器的不一致。

此重置實際上是一個小的 CSS 文件，您將其上傳到您的網站，以便為 HTML 元素的樣式添加更高級別的跨瀏覽器一致性，並用作進行 CSS 重置的更新方式。

7. 類與 ID

在遵循 CSS 最佳實踐時，您應該注意的下一件事是如何處理類和 ID。 如果您不熟悉，讓我們簡要定義一下：

  • 班級。 類選擇器通過選擇具有類屬性的元素來工作。 class 屬性中的內容決定瞭如何選擇 HTML 元素。 在代碼中看起來像這樣： .classname
  • ID。 另一方面，ID 通過選擇具有 ID 屬性的元素來工作。 ID 屬性必須與選擇器的值相同才能正常工作。 你可以通過這個符號在 CSS 中發現一個 ID： # 。

ID 用於選擇單個元素，而類用於選擇多個元素。 您將使用 ID 將樣式應用於單個 HTML 元素。 您將使用一個類將一種樣式應用於多個 HTML 元素。 遵循此一般規則有助於保持代碼乾淨整潔，並減少不必要或重複代碼的實例。

類似於我們上面對內聯 CSS 與外部 CSS 的討論，您可以使用 ID 將樣式應用於單個元素。 基本上，ID 旨在用於設置頁面上的異常樣式，而不是用於適用於整個頁面或網站的總體樣式。

8. 避免冗餘

要遵循的另一個 CSS 最佳實踐是盡可能避免冗餘。 以下是將這種做法應用於您的工作流程的一些一般提示：

使用 DRY 方法

DRY 方法代表“Don't Repeat Yourself”，基本上是你永遠不應該在 CSS 中重複代碼的想法。 因為在最好的情況下，您一遍又一遍地手動輸入這些樣式是浪費時間和重複，但在最壞的情況下，它會主動減慢您的網站速度。

審查您的代碼以刪除冗餘是一種很好的做法。 例如，標籤不需要在同一部分中兩次識別字體大小。 刪除重複，您的代碼也會更好地閱讀和執行。

使用 CSS 速記

CSS 速記是減少代碼佔用空間量的好方法，同時仍能按應有的方式執行。 如果有意義的話，您可以在一行中組合多種樣式。 例如，如果您要設置特定 div 的樣式，您可以在一行中列出邊距、填充、字體、字體大小和顏色。

向您的元素添加多個類

在適用的情況下，您還可以通過向一個元素添加多個類來避免冗餘。 例如，如果您的頁面內容已經通過.left類向左浮動，但您想在頁面右側放置一列，您可以將其添加到元素中以防止混淆，並具體告訴 CSS 您是哪個元素'想在標準左對齊的頂部向左浮動。

最好的部分是您可以向元素添加任意數量的類，只要它用空格分隔即可。

盡可能組合元素

與其一一列出元素，不如將它們組合起來以節省空間和時間。 通常，單個樣式表中的元素將具有相同（或相似）的樣式。 如果它們都共享相同的樣式，則無需列出頁面上每個文本元素的字體、顏色和對齊方式。 相反，將它們組合成一行，如下所示：

 h1, h2, h3, p { font-family: ariel, color: #00000 }

避免不必要的額外選擇器

有時，當您完成網站設計時，您的代碼會變得有些混亂。 這就是為什麼在事後返回並刪除不必要的選擇器很重要的原因。 你也應該留意過於復雜的選擇器。 例如，如果您要在網站上設置樣式列表，則不需要使用“body”或“container”之類的選擇器或任何類似性質的選擇器。 只要.classname li {就足夠了。

九、如何正確導入字體

正確導入和使用字體是確保 CSS 清晰、簡潔和優化的另一種方法。

使用@font-face 導入字體

您可以將幾乎任何您想要的字體添加到您的網站，但您需要遵循特定的程序以確保它正常工作。

Webfont 生成器的屏幕截圖
網絡字體生成器
  1. 下載您要使用的字體。 有很多地方可以獲取字體，包括 Google 和 Adob​​e。 確保您正在下載所選字體的 TrueType 字體文件 (.ttf)。
  2. 將您要使用的自定義字體上傳到 Font Squirrel 提供的 Webfont Generator。 生成 Web Font Kit 後下載它。 它應該包含幾個文件，包括幾個不同的字體文件，擴展名為 .ttf、.woff、.woff2 和 .eot。 還應該包含一個 CSS 文件。
  3. 使用 FTP 將 Web Font Kit 上傳到您的網站。 具體說明會因您的網絡託管服務提供商而異，但通常，您可以使用 FTP 客戶端或網絡託管服務商管理界面（如 cPanel）上的文件管理器訪問您網站的文件。
  4. 使用文本編輯器更新 CSS 文件。 您喜歡的任何 HTML 文本編輯器都可以使用 NotePad 或 Sublime。 在此文件中，它將列出一個“源 URL”。 您需要對此進行更新以反映 Web Font Kit 現在在您的 Web 服務器上的位置。 將每個字體文件存儲在您的網絡主機上的文件路徑複製到此文件中，如下所示：
 @font-face { font-family: "FontName"; src: url("https://sitename.com/css/fonts/FontName.eot"); src: url("https://sitename.com/css/fonts/FontName.woff") format("woff"), url("https://sitename.com/css/fonts/FontName.otf") format("opentype"), url("https://sitename.com/css/fonts/FontName.svg#filename") format("svg"); }

然後，您可以通過使用font-family標記將新字體添加到站點的 CSS 文件中來使用它們。

為了提高站點性能並防止在加載站點時對其佈局進行奇怪的重新調整，您可以預加載字體。 首先預加載字體和加載 WOFF2 字體（或最小字體大小）可以顯著提高性能。 為此，您可以在<head>標記中添加一行代碼。 Better Web Type 提供了一個簡潔的示例：

 <link rel="preload" as="font" href="/assets/fonts/3A1C32_0_0.woff2" type="font/woff2" crossorigin="crossorigin">

您可以做的另一件事是限制自定義字體的字符集。 如果您只使用字體中的幾個字符（可能是標題或徽標），則不需要調用整個字符集，只需要您實際需要的幾個。 根據新代碼，要僅請求字符“Hello”，您可以執行以下操作：

 <link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">

盡可能自託管字體

上述過程適用於自託管字體，但重要的是要重申這是最好的方法。 它大大加快了加載時間，意味著您無需依賴其他站點的速度來完成站點的加載過程。

因停機時間和 WordPress 問題而苦苦掙扎？ Kinsta 是旨在節省您時間的託管解決方案！ 查看我們的功能

小心字體變化

字體變體對於為您的網站添加有趣的樣式非常有用。 但是，如果濫用，它們也可能直接破壞您的網站。

如果您在font-variation-settings下分配了多個樣式，它們很可能會重疊，並且其中一種會覆蓋另一種。 你最好保持簡單並使用字體屬性，如下所示：

 .bold { font-weight: bold; } .italic { font-style: italic; }

使用後備字體

儘管您可能會努力將自定義字體添加到您的網站並通過 CSS 使用它，但它仍然無法 100% 工作——尤其是當有人使用過時的 Web 瀏覽器訪問時。 但是您仍然希望這些網站訪問者擁有愉快的瀏覽體驗。

為了適應這種情況，必須設置一個可以使用的備用字體，以防您的其他字體都不可用。 為此，您只需在分配font-family時在首選字體之後列出備用字體。 這樣，CSS 將首先調用您的首選字體，然後是您的第二選擇，然後是您的第三選擇，依此類推。

根據 W3Schools，字體系列有五個主要類別。 接下來是這些系列的列表，其中包含適合每個系列的流行後備字體。

  • 襯線： Times New Roman，喬治亞州，Garamond
  • 無襯線字體： Arial、Tahoma、Helvetica
  • 等寬：快遞新
  • 草書： Brush Script MT
  • 奇幻：銅版紙、紙莎草紙

10. 讓 CSS 可訪問

每個人都應該讓他們的網站易於訪問——直截了當。 這也適用於您的 CSS 方法。 您的目標應該是使您的網站可供盡可能多的人使用，而實施可訪問性措施是實現這一目標的絕佳方式。

您可以通過多種方式使您的 CSS 可訪問：

  • 為鏈接添加顏色變化以使它們脫穎而出。
  • 按 ESC 鍵可關閉彈出窗口。 那些使用屏幕閱讀器或放大鏡的人通常無法看到屏幕上的“X”來關閉彈出窗口，因此通過擊鍵將它們關閉是必不可少的。
  • 有些設備甚至不會首先顯示彈出窗口，因此請確保所有重要信息都在其他地方傳達。
  • 懸停元素（如工具提示）應由 Tab 鍵和鼠標懸停觸發。
  • 不要刪除輪廓。 瀏覽器在鍵盤當前自動聚焦的元素周圍顯示輪廓。 您可以使用outline:none禁用此功能，但您確實不應該這樣做，因為它對於使用屏幕閱讀器或視力低下且需要額外突出顯示/焦點進行導航的人來說非常寶貴。
  • 改進焦點指示器。 如上所述，突出顯示元素周圍的輪廓對於許多導航來說是必不可少的，但默認輪廓通常幾乎不可見。 您可以通過使用:focus設置一種樣式來將其修改為更加明顯，從而將更多注意力吸引到當前焦點上。 您可以使用:hover執行類似的操作來增強封面效果。 修改:focus in action 的一個很好的例子來自華盛頓大學的一套可訪問性指南：
 a { color: black; background-color: white; text-decoration: underline } a:focus, a:hover { color: white; background-color: black; text-decoration: none }

此代碼片段使鏈接顯示為白色背景上的黑色文本，但當置於鍵盤焦點下（當用戶切換到元素時）時，鏈接會變為背景上的白色文本。 懸停時也會出現同樣的效果。

11. 實施命名約定

目前它可能看起來很小，但你決定用 CSS 命名的東西會產生持久的影響——如果做得不正確，將來可能會浪費你的時間和金錢。 在開始編寫 CSS 之前，您應該確定一系列命名約定並遵守它們。

這將為您以後的調試節省大量時間，因為您在編寫代碼時不太可能引用錯誤的元素。 根據 FreeCodeCamp 的說法，一個好的方法是堅持 CSS 名稱的標準格式，即font-weight與fontWeight 。

使用 BEM 命名約定

保持名稱一致的一個好方法是使用 BEM 命名約定。 BEM 的全部意義在於將用戶界面分解為可以反復重用的組件。

BEM 代表塊、元素和修飾符。 但是，讓我們分解一下這實際上意味著什麼。

  • 塊：塊可以是您網站上的任何設計塊，例如菜單、頁眉、頁腳或列。 您的塊應該具有類似 .main-nav 或 .footer 的名稱。
  • 元素。 元素描述了組成每個塊的點點滴滴。 想想諸如字體、顏色、按鈕、列表或鏈接之類的東西。 使用 BEM 命名約定時，通過在元素名稱前放置兩個下劃線來標識元素。 因此，如果我們想討論您網站標題中使用的字體，它在具有 BEM 命名約定的 CSS 中看起來像這樣： .header__font
  • 修飾符。 BEM 拼圖的最後一塊是修飾符。 修飾符是您在塊中建立元素樣式的方式。 其中包括字體名稱、粗細和大小等內容； 顏色值； 和對齊值。 繼續使用上面建立的示例，如果您想在標題中設置字體顏色，您可以這樣寫出來，元素和修飾符用兩個連字符分隔： .header__font–red

遵循這個命名約定——或者你的團隊決定的其他東西——可以使以後的編輯和調試體驗更加愉快。

12. 避免使用 !Important 標籤

在 CSS 工作例程中實施的另一個最佳實踐是盡可能避免過度使用!important標記。

雖然它可以解決問題，但它的使用通常會導致依賴它作為拐杖。 這可能會導致整個代碼中的所有!important標記一團糟，最終可能會破壞您的網站。

這實際上歸結為特異性。 如果選擇器非常具體，您的 Web 瀏覽器將確定它比使用不太具體的選擇器更重要。 !important 標籤可用於識別比其他屬性更重要的屬性。

這可能會變得很棘手，因為您最終需要使用多個 !important 標籤——在特定場景中，每個標籤都會覆蓋前一個標籤。 這樣做太多會導致您的網站崩潰或樣式加載不正確。 大多數情況下，此標記被用作短期解決方案，但它通常會變成永久性的，然後可能會在以後調試時引起問題，尤其是。

使用 !important 標籤的唯一一次被認為通常可以接受的情況之一是允許最終用戶覆蓋樣式以與屏幕閱讀器和其他輔助功能一起使用。 在處理實用程序類時它也很有用。

13. 使用彈性盒

當您嘗試將處理 CSS 的最佳實踐實施到您的工作流程中時，您可能還會從 Flexbox 中獲得更多收益。 Flexbox 是一種在頁面上創建 Web 佈局和對齊元素的靈活方式，而不是使用傳統的浮動選項。

根據 CSS-Tricks，Flexbox 是一個靈活的盒子模塊，它是另一種構建 CSS 的方法，它關注你的佈局如何在容器中對齊和分佈。 最好的部分是容器本身的大小甚至不必知道，而是包含的屬性將隨著容器大小的變化而“伸縮”。 這是適應移動設備的好方法。

另一個關鍵區別是 Flexbox 是“與方向無關的”，這意味著它的佈局不是垂直或水平結構的。 這使它成為設計必須適應大量屏幕方向變化的複雜網站和應用程序的更好選擇。 標準 CSS 佈局是基於塊的，而 flexbox 佈局依賴於“flex-flow”。 同樣，CSS-Tricks 提供了一個簡潔的繪圖來很好地說明這個概念：

CSS-Tricks 中 flexbox 佈局如何工作的示意圖。
flexbox 佈局如何從 CSS-Tricks 工作

flexbox 中的元素分佈在主軸和交叉軸上，其中每個元素和屬性都設計為根據 flex 容器的大小進行伸縮和流動。

14. WordPress 提示：不要直接修改主題文件

我們今天將在這裡討論的最後一個最佳 CSS 實踐專門針對 WordPress 用戶。 直接修改主題文件絕不是一個好主意。 任何站點更新都可能消除這些更改或破壞您的站點。 這不值得冒險。

相反，您可以使用 Theme Customizer 中的Additional CSS選項進行任何您想要的更改。 但是，您應該記住，這確實會內聯注入 CSS，並將其直接放在頭部。

如果您只想進行一兩次更改，這可能是一個可行的選擇，但是，您放置在附加 CSS框中的任何內容都會保留，即使您執行主題更新、站點更新，或者即使您更改了主題.

現在，如果需要更強大的 CSS 修改，您最好從自定義 CSS 樣式表中添加這些內容，或者使用子主題直接修改子主題的style.css文件。 這種方法也是防更新的。

當您開始使用 CSS Click to Tweet時，請將本指南放在手邊

概括

對於一個真正的新手來說，一頭扎進創建有用且準確的 CSS 可能感覺很多，但花時間自學最佳實踐可以為您節省大量時間、精力和以後的麻煩。

我們希望這一系列的最佳實踐將幫助您在未來幾年建立功能性、實用性和可訪問性網站的正確道路。 祝你好運！