程式碼風格指南

• 請盡量將每行字元數保持在最多 80 個字元。
• 在命名任何東西時，清晰度優先於簡潔性。
• 頁面、局部和佈局以 .liquid 或 .md 結尾。

標記語言標記語言永久連結

大多數情況下，我們使用 LiquidJS 和 Markdown 來撰寫標記語言。如果您需要在任何地方使用一般的 HTML，請撰寫 HTML5，但盡量採用嚴格的 XHTML 風格。

• 使用格式良好的標記語言；元素應正確巢狀，並且不要重疊。
• 以小寫字母撰寫元素和屬性。
• 所有屬性都必須加上引號。
• 自閉合的空元素在斜線前加上一個空格：(<hr />)

樣式樣式永久連結

此網站使用 SCSS 語法的 Sass。在重寫任何東西之前，請確保您正在使用我們提供的類別，除非您有其他理由。

• 為了清晰起見，請使用 Brad Frost 提倡的樣式
  • 請注意，較舊的類別尚未使用此樣式，但我們會隨著時間推移進行重構。
  • 使用 sl- 作為全域命名空間。
  • 使用 Harry Roberts 提倡的類別前綴，但我們使用的是更簡化的集合。
    • c- 代表**元件**。範例：sl-c-card。
    • l- 代表**佈局**。範例：sl-l-grid。
    • is- 和 has- 代表狀態。範例：sl-is-active。
    • js- 代表專為 JavaScript 鎖定而建立的類別。範例：sl-js-toggle-navigation。
  • 使用 BEM 語法。
    • **區塊 (Block)** – 整體元件物件。範例：sl-c-card。
    • **元素 (Element)** – 區塊的任何子項。範例：sl-c-card__header。
    • **修飾符 (Modifier)** – 任何變體。可以放在區塊上。範例：sl-c-card--primary。也可以放在元素上。範例：sl-c-card__header--large。
• 盡可能保持類別的扁平化，避免過於深入的巢狀。
• 避免使用元素選擇器，**除非**您正在使用包裝器工具來鎖定內部的所有內容（例如，圍繞 Markdown 區塊或其他長篇文字的類別，以便正確地設定所有元素的樣式）。這專門用於不適合使用類別的情況。執行此操作時請務必小心。我們可以在程式碼審查中針對此類情況提供您回饋。
• 對於變數、Mixin、佔位符選擇器或類別的命名，請使用從一般到特定的方法。有關更多詳細資訊，請參閱這篇文章。
• 以逗號分隔的選擇器應寫在不同的行上。