當您開始使用網頁設計時，讓一切正常工作並檢視您希望它看起來如何的關鍵元素落在 CSS 手中。這是層疊樣式表的縮寫，它們允許您以任何您想要的方式設定HTML元素的樣式。
雖然您可以通過多種方式嘗試CSS（通常是內聯方式），但還有更好的方式來實現它。這符合您應該遵循的一系列最佳實踐，以確保您的程式碼功能正常、沒有不必要的體積並且組織良好。
今天，我們將為初學者重點介紹14個CSS最佳實踐，但即使是經驗豐富的專業人士有時也應該複習基礎知識。
- 組織樣式表
- 內聯CSS與外部CSS與內部CSS
- 縮小樣式表
- 使用前處理器
- 考慮一個CSS框架
- 從重置開始
- 類與ID
- 避免冗餘
- 如何正確匯入字型
- 使CSS可訪問
- 實施命名約定
- 避免使用!Important標籤
- 使用Flexbox
- WordPress提示：不要直接修改主題檔案
1. 組織樣式表
應用CSS最佳實踐時，您的首要任務是組織樣式表。您如何處理這將取決於您的專案，但作為一般規則，您需要遵守以下組織原則：
始終如一
無論您選擇如何組織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最佳實踐是縮小樣式表。有許多縮小工具可用於加快樣式表的載入時間。
調整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。類選擇器通過選擇具有類屬性的元素來工作。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 {就足夠了。
9. 如何正確匯入字型
正確匯入和使用字型是確保CSS清晰、簡潔和優化的另一種方法。
使用@font-face匯入字型
您可以將幾乎任何您想要的字型新增到您的網站，但您需要遵循特定的程式以確保它正常工作。
網路字型生成器
- 下載您要使用的字型。有很多地方可以獲取字型，包括Google和Adobe。確保您正在下載所選字型的TrueType字型檔案 (.ttf)。
- 將您要使用的自定義字型上傳到Font Squirrel提供的Webfont Generator。生成Web Font Kit後下載它。它應該包含幾個檔案，包括幾個不同的字型檔案，副檔名為.ttf、.woff、.woff2和.eot。還應該包含一個CSS檔案。
- 使用FTP將Web Font Kit上傳到您的網站。具體說明會因您的網路託管服務提供商而異，但通常，您可以使用FTP客戶端或網路託管服務商管理介面上的檔案管理器（如cPanel ）訪問您網站的檔案。
- 使用文字編輯器更新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 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">
儘可能自託管字型
上述過程適用於自託管字型，但重要的是要重申這是最好的方法。它大大加快了載入時間，意味著您無需依賴其他站點的速度來完成站點的載入過程。
小心字型變化
字型變體對於為您的網站新增有趣的樣式非常有用。但是，如果濫用，它們也可能直接破壞您的網站。
如果您在font-variation-settings下分配了多個樣式，它們很可能會重疊，並且其中一種會覆蓋另一種。你最好保持簡單並使用字型屬性，如下所示：
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
使用後備字型
儘管您可能會努力將自定義字型新增到您的網站並通過CSS使用它，但它仍然無法100%工作——尤其是當有人使用過時的Web瀏覽器訪問時。但是您仍然希望這些網站訪問者擁有愉快的瀏覽體驗。
為了適應這種情況，必須設定一個可以使用的備用字型，以防您的其他字型都不可用。為此，您只需在分配font-family時在首選字型之後列出備用字型。這樣，CSS將首先呼叫您的首選字型，然後是您的第二選擇，然後是您的第三選擇，依此類推。
根據W3Schools的說法，字型系列有五個主要類別。接下來是這些系列的列表，其中包含適合每個系列的流行後備字型。
- 襯線： Times New Roman，Georgia，Garamond
- 無襯線： Arial、Tahoma、Helvetica
- 等寬：Courier New
- 草書： Brush Script MT
- 奇幻：Copperplate, Papyrus
10. 讓CSS可訪問
每個人都應該讓他們的網站易於訪問——直截了當。這也適用於您的CSS方法。您的目標應該是使您的網站可供儘可能多的人使用，而實施可訪問性措施是實現這一目標的絕佳方式。
您可以通過多種方式使您的CSS可訪問：
- 為連結新增顏色變化以使它們脫穎而出。
- 按ESC鍵可關閉彈出視窗。那些使用螢幕閱讀器或放大鏡的人通常無法看到螢幕上的“X”來關閉彈出視窗，因此通過擊鍵將它們關閉是必不可少的。
- 有些裝置甚至不會首先顯示彈出視窗，因此請確保所有重要資訊都在其他地方傳達。
- 懸停元素（如工具提示）應由Tab鍵和滑鼠懸停觸發。
- 不要刪除輪廓。瀏覽器在鍵盤當前自動聚焦的元素周圍顯示輪廓。您可以使用outline:none禁用此功能，但您確實不應該這樣做，因為它對於使用螢幕閱讀器或視力低下且需要額外突出顯示/焦點進行導航的人來說非常寶貴。
- 改進焦點指示器。如上所述，突出顯示元素周圍的輪廓對於許多導航來說是必不可少的，但預設輪廓通常幾乎不可見。您可以通過使用:focus設定一種樣式來將其修改為更加明顯，從而將更多注意力吸引到當前焦點上。您可以使用:hover執行類似的操作來增強封面效果。修改:focus執行類操作的一個很好的例子來自華盛頓大學的一組可訪問性指南：
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. 使用Flexbox
當您嘗試將處理CSS的最佳實踐實施到您的工作流程中時，您可能還會從Flexbox中獲得更多收益。Flexbox是一種在頁面上建立Web佈局和對齊元素的靈活方式，而不是使用傳統的浮動選項。
根據CSS-Tricks，Flexbox是一個靈活的盒子模組，它是通過關注佈局在容器內的對齊和分佈方式來構建CSS的另一種方式。最好的部分是容器本身的大小甚至不必知道，而是包含的屬性將隨著容器大小的變化而“伸縮”。這是適應移動裝置的好方法。
另一個關鍵區別是Flexbox是“與方向無關的”，這意味著它的佈局不是垂直或水平結構的。這使它成為設計必須適應大量螢幕方向變化的複雜網站和應用程式的更好選擇。標準CSS佈局是基於塊的，而flexbox佈局依賴於“flex-flow”。同樣，CSS-Tricks提供了一個簡潔的繪圖來很好地說明這個概念：
flexbox佈局如何從CSS-Tricks工作
flexbox中的元素分佈在主軸和交叉軸上，其中每個元素和屬性都設計為根據flex容器的大小進行伸縮和流動。
14. WordPress提示：不要直接修改主題檔案
我們今天將在這裡討論的最後一個最佳CSS實踐是針對WordPress使用者的，特別是。直接修改主題檔案絕不是一個好主意。任何站點更新都可能消除這些更改或破壞您的站點。這不值得冒險。
相反，您可以使用Theme Customizer中的Additional CSS選項進行任何您想要的更改。但是，您應該記住，這確實會內聯注入CSS，並將其直接放在頭部。
如果您只想進行一兩次更改，這可能是一個可行的選擇，但是，您放置在附加CSS框中的任何內容都會保留，即使您執行主題更新、站點更新，或者即使您更改了主題.
現在，如果需要更強大的CSS修改，您最好從自定義CSS樣式表中新增這些內容，或者使用子主題直接修改子主題的style.css檔案。這種方法也是防更新的。
小結
對於一個真正的新手來說，一頭扎進建立有用且準確的CSS可能感覺很多，但花時間自學最佳實踐可以為您節省大量時間、精力和以後的麻煩。
評論留言