是的，您應該創建一個網絡風格指南

已發表: 2015-02-09

樣式指南，也稱為模式庫，是確保您的設計在您的網站增長或新團隊成員處理 Web 項目時按預期進行的好方法。每種樣式或模式都是您網站設計元素的一組標記和样式。

現代風格指南通常顯示為實際網頁，顯示網站或應用程序設計中的不同元素。當多個人甚至多個團隊正在處理一個 Web 項目時，樣式指南可以消除視覺元素應該是什麼樣子的猜測工作。這是讓每個人都在同一頁面上以保持項目一致性的好方法。

讓您的團隊步入正軌，讓您的代碼保持乾燥

除了視覺設計，樣式指南有助於確保 CSS 文件不會失控。我們都經歷過重複的代碼，所以讓我們努力保持代碼的可維護性並且沒有任何絕對必要的東西。如果團隊中的每個人都可以在一個地方看到所有樣式，那麼很容易看出當前存在哪些樣式，因此它們不會在樣式表中重複。

因為您的風格指南是一個包含模塊設計和其他設計元素的集合，所以很容易看出新的設計元素是否符合既定標準。

眾所周知，網頁設計往往有點瘋狂。好消息是，有效的網頁設計，尤其是在使用樣式指南時，都在您的控制範圍內。風格指南的範圍從非常簡單到非常複雜。我在這裡提供了一些想法來幫助您入門。

風格指南-01

包含標有十六進制顏色的樣本是個好主意。你未來時間緊迫的自己會感謝你的！我不記得有多少次我問過或被問過多少次，“那個十六進制顏色又是什麼？” 快速參考肯定會對每個人都派上用場。

描述性標題佔位符可以幫助您的團隊了解佈局中的元素需要在什麼樣的上下文中使用。

樣式指南還應包括建議的標題層次結構。哪個是 h1、h2、h3 等等？諸如主標題、子標題和側邊欄小部件標題之類的描述性詞也消除了很多未來的猜測。

不要忘記包含不太常見的排版元素，例如塊引號。您必須指定所有文本示例，即使是很少使用的示例。如果您對塊引用或推薦有特定的標題和正文樣式，請使用與更常用元素相同的細節來指定它們。

包括對您項目的圖像的一般處理。圖像是否需要邊框或獨特的不透明效果？有懸停交互嗎？如果是這樣，請在您的風格指南中找到它。如果有多種治療方法，包括每一種，並定義何時使用某些治療方法。

風格指南-02

從用戶體驗的角度來看，鏈接、導航和表單元素是三個非常重要的鴨子。您無疑知道文本鏈接、按鈕和導航樣式必須包含在您的樣式指南中。但是，很容易忘記為每個樣式包括正常、懸停、訪問和活動樣式的實例。將這些記錄在案，以確保您網站的每個細節的一致性。

當出色的樣式與表單合併時，沒有比在樣式指南中展示所有 Web 表單元素更好的方法了。這是一種很好的方式來繪製和盤點所有表單元素，哪些有效，哪些無效，以及哪些缺失。

具體來說，以下是表單樣式要包含的一些關鍵組件：

如果您有幸從頭開始創建風格指南這一壯舉，我會為您提供一些有用的考慮。

我個人喜歡從一個空白的 HTML 文件開始，然後從那裡開始。將此樣式指南鏈接到實際網站或應用程序的 CSS。這樣一來，更改就會反映在兩個地方，您不必擔心維護兩個 CSS 文件。

首先盤點您網站的所有元素，然後將每個元素所需的準確標記添加到您的樣式指南中。聽起來很嚇人？

首先評估頁面網格，然後用排版和調色板等重要元素填充樣式指南，隨著您的工作添加更多模式。更多的設計模式可以包括圖像、塊引用、側邊欄樣式、按鈕和表單樣式。

相信我。這是值得花的時間。提醒一下，沒有什麼是永久的，一切都可以輕鬆調整和擴展，這也很好。

如果您追求速度並且手動輸入所有樣式不適合您，那麼有一些很棒的工具可以輕鬆創建和使用可重複使用的模式。

例如，Jeremy Keith 的 Pattern Primer 將生成文件夾中所有模式的列表。這是一個簡單的 PHP 工具，用於將代碼片段轉換為模式庫。您將看到呈現為 HTML 的模式。

另一個不錯的選擇是 Kyle Neath 的 KSS，它也是樣式指南文檔的絕佳工具。這些生成的自動樣式是一組指南，可幫助您生成與 CSS 文檔相關的 HTML 樣式指南。 KSS 旨在與 CSS 預處理器一起工作，並適應許多 CSS 框架。

眾所周知，一個網站永遠不會完成。如果需要新元素，只需添加即可輕鬆擴展您的生活方式指南。

您最初的樣式指南可能與您最終構建的頁面不同，但它是測試新樣式的絕佳機會，並且對於針對多個瀏覽器進行設計特別有用。

想要一些很棒的風格指南的真實例子嗎？你說對了：

美國代碼
郵件黑猩猩
銷售隊伍

通過在您的設計中提供一致性，您的樣式指南使網站擴展和未來的網絡增強變得容易。隨著樣式的添加和修改，此文檔是讓團隊了解並展示您的樣式項目的好方法。