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 時清楚哪些元件是程式庫的一部分。

元件名稱

元件名稱必須以駝峰式大小寫寫入。

.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 狀態名稱必須為駝峰式大小寫。切勿直接設定這些屬性/類別的樣式；它們應始終用作相鄰類別或屬性。

JS 可以新增/移除這些屬性/類別。每個元件都必須定義其自己的狀態樣式（因為它們的範圍限於元件）。

.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 區塊應以單一新行分隔。不是兩個。不是 0。

正確

.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 標記中加入圖片的高度和寬度屬性，有助於在載入頁面時將版面位移降到最低。

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

此內容是 Go Wiki 的一部分。