大家好，我是 Eric。
我們今天來到了 CSS 篇章的最後一部份，關於 CSS 的編碼標準及 SCSS/Sass。如同我們在 HTML 的編碼標準裡提到的，這些標準主要目的是在統一編碼的風格。但是對於加入開源專案有興趣的任何人，我還是建議閱讀不同社群中所提供的編碼標準，因為讓自己的程式碼符合開發手冊，可以說是程式碼品質的最低底線。
根據 WordPress 的開發人員手冊，我們可以大略整理出下列編碼標準：
這些標準主要是統一撰寫風格，不同的開發社群對可能會有不同的規範。
<section>) 的不同選擇器間，須空一行；不同區段則空兩行。/** 正確作法 */
#selector-1,
#selector-2,
#selector-3 {
background: #fff;
color: #000;
}
/** 錯誤作法 */
#selector-1, #selector-2, #selector-3 {
background: #fff; color: #000;
}
除了上述的架構上的標準外，對屬性值也有下列的要求：
display: block;
() 與內容間不要有空格。如 rgba(255, 255, 0, 0);
;。font-weight) 必須用數字定義，譬如使用 700 而非 Bold。transition 使用的 0s 秒數之外。雖然命名方式不符合下列標準，瀏覽器一樣可以正確轉譯樣式，但編碼標準的目的在於讓「其他人」可以更快進入狀況，因此透過這些標準，可以將選擇器與 JavaScript 的變數，以及 PHP 的變數命名做區隔。
-) 連結，而非底線 (_)。錯誤範例如： .thisElement 與 .this_element。cx-2r 這種類型，而應該用 context-2-rows。")。如 [type="text"]，而非 [type=text]。.container 會比 div.container 更好。這些最佳作法的目的，在於盡可能不要讓 CSS 檔案過度臃腫。隨著 WordPress 版本不斷更新，不論是 CSS 或是 JavaScript 這些靜態資源，或是資料庫，都無可避免地會逐漸龐大。因此開發手冊的最佳作法，便提供避免這種情況發生的方法。
postion 出問題時，比起在子層級元素新增一個 position 屬性，可以試著刪除掉上層元素的 position 屬性。.fix-this {margin-bottom: 32px;} 這種只有一次性的選擇器。.highlight a 這種選擇方式，將 .highlight 這個類型直接定義在 <a class="highlihght"> 會更好。height 屬性的時機：一般來說，用 line-height 會讓排版較有彈性，而 height 這個樣式屬性則適合在包含其他元素時使用 (例如嵌入圖片時，定義圖片區塊高度)。這裡使用這個例子來顯示 height 可能造成的結果。display: block;
相較於 JavaScript 與 PHP。WordPress 開發手冊對 CSS 註解的規範較少，這是因為 CSS 和 HTML 一樣，並不是程式語言，不會出現需要解釋函式功能跟參數的情況。但手冊中建議對於使用 !important 這個屬性值的地方，務必要補上註解。
在 CSS 篇章中，我們所討論到的各種屬性、選擇器的內容，都可以直接套用在我們的 style.css 樣式表當中。但如同前面所說的，隨著網站不斷更新，許多新功能加入的情況下，樣式表無可避免地會變龐大。
這時候「模組化」便相當重要。
透過 SCSS 或 Sass，我們可以將 style.css 這份檔案分割成十幾個、甚至幾十個檔案，最後再透過編譯出完整的 style.css 檔案。網路上有許多比較 SCSS 與 Sass 的文章，但因為這並非本次的重點，所以就不贅述。以下的範例都會以我自己使用的 SCSS 為例。
有關 SCSS/Sass 的安裝方式，可以參考 Sass 的安裝說明，也可以參考這篇文章，其建置的環境適用於 Visual Studio Code。
儘管目前主流的瀏覽器，都已經支援 CSS 的變數函式 var()，但是用法上稍嫌複雜 (詳細用法可以參考這篇文章)，而且管理上較不方便，因此這邊還是把變數當作 SCSS/Sass 的特色。
/* $變數名稱: 變數值; */
$font-color: #333;
h1,
h2,
h3,
h4,
h5,
h6,
p {
color: $font-color;
}
經過編譯後，會變成：
h1,
h2,
h3,
h4,
h5,
h6,
p {
color: #333;
}
在 SCSS 與 Sass 的世界中，可以透過函式的方法，大量建立重複的樣式。以 CSS 框架 Bootstrap 為例，其用來製作欄/列樣式的類型 .col-{n}，便可以透過 @for 函式的方法建立：
@for $n from 1 through 12 {
.col-#{$n} {
width: calc( (#{$n} / 12) * 100% );
}
}
上面的語法會編譯成下列的 CSS 語法：
.col-1 {
width: calc( (1/12) * 100% );
}
.col-2 {
width: calc( (2/12) * 100% );
}
/* 中間省略 */
.col-12 {
width: calc( (12/12) * 100% );
}
或者是計算文字大小 (font-size) 時，可以透過定義 @mixin 的方式來完成：
@mixin font-size($sizeValue: 1) {
font-size: ($sizeValue * 16) * 1px;
font-size: $sizeValue * 1rem;
}
h2 {
@include font-size(2.5);
}
編譯後會得到：
h2 {
font-size: 40px;
font-size: 2.5rem;
}
透過巢狀結構，我們可以讓樣式更好管理。
.container {
color: #333;
a {
color: #ee6688;
&:hover {
color: #ff7799;
}
}
}
編譯後會變成：
.container {
color: #333;
}
.container a {
color: #ee6688;
}
.container a:hover {
color: #ff7799;
}
由於我們公司的網站使用的是名為 _s (發音為 Underscore S) 的初始佈景，在勾選 [_sassify!] 這項進階設定後，會取得包含 scss 檔的佈景主題，供開發使用。它的基本架構如下：
sass/
|- elements/
|- forms/
|- layout/
|- media/
|- mixins/
|- modules/
|- navigation/
|- site/
|--- primary/
|--- secondary/
|- typography/
|- variables-site/
|- style.scss
從這裡我們可以看到 _s 預設的樣式架構。我們在取得這個初始佈景後，便可以根據自己想要優先編輯的模組著手進行。一般而言，我會先到 variable-site 這個路徑底下，將顏色 (_colors.scss) 與字型 (_typography.scss) 重新定義，接著再開始進行其他頁面的樣式客製化。
雖然說 CSS 這個主題本身可以成為一次鐵人賽的系列文，但這次的主題主要是透過 WordPress 來了解當代網站開發的基本概念，所以我們針對 CSS 的部分將點到為止。今天與大家分享 WordPress 的編碼標準，以及簡單介紹 SCSS/Sass 作為 CSS 篇章的收尾，希望想要針對樣式客製化的人搜尋進階知識時，能夠找到進一步延伸閱讀的文件。
其實讀到這裡，你已經有能力可以獨自分析整份 Twenty Twenty 的 style.css 樣式表了。但比起直接閱讀樣式表，我建議可以前往 Twenty Twenty 的範例頁面，使用瀏覽器的開發人員工具 (Chrome F12/Cmd+Option+I; Safari Cmd+Option+I) 了解不同樣式是如何應用在網站開發中。
接下來我們要開始進入程式語言的範疇：JavaScript 的世界。
iThome鐵人賽
看影片追技術