Go Wiki: Go CSS 編碼規範

在編輯此頁面之前，請先討論更改，即使是微小的更改。很多人都有自己的想法，這裡不是進行編輯戰的地方。

Go 的命名約定借鑑了Medium 的風格指南以及SUIT CSS 框架中的工作。也就是說，它依賴於結構化的類名和有意義的連字元（即，不只是用連字元來分隔單詞）。這是為了幫助繞過當前將 CSS 應用於 DOM 的限制（即缺乏樣式封裝），並更好地傳達類之間的關係。

我們要求使用純 CSS 而非預處理器，如 LESS、SASS 等。這是為了避免額外的工具依賴。

JavaScript

語法：js-<targetName>

特定於 JavaScript 的類可以減少由於元件結構或主題的更改而無意中影響任何必需的 JavaScript 行為和複雜功能的風險。如果您透過 JavaScript 與 DOM 互動，則必須使用這些類。在實踐中，它們看起來是這樣的：

<a href="/login" class="Button Button--primary js-login"></a>

再次強調，在任何情況下，都不能對特定於 JavaScript 的類進行樣式設定。

元件

語法：[namespace-]<ComponentName>[-descendantName][--modifierName]

在閱讀和編寫 HTML 和 CSS 時，元件驅動開發提供了多種好處。

• 它有助於區分元件根、後代元素和修飾符的類。
• 它保持了選擇器的特異性較低。
• 它有助於將表現語義與文件語義解耦。

您可以將元件視為包含特定語義、樣式和行為的自定義元素。

名稱空間（可選）

如果需要，元件可以加上名稱空間字首。例如，您可能希望透過為所有元件新增名稱空間字首來避免庫與您的自定義元件之間發生潛在的衝突。

.godoc-Button { /* … */ }
.godoc-Tabs { /* … */ }

這使得在閱讀 HTML 時可以清楚地知道哪些元件是您的庫的一部分。

ComponentName

元件的名稱必須使用駝峰式命名法。

.MyComponent { /* … */ }
<article class="MyComponent">
  …
</article>

ComponentName–modifierName

元件修飾符是修改基礎元件某種表現形式的類。修飾符名稱必須使用駝峰式命名法，並用兩個連字元與元件名稱分隔。該類應該額外包含在 HTML 中，而不是替換基礎元件類。

/* Core button */
.Button { /* … */ }
/* Default button style */
.Button--default { /* … */ }
<button class="Button Button--primary">…</button>

ComponentName-descendantName

元件後代是指附加到元件後代節點上的類。它負責代表特定元件直接應用表現到後代上。後代名稱必須使用駝峰式命名法。

<article class="Tweet">
  <header class="Tweet-header">
    <img class="Tweet-avatar" src="{$src}" alt="{$alt}">
    …
  </header>
  <div class="Tweet-body">
    …
  </div>
</article>

ComponentName[aria-]

幾乎所有情況下，元件的狀態都可以使用 ARIA（aria-expanded、aria-disabled 等）來表示，因此它們推薦用於基於狀態的元件修改。在極少數情況下，如果存在無法使用 ARIA 表示的狀態，則可以使用格式為 is-stateName 的 CSS 類。CSS 狀態名稱必須使用駝峰式命名法。切勿直接樣式化這些屬性/類；它們應始終用作相鄰類或屬性。

JavaScript 可以新增/刪除這些屬性/類。每個元件都必須定義自己的狀態樣式（因為它們是元件作用域的）。

.Tweet { /* … */ }
.Tweet[aria-expanded=true] { /* … */ }
.Tweet.is-blorked { /* … */ }
<article class="Tweet is-blorked" aria-expanded="true">
  …
</article>

顏色

優先使用小寫十六進位制值、RGB 或 RGBA，而不是命名值、HSL 或 HSLA 值。在適用時使用短格式十六進位制值。

正確

#fff;
#f1f2f3;
rgb(50, 50, 50);
rgba(50, 50, 50, 0.2);

錯誤

#FFFFFF;
#F1F2F3;
white;
hsl(120, 100%, 50%);
hsla(120, 100%, 50%, 1);

格式化

以下是一些高階頁面格式化樣式規則。

間距

CSS 規則應以逗號分隔，但每條規則應另起一行。

正確

.Content,
.Content-edit {
  …
}

錯誤

.Content, .Content-edit {
  …
}

CSS 塊之間應用單個換行符分隔。不要用兩個，也不要用零個。

正確

.Content {
  …
}
.Content-edit {
  …
}

錯誤

.Content {
  …
}

.Content-edit {
  …
}

引號

CSS 中的引號是可選的。我們使用單引號，因為它在視覺上更清楚地表明字串不是選擇器或樣式屬性。

正確

background-image: url('/img/you.jpg');
font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial;

錯誤

background-image: url(/img/you.jpg);
font-family: Helvetica Neue Light, Helvetica Neue, Helvetica, Arial;

編寫簡單的選擇器

避免使用簡單的選擇器序列（“複合選擇器”）。

唯一的例外是基於狀態的選擇器，這些選擇器是動態新增的，用於指示狀態更改（例如，一個顯示“[aria-expanded=true]”的推文）。

正確

/* State-based simple selector. */
tweet[aria-expanded=true] {
  ...
}

錯誤

/* Sequence of simple selectors. */
button.foo.bar {
  ...
}

圖片

在 HTML 標記中為圖片新增 height 和 width 屬性，以幫助最小化頁面載入期間的佈局偏移。

<img src="url/to/image.png" height="240" width="160">